(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[20362],{79298:(s,e,r)=>{"use strict";r.d(e,{A:()=>n});let n=(0,r(31928).I)("code")({name:"InlineCode",class:"i165vvr1",propsAsIs:!1});r(87585)},20362:(s,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>S});var n=r(87687),t=r(31928),l=r(52751),a=r(22405),o=r(51311),c=r(30251),i=r(51838),d=r(19901);let p=(0,t.I)(c.CS.button)({name:"Wrapper",class:"wzmwty",propsAsIs:!0}),u=(0,t.I)("div")({name:"CheckmarkWrapper",class:"c1lfyo70",propsAsIs:!1}),h=(0,t.I)("div")({name:"Number",class:"n1uagvkw",propsAsIs:!1}),x=(0,t.I)("span")({name:"NumberText",class:"n1isqyww",propsAsIs:!1}),w=(0,t.I)("div")({name:"AnswerText",class:"anenvi3",propsAsIs:!1}),v=function(s){let e,r,{answer:t,answerIndex:l,selectedIndex:a,disabled:o,highlightAsCorrect:v,handleSelect:b}=s;"number"!=typeof a?(e=0,r=1):a===l?(e=0,r=1.045):(e=a>l?-5:5,r=1);let m="number"==typeof a&&a===l,I=m||v,f=(0,c.zh)({transform:"translateY(".concat(e,"px) scale(").concat(r,")")}),j=v?"var(--color-success":m?"var(--color-gray-1000)":void 0;return(0,n.jsxs)(p,{onClick:b,disabled:o,style:{...f,fontWeight:I?"var(--font-weight-bold)":void 0},children:[v&&(0,n.jsx)(u,{children:(0,n.jsx)(i.A,{size:24})}),(0,n.jsx)(h,{style:{"--backdrop-opacity":I?1:0,"--backdrop-color":j,borderWidth:I?2:1},children:(0,n.jsx)(x,{style:{color:I?"var(--color-background)":void 0},children:l+1})}),(0,n.jsx)(d.A,{size:12}),(0,n.jsx)(w,{style:{color:j},children:t})]})};r(44646);var b=r(79298);let m=(0,t.I)("div")({name:"OuterWrapper",class:"ol7bhws",propsAsIs:!1}),I=(0,t.I)(c.CS.div)({name:"Wrapper",class:"wev8ztn",propsAsIs:!0}),f=function(s){let{providedAnswer:e,correctAnswer:r}=s,t=l.useRef(null);l.useEffect(()=>{var s;(null===(s=t.current)||void 0===s?void 0:s.scrollIntoView)&&t.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[]);let a=(0,n.jsxs)(n.Fragment,{children:["You answered ",(0,n.jsx)(b.A,{children:e}),", but the correct answer is ",(0,n.jsx)(b.A,{children:r}),"."]});return(0,n.jsx)(m,{ref:t,children:(0,n.jsx)(I,{children:(0,n.jsx)("div",{children:(0,n.jsxs)("p",{children:[(0,n.jsx)("strong",{style:{fontWeight:"var(--font-weight-medium)"},children:"Sorry, that's incorrect."}),(0,n.jsx)("br",{}),a]})})})})};r(82654);let j=(0,t.I)("div")({name:"Wrapper",class:"w1k9lu4l",propsAsIs:!1}),A=(0,t.I)("div")({name:"Question",class:"q1458bmf",propsAsIs:!1}),y=(0,t.I)("span")({name:"QuestionText",class:"qkes5ah",propsAsIs:!1}),g=(0,t.I)("div")({name:"Answers",class:"a4if8rg",propsAsIs:!1}),k=(0,t.I)("div")({name:"ButtonWrapper",class:"b1b6u1qu",propsAsIs:!1}),z=(0,t.I)("div")({name:"CodeWrapper",class:"chtbl1u",propsAsIs:!1}),q=function(s){let{preamble:e,question:r,answers:t,code:c,codeLang:i,correctAnswerIndex:d}=s,[p,u]=l.useState(null),[h,x]=l.useState(null);return(0,n.jsxs)(j,{children:[r&&(0,n.jsxs)(A,{children:[e,e&&" ",(0,n.jsx)(y,{children:r})]}),c&&(0,n.jsx)(z,{children:(0,n.jsx)(o.default,{includeContentStyles:!0,code:c,lang:i,style:{marginBottom:0}})}),(0,n.jsx)(g,{children:t.map((s,e)=>(0,n.jsx)(v,{answer:s,answerIndex:e,selectedIndex:p,highlightAsCorrect:!!h&&e===d,disabled:!!h,handleSelect:()=>{u(s=>e===s?null:e)}},e))}),"incorrect"===h&&"number"==typeof p&&(0,n.jsx)(f,{providedAnswer:t[p],correctAnswer:t[d]}),!h&&(0,n.jsx)(k,{children:(0,n.jsx)(a.A,{disabled:"number"!=typeof p,onClick:()=>{x(p===d?"correct":"incorrect")},children:"Submit"})})]})};r(9347);let C=["200px","240px","244px","0px"],W=(0,t.I)("div")({name:"Wrapper",class:"w6ruzz9",propsAsIs:!1}),S=()=>(0,n.jsx)(W,{children:(0,n.jsx)(q,{code:'\n<style>\n  .parent {\n    width: 200px;\n  }\n  .box {\n    width: 100%;\n    border: 2px solid hotpink;\n    padding: 20px;\n  }\n</style>\n\n<div class="parent">\n  <div class="box"></div>\n</div>\n'.trim(),codeLang:"html",answers:C,correctAnswerIndex:2})});r(6341)},44646:s=>{s.exports={wzmwty:"wzmwty",c1lfyo70:"c1lfyo70",n1uagvkw:"n1uagvkw",n1isqyww:"n1isqyww",anenvi3:"anenvi3"}},82654:s=>{s.exports={ol7bhws:"ol7bhws",wev8ztn:"wev8ztn","slideIn-wev8ztn":"slideIn-wev8ztn"}},9347:s=>{s.exports={q1458bmf:"q1458bmf",qkes5ah:"qkes5ah",a4if8rg:"a4if8rg",b1b6u1qu:"b1b6u1qu",chtbl1u:"chtbl1u"}},6341:s=>{s.exports={w6ruzz9:"w6ruzz9"}}}]);
//# sourceMappingURL=20362.2b5eed5988429014.js.map