https://www.statbeljunior.be/_next/static/chunks/pages/quiz/[slug]-2eb86e30062126cc.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[373],{20012:function(e,l,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/quiz/[slug]",function(){return t(77640)}])},77640:function(e,l,t){"use strict";t.r(l),t.d(l,{__N_SSG:function(){return C},default:function(){return y}});var s=t(52322),o=t(30235),r=t(59877),i=t(55351),a=t(13102),n=t(2784),c=t(82345),d=t(72779),x=t.n(d),u=t(28812),g=t(14282),h=t(87980),m=t(96158),p=t(45620),f=t(12447),b=t(62760);let j=e=>{let{confettiTriggered:l,scorePercentage:t,onEndAnimation:o,answers:i,questions:n,mainQuiz:c,colorCode:d}=e,{t:j}=(0,r.$G)("common",{keyPrefix:"quizDetail"}),v=(0,g.W7)(),{user:N,authType:w}=(0,u.useAuth)();return(0,s.jsx)("div",{className:"relative",children:(0,s.jsxs)("div",{className:"mx-auto grid max-w-[1440px] lg:grid-cols-[4fr_5fr] lg:gap-20",children:[(0,s.jsx)("section",{style:{backgroundColor:d&&d},className:"lg:before:absolute lg:before:left-0 lg:before:top-0 lg:before:z-[-1] lg:before:h-full lg:before:w-[30%] bg-orange-500 lg:before:bg-inherit",children:(0,s.jsx)("div",{className:" relative lg:sticky lg:min-h-[calc(100vh-102px)] lg:top-[102px] px-6 pt-10 md:px-10 lg:pt-14 flex flex-col gap-4 ",children:(0,s.jsxs)(m.D,{isTriggered:l,onEndAnimation:o,children:[(0,s.jsxs)(b.D,{as:"h1",style:{color:d&&(0,a._j)(.43,d)},className:"text-3xl text-orange-800",children:[j("result.yourScore")," ",t]}),(0,s.jsx)(f.x,{style:{color:d&&(0,a._j)(.43,d)},className:"text-orange-800",children:j("result.intro1")}),N?(0,s.jsxs)(s.Fragment,{children:["student"===w&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(f.x,{style:{color:d&&(0,a._j)(.43,d)},className:"mt-6 text-orange-800",children:(0,s.jsx)("strong",{children:j("result.intro2")})}),(0,s.jsx)(f.x,{style:{color:d&&(0,a._j)(.43,d)},className:"text-orange-800",children:j("result.intro3")}),(0,s.jsxs)("div",{className:"flex flex-wrap gap-4",children:[(0,s.jsxs)(h.z,{variant:"outline",className:" drop-shadow-orange !bg-white",colorCode:d,href:v("/progress"),as:"a",children:[j("result.button"),(0,s.jsx)("i",{className:"text-[24px] icon-icon-arrow-right"})]}),c&&(0,s.jsxs)(h.z,{variant:"outline",className:"!text-white z-10",color:"white",href:v("/progress/diploma"),as:"a",children:[(0,s.jsx)("i",{className:"text-[24px] icon-icon-download"}),j("result.secondaryButton")]})]})]}),"teacher"===w&&(0,s.jsx)(s.Fragment,{children:(0,s.jsx)("div",{className:"flex flex-wrap gap-4",children:(0,s.jsxs)(h.z,{variant:"outline",className:"!bg-white drop-shadow-orange",colorCode:d,href:v("/"),as:"a",children:[j("result.button2"),(0,s.jsx)("i",{className:"text-[24px] icon-icon-arrow-right"})]})})})]}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(f.x,{style:{color:d&&(0,a._j)(.43,d)},className:"mt-6 text-orange-800",children:(0,s.jsx)("strong",{children:j("result.intro2")})}),(0,s.jsx)(f.x,{style:{color:d&&(0,a._j)(.43,d)},className:"text-orange-800",children:j("result.intro4")}),(0,s.jsx)("div",{className:"flex flex-wrap gap-4",children:(0,s.jsxs)(h.z,{variant:"outline",className:"!bg-white drop-shadow-orange",colorCode:d,href:v("/"),as:"a",children:[j("result.button2"),(0,s.jsx)("i",{className:"text-[24px] icon-icon-arrow-right"})]})})]}),(0,s.jsx)("div",{className:"mx-auto mt-auto max-w-[350px] lg:mx-0",children:(0,s.jsx)(p.E,{src:"/images/statistimals.svg",alt:"statistimals",className:"h-full w-full object-cover",width:344,height:219})})]})})}),(0,s.jsxs)("section",{className:"px-6 py-14 md:px-10",children:[(0,s.jsx)(b.D,{as:"h2",className:"mb-4 text-3xl",children:j("result.seeQuestionsAndAnswers")}),(0,s.jsx)(f.x,{children:j("result.QAndAIntro")}),null==n?void 0:n.map((e,l)=>(0,s.jsxs)("article",{className:"mt-14",children:[(0,s.jsxs)("p",{className:"mb-4 font-default text-xs font-semibold uppercase tracking-[.8px]",style:{color:d&&(0,a._j)(.33,d)},children:[j("question")," ",l+1]}),(0,s.jsx)(b.D,{as:"h3",className:"mb-8 text-2xl",children:e.title}),(0,s.jsxs)("div",{className:"flex flex-col gap-4",children:[e.options.map(e=>(0,s.jsxs)("div",{className:x()("rounded-2xs relative block w-full bg-gray-100 text-gray-700 px-5 py-4 font-default transition-all peer-checked:bg-orange-500 peer-checked:text-orange-800 lg:w-fit"),style:{backgroundColor:e.id==i[l]?d:"",color:e.id==i[l]?(0,a._j)(.43,d):""},children:[e.content,e.isCorrect&&(0,s.jsx)("div",{className:" absolute right-[-16px] top-[-16px] flex h-[36px] w-[36px] items-center justify-center rounded-full border-4 border-white bg-pistachio-500 text-pistachio-800",children:(0,s.jsx)("i",{className:"text-[16px] icon-icon-check"})}),e.id==i[l]&&!e.isCorrect&&(0,s.jsx)("div",{className:" absolute right-[-16px] top-[-16px] flex h-[36px] w-[36px] items-center justify-center rounded-full border-4 border-white bg-red-400",children:(0,s.jsx)("i",{className:"text-[16px] icon-icon-x"})})]},e.id)),e.options.map(e=>e.id===i[l]&&e.isCorrect?(0,s.jsx)("div",{children:(0,s.jsx)(f.x,{className:"mb-2 mt-8 text-sm",children:(0,s.jsx)("strong",{children:j("result.correctAnswer")})})},"answer-".concat(e.id)):e.id!==i[l]||e.isCorrect?void 0:(0,s.jsx)("div",{children:(0,s.jsx)(f.x,{className:"mb-2 mt-8 text-sm",children:(0,s.jsx)("strong",{children:j("result.wrongAnswer")})})},e.id))]})]},"".concat(e.id,"-").concat(l)))]})]})})};

1var v=t(8833),N=t(86635),w=t(8172),C=!0,y=(0,o.withSuperJSONPage)(function(e){var l,t,o,d,x,u,g,m,f,b,C,y,k,_,z,E,F,A;let{quiz:S}=e,{t:q}=(0,r.$G)("common",{keyPrefix:"quizDetail"}),[B,D]=(0,n.useState)(0),Z=S.slots.length,[P,Q]=(0,n.useState)(""),[T,$]=(0,n.useState)([]),[G,M]=(0,n.useState)("quiz"),[R,X]=(0,n.useState)(!1),[J,O]=(0,n.useState)(!1);(0,n.useEffect)(()=>{O(S.slots.map(e=>{let l=Math.floor(Math.random()*e.questions.length);return e.questions[l]}).filter(Boolean))},[S.slots]);let{trackQuizCompletion:I}=(0,c.S)(),L=()=>{let e=0;return T.map((l,t)=>{if(J){var s;null===(s=J[t])||void 0===s||s.options.map(t=>{t.id===l&&t.isCorrect&&e++})}}),Math.round(e/Z*100)};return(0,n.useEffect)(()=>{"result"===G&&window.scrollTo(0,0)},[G]),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("h1",{className:"hidden",children:S.title}),(0,s.jsx)(i.PB,{titleTemplate:"%s | Quiz | Statbel Junior",title:S.title,description:q("metaDescription",{topic:null===(l=S.topic)||void 0===l?void 0:null===(t=l.name)||void 0===t?void 0:t.toLowerCase()}),openGraph:{...S.topic?{images:[{url:null===(o=S.topic)||void 0===o?void 0:o.header}]}:{}}}),"quiz"===G&&J&&(0,s.jsxs)("div",{className:"relative",children:[(0,s.jsxs)("div",{className:"mx-auto grid max-w-[1440px] lg:grid-cols-[4fr_5fr] lg:gap-20",children:[(0,s.jsx)("div",{className:"bg-gray-50 px-5 md:px-10 py-10 lg:py-28 lg:before:absolute lg:before:left-0 lg:before:top-0 lg:before:z-[-1] lg:before:h-full lg:before:w-[30%] lg:before:bg-gray-50",children:(0,s.jsx)(v.Zb,{children:(0,s.jsx)(p.E,{src:null===(d=J[B])||void 0===d?void 0:d.image,alt:"test",className:" h-full max-h-[400px] w-full object-contain"})})}),(0,s.jsxs)("div",{className:"flex flex-col gap-4 px-6 py-10 md:px-10 lg:py-28",children:[(0,s.jsxs)("p",{className:"font-default text-xs font-semibold uppercase tracking-[.8px]",style:{color:null!==(z=null===(x=S.topic)||void 0===x?void 0:x.textColor)&&void 0!==z?z:"#BE582C"},children:[q("question")," ",B+1]}),(0,s.jsx)(w.D,{className:"text-2xl",as:"h2",children:null===(u=J[B])||void 0===u?void 0:u.title}),(0,s.jsx)("div",{className:"flex flex-col gap-4",children:null===(g=J[B])||void 0===g?void 0:g.options.map(e=>{var l,t,o,r,i;return(0,s.jsxs)("div",{style:{backgroundColor:null!==(r=null===(l=S.topic)||void 0===l?void 0:l.backgroundColor)&&void 0!==r?r:"#F5A16B",color:null!==(i=null===(t=S.topic)||void 0===t?void 0:t.textColor)&&void 0!==i?i:"#72321B"},className:"max-w-fit rounded-2xs overflow-hidden",children:[(0,s.jsx)("input",{type:"radio",id:e.id,name:null===(o=J[B])||void 0===o?void 0:o.id,className:"peer hidden",value:e.id,checked:!P&&T[B]===e.id||P===e.id,onChange:e=>{Q(e.target.id)}}),(0,s.jsx)("label",{htmlFor:e.id,className:"block w-full cursor-pointer !bg-gray-100 text-gray-700 px-5 py-4 font-default transition-all peer-checked:!bg-inherit peer-checked:text-inherit lg:w-fit",children:e.content})]},e.id)})})]})]}),(0,s.jsx)("div",{className:"bg-orange-500 sticky bottom-0",style:{backgroundColor:null===(m=S.topic)||void 0===m?void 0:m.backgroundColor},children:(0,s.jsxs)("div",{className:"mx-auto flex max-w-[1440px] items-center justify-between  px-10 py-4",children:[(0,s.jsx)(h.z,{variant:"primary",className:"mx-auto w-full max-w-fit bg-orange-400 text-white px-4 lg:px-6 ",colorCode:null!==(E=null===(f=S.topic)||void 0===f?void 0:f.backgroundColor)&&void 0!==E?E:"#F5A16B",style:{backgroundColor:(null===(b=S.topic)||void 0===b?void 0:b.backgroundColor)&&(0,a.$n)(.05,null===(C=S.topic)||void 0===C?void 0:C.backgroundColor)},onClick:()=>{B>0&&(""!==P&&(T[B]=P),$(T),D(B-1),Q(""))},disabled:0===B,"aria-label":q("previousQuestion"),children:(0,s.jsx)("i",{className:"text-[24px] icon-icon-arrow-left"})}),(0,s.jsx)("div",{className:"w-full",children:(0,s.jsx)(N.c,{color:null===(y=S.topic)||void 0===y?void 0:y.backgroundColor,colorClass:"bg-orange-700",colorLightClass:"bg-orange-400",progress:B,content:"".concat(q("question")," ").concat(B+1,"/").concat(Z,". ").concat(q("goodJob")),className:"mx-5 lg:mx-28",lightMode:!0,maxValue:Z})}),(0,s.jsxs)(h.z,{variant:"outline",className:"mx-auto w-full max-w-fit px-4 !bg-white lg:px-6",colorCode:null!==(F=null===(k=S.topic)||void 0===k?void 0:k.backgroundColor)&&void 0!==F?F:"#F5A16B",onClick:()=>{""!==P&&(T[B]=P),B+1==Z&&(M("result"),I({id:S.externalReference,score:L()}),X(!0)),$(T),D(B+1),Q("")},disabled:""==P&&!T[B],children:[(0,s.jsx)("span",{className:"hidden lg:block",children:q(B+1===Z?"finishQuiz":"nextQuestion")})," ",(0,s.jsx)("i",{className:"text-[24px] icon-icon-arrow-right"})]})]})})]}),"result"===G&&J&&(0,s.jsx)(j,{colorCode:null!==(A=null===(_=S.topic)||void 0===_?void 0:_.backgroundColor)&&void 0!==A?A:"#F5A16B",scorePercentage:(0,s.jsxs)("span",{children:[L(),"%"]}),confettiTriggered:R,onEndAnimation:()=>X(!1),answers:T,questions:J,mainQuiz:!S.topic})]})})},96158:function(e,l,t){"use strict";t.d(l,{D:function(){return n}});var s=t(52322),o=t(72779),r=t.n(o),i=t(8543),a=t(2784);let n=e=>{let l,{isTriggered:t,onEndAnimation:o,children:n,fullPage:c,className:d}=e,x=(0,a.useRef)(!1),u=(0,a.useRef)(null);return c?l=new i.Z:null!==u.current&&(l=new i.Z({canvas:u.current})),t&&l&&!x.current&&(x.current=!0,l.addConfetti({confettiColors:["#F2C94C","#27AE60","#9B51E0","#2F80ED","#585357","#EB5757","#6FCF97"],confettiRadius:6,confettiNumber:40}).then(o)),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("canvas",{ref:u,className:r()(d,"absolute left-0 top-0 h-full w-full")}),(0,s.jsx)("div",{}),n]})}},86635:function(e,l,t){"use strict";t.d(l,{c:function(){return n}});var s=t(52322),o=t(19964),r=t(13102),i=t(2784),a=t(81529);let n=e=>{let{progress:l,className:t,colorClass:n,colorLightClass:c,lightMode:d=!1,content:x,fullpage:u=!1,maxValue:g,color:h}=e,m=l/g*100,p=(0,i.useId)();return(0,s.jsxs)("div",{className:(0,a.Z)({"bg-theme-color-700":u}),children:[(0,s.jsxs)("div",{className:(0,a.Z)(t,"relative font-default",{"ml-6 mr-[66px]":u}),children:[(0,s.jsx)(o.fC,{className:(0,a.Z)("progress-root",c,{"rounded-full":!u}),style:{backgroundColor:h&&(0,r.$n)(.15,h)},value:m,"aria-labelledby":p,children:(0,s.jsx)(o.z$,{className:(0,a.Z)(n,"progress-indicator relative",{"bg-white":d}),style:{transform:"translateX(-".concat(100-m,"%)"),backgroundColor:h&&(0,r._j)(.22,h)}})}),(0,s.jsx)("div",{id:p,style:{left:"".concat(m,"%"),backgroundColor:h&&(0,r._j)(.33,h),color:h&&(0,r._j)(.43,h)},className:(0,a.Z)(n,"progress-content absolute bottom-[25px] before:bg-inherit z-[2]"),children:(0,s.jsx)("span",{className:"progress-content-offset absolute left-0 bottom-0 bg-inherit",style:{transform:"translateX(-".concat(m,"%)")},children:(0,s.jsx)("span",{className:"block whitespace-nowrap rounded-[9px] -mx-5 p-2 text-xs bg-inherit text-white",children:x})})})]}),u&&(0,s.jsx)("div",{style:{backgroundColor:h,color:h&&(0,r._j)(.43,h)},className:(0,a.Z)("absolute bottom-0 right-0 z-[1] inline-block rounded-tl-full pb-3 pl-6 pr-3 pt-6",n),role:"presentation",children:(0,s.jsx)("i",{className:"inline-block origin-center rotate-[-30deg] text-[30px] text-inherit icon-icon-gift"})})]})}}},function(e){e.O(0,[802,774,888,179],function(){return e(e.s=20012)}),_N_E=e.O()}]);