(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[50064,56628],{99800:(e,s,r)=>{"use strict";r.d(s,{A:()=>o,M:()=>l});var n=r(87687),t=r(52751);let l=t.createContext({code:"",lang:""}),o=t.memo(function(e){let{code:s,lang:r,children:t}=e;return(0,n.jsx)(l.Provider,{value:{code:s,lang:r},children:t})})},79298:(e,s,r)=>{"use strict";r.d(s,{A:()=>n});let n=(0,r(31928).I)("code")({name:"InlineCode",class:"i165vvr1",propsAsIs:!1});r(87585)},20362:(e,s,r)=>{"use strict";r.r(s),r.d(s,{default:()=>S});var n=r(87687),t=r(31928),l=r(52751),o=r(22405),a=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}),v=(0,t.I)("div")({name:"AnswerText",class:"anenvi3",propsAsIs:!1}),w=function(e){let s,r,{answer:t,answerIndex:l,selectedIndex:o,disabled:a,highlightAsCorrect:w,handleSelect:m}=e;"number"!=typeof o?(s=0,r=1):o===l?(s=0,r=1.045):(s=o>l?-5:5,r=1);let b="number"==typeof o&&o===l,I=b||w,f=(0,c.zh)({transform:"translateY(".concat(s,"px) scale(").concat(r,")")}),j=w?"var(--color-success":b?"var(--color-gray-1000)":void 0;return(0,n.jsxs)(p,{onClick:m,disabled:a,style:{...f,fontWeight:I?"var(--font-weight-bold)":void 0},children:[w&&(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)(v,{style:{color:j},children:t})]})};r(44646);var m=r(79298);let b=(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(e){let{providedAnswer:s,correctAnswer:r}=e,t=l.useRef(null);l.useEffect(()=>{var e;(null===(e=t.current)||void 0===e?void 0:e.scrollIntoView)&&t.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[]);let o=(0,n.jsxs)(n.Fragment,{children:["You answered ",(0,n.jsx)(m.A,{children:s}),", but the correct answer is ",(0,n.jsx)(m.A,{children:r}),"."]});return(0,n.jsx)(b,{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",{}),o]})})})})};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(e){let{preamble:s,question:r,answers:t,code:c,codeLang:i,correctAnswerIndex:d}=e,[p,u]=l.useState(null),[h,x]=l.useState(null);return(0,n.jsxs)(j,{children:[r&&(0,n.jsxs)(A,{children:[s,s&&" ",(0,n.jsx)(y,{children:r})]}),c&&(0,n.jsx)(z,{children:(0,n.jsx)(a.default,{includeContentStyles:!0,code:c,lang:i,style:{marginBottom:0}})}),(0,n.jsx)(g,{children:t.map((e,s)=>(0,n.jsx)(w,{answer:e,answerIndex:s,selectedIndex:p,highlightAsCorrect:!!h&&s===d,disabled:!!h,handleSelect:()=>{u(e=>s===e?null:s)}},s))}),"incorrect"===h&&"number"==typeof p&&(0,n.jsx)(f,{providedAnswer:t[p],correctAnswer:t[d]}),!h&&(0,n.jsx)(k,{children:(0,n.jsx)(o.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:e=>{e.exports={wzmwty:"wzmwty",c1lfyo70:"c1lfyo70",n1uagvkw:"n1uagvkw",n1isqyww:"n1isqyww",anenvi3:"anenvi3"}},82654:e=>{e.exports={ol7bhws:"ol7bhws",wev8ztn:"wev8ztn","slideIn-wev8ztn":"slideIn-wev8ztn"}},9347:e=>{e.exports={q1458bmf:"q1458bmf",qkes5ah:"qkes5ah",a4if8rg:"a4if8rg",b1b6u1qu:"b1b6u1qu",chtbl1u:"chtbl1u"}},6341:e=>{e.exports={w6ruzz9:"w6ruzz9"}}}]);
//# sourceMappingURL=50064.30be1f26d6a3d8f0.js.map