(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[74237],{56073:(s,e,r)=>{"use strict";r.d(e,{Z:()=>n});let n=(0,r(64833).z)("code")({name:"InlineCode",class:"i165vvr1",propsAsIs:!1});r(67787)},74237:(s,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>S});var n=r(67841),t=r(64833),l=r(79477),a=r(32683),o=r(28061),c=r(97718),i=r(61031),d=r(75865);let p=(0,t.z)(c.q.button)({name:"Wrapper",class:"wzmwty",propsAsIs:!0}),u=(0,t.z)("div")({name:"CheckmarkWrapper",class:"c1lfyo70",propsAsIs:!1}),h=(0,t.z)("div")({name:"Number",class:"n1uagvkw",propsAsIs:!1}),x=(0,t.z)("span")({name:"NumberText",class:"n1isqyww",propsAsIs:!1}),w=(0,t.z)("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,f=m||v,j=(0,c.q_)({transform:"translateY(".concat(e,"px) scale(").concat(r,")")}),y=v?"var(--color-success":m?"var(--color-gray-1000)":void 0;return(0,n.jsxs)(p,{onClick:b,disabled:o,style:{...j,fontWeight:f?"var(--font-weight-bold)":void 0},children:[v&&(0,n.jsx)(u,{children:(0,n.jsx)(i.Z,{size:24})}),(0,n.jsx)(h,{style:{"--backdrop-opacity":f?1:0,"--backdrop-color":y,borderWidth:f?2:1},children:(0,n.jsx)(x,{style:{color:f?"var(--color-background)":void 0},children:l+1})}),(0,n.jsx)(d.Z,{size:12}),(0,n.jsx)(w,{style:{color:y},children:t})]})};r(62399);var b=r(56073);let m=(0,t.z)("div")({name:"OuterWrapper",class:"ol7bhws",propsAsIs:!1}),f=(0,t.z)(c.q.div)({name:"Wrapper",class:"wev8ztn",propsAsIs:!0}),j=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.Z,{children:e}),", but the correct answer is ",(0,n.jsx)(b.Z,{children:r}),"."]});return(0,n.jsx)(m,{ref:t,children:(0,n.jsx)(f,{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(64206);let y=(0,t.z)("div")({name:"Wrapper",class:"w1k9lu4l",propsAsIs:!1}),z=(0,t.z)("div")({name:"Question",class:"q1458bmf",propsAsIs:!1}),I=(0,t.z)("span")({name:"QuestionText",class:"qkes5ah",propsAsIs:!1}),A=(0,t.z)("div")({name:"Answers",class:"a4if8rg",propsAsIs:!1}),g=(0,t.z)("div")({name:"ButtonWrapper",class:"b1b6u1qu",propsAsIs:!1}),k=(0,t.z)("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)(y,{children:[r&&(0,n.jsxs)(z,{children:[e,e&&" ",(0,n.jsx)(I,{children:r})]}),c&&(0,n.jsx)(k,{children:(0,n.jsx)(o.default,{includeContentStyles:!0,code:c,lang:i,style:{marginBottom:0}})}),(0,n.jsx)(A,{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)(j,{providedAnswer:t[p],correctAnswer:t[d]}),!h&&(0,n.jsx)(g,{children:(0,n.jsx)(a.Z,{disabled:"number"!=typeof p,onClick:()=>{x(p===d?"correct":"incorrect")},children:"Submit"})})]})};r(88353);let W=["200px","240px","244px","0px"],C=(0,t.z)("div")({name:"Wrapper",class:"w60yxts",propsAsIs:!1}),S=()=>(0,n.jsx)(C,{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:W,correctAnswerIndex:2})});r(72661)},62399:s=>{s.exports={wzmwty:"wzmwty",c1lfyo70:"c1lfyo70",n1uagvkw:"n1uagvkw",n1isqyww:"n1isqyww",anenvi3:"anenvi3"}},64206:s=>{s.exports={ol7bhws:"ol7bhws",wev8ztn:"wev8ztn","slideIn-wev8ztn":"slideIn-wev8ztn"}},88353:s=>{s.exports={q1458bmf:"q1458bmf",qkes5ah:"qkes5ah",a4if8rg:"a4if8rg",b1b6u1qu:"b1b6u1qu",chtbl1u:"chtbl1u"}},72661:s=>{s.exports={w60yxts:"w60yxts"}}}]);
//# sourceMappingURL=74237.0427f31ba19e76a5.js.map