https://www.tesa.com/relaunch2020/build/questionaire.d8d45006.js

1"use strict";(globalThis.webpackChunktesa_2016=globalThis.webpackChunktesa_2016||[]).push([[6552],{5242:(e,l,o)=>{o.r(l),o.d(l,{default:()=>E});var a=o(5166);const n=o.p+"images/icn-answer.88bf8f3a.svg",t=o.p+"images/icn-question.d5e77a60.svg",u=o.p+"images/icn-correct.245861ac.svg",i=o.p+"images/icn-incorrect.9b0e0e1f.svg";var s=o(7105);const r={key:0,class:"result"},c={class:"result__items"},d={class:"result__item-question"},v=["src"],g={class:"result__item-answer"},b=["src"],_=["src"],k={class:"marg-t--3 grid-row"},w={class:"col-sm-4 col-12 col-sm-start-5"},q=["aria-label"],p={__name:"QuestionaireResult",props:{data:{type:Array,default:null},backgroundColor:{type:String,default:null}},emits:["reset"],setup(e,l){let{emit:o}=l;const p=o,{labelStore:y}=(0,s.b)({labelsRequired:["global"]});return(l,o)=>{const s=(0,a.up)("Icon");return e.data?((0,a.wg)(),(0,a.iD)("div",r,[(0,a._)("ul",c,[((0,a.wg)(!0),(0,a.iD)(a.HY,null,(0,a.Ko)(e.data,(e,l)=>((0,a.wg)(),(0,a.iD)("li",{key:l,class:"result__item"},[(0,a._)("div",d,[(0,a._)("img",{src:(0,a.SU)(t),class:"result__type-icon","aria-hidden":"true"},null,8,v),(0,a.Uk)(" "+(0,a.zw)(e.question),1)]),o[1]||(o[1]=(0,a.Uk)()),(0,a._)("div",g,[(0,a._)("img",{src:(0,a.SU)(n),class:"result__type-icon","aria-hidden":"true"},null,8,b),(0,a.Uk)(" "+(0,a.zw)(e.answer)+" ",1),(0,a._)("img",{src:e.isCorrect?(0,a.SU)(u):(0,a.SU)(i),class:"result__status-icon","aria-hidden":"true"},null,8,_)])]))),128))]),o[2]||(o[2]=(0,a.Uk)()),(0,a._)("div",k,[(0,a._)("div",w,[(0,a._)("button",{class:(0,a.C_)(["button button--cta-2 button--full-width result__reset-button",{"button--on-blue-bg":"blue"===e.backgroundColor,"button--on-red-bg":"red"===e.backgroundColor||"dark-grey"===e.backgroundColor}]),"aria-label":(0,a.SU)(y)["global.restart_quiz"],onClick:o[0]||(o[0]=e=>p("reset"))},[(0,a.Wm)(s,{name:"reset",class:"d--block"})],10,q)])])])):(0,a.kq)("v-if",!0)}}};var y=o(3744);const f=(0,y.Z)(p,[["__scopeId","data-v-5ba3399d"]]);var m=o(7345),C=o(7651);const h=["id"],U={key:0,class:"questionaire-question__copy copy col-12"},S=["aria-labelledby"],H=["onClick"],D={role:"alert",class:"questionaire-question__selected-answer-title headline headline--3 col-12"},x={key:0,class:"questionaire-question__copy copy col-12"},I={class:"questionaire-question__next-wrapper grid-row col-12"},z={__name:"QuestionaireQuestion",props:{backgroundColor:{type:String,default:null},question:{type:Object,default:null},focusQuestionOnMounted:{type:Boolean,default:!1}},emits:["answerClicked","nextQuestion"],setup(e,l){let{emit:o}=l;const n=e,t=o,{labelStore:u}=(0,s.b)({labelsRequired:["global"]}),i=(0,a.iH)(null),r=(0,a.iH)(!1),c=(0,a.iH)(null),d=(0,C.Rl)(),v=(0,a.Fl)(()=>{var e,l;return null===(e=n.question)||void 0===e||null===(l=e.answers)||void 0===l?void 0:l[c.value]}),g=(0,a.Fl)(()=>{var e,l,o;return(null===(e=n.question)||void 0===e||null===(l=e.answers)||void 0===l?void 0:l.indexOf(v.value))===(null===(o=n.question)||void 0===o?void 0:o.rightAnswerIndex)});function b(){(0,a.Y3)(()=>{var e;return null===(e=i.value)||void 0===e?void 0:e.focus()})}function _(){t("nextQuestion")}return(0,a.bv)(()=>{n.focusQuestionOnMounted&&b()}),(l,o)=>{var n,s;return(0,a.wg)(),(0,a.iD)("div",{ref_key:"questionElement",ref:i,class:(0,a.C_)(["questionaire-question grid-row",[`questionaire-question--${e.backgroundColor}`,{"-is-answered":r.value},{"-selected-right-answer":g.value}]]),tabindex:"-1"},[r.value?((0,a.wg)(),(0,a.iD)(a.HY,{key:1},[(0,a._)("h3",D,(0,a.zw)(v.value.title),1),o[3]||(o[3]=(0,a.Uk)()),v.value.copy?((0,a.wg)(),(0,a.iD)("p",x,(0,a.zw)(v.value.copy),1)):(0,a.kq)("v-if",!0),o[4]||(o[4]=(0,a.Uk)()),v.value.image?((0,a.wg)(),(0,a.j4)(m.Z,(0,a.dG)({key:1},null===(s=v.value)||void 0===s?void 0:s.image,{class:"questionaire-question__image col-12 col-sm-5"}),null,16)):(0,a.kq)("v-if",!0),o[5]||(o[5]=(0,a.Uk)()),(0,a._)("div",I,[(0,a._)("button",{class:(0,a.C_)(["button button--cta-2 questionaire-question__next-button col-sm-4 col-12 col-sm-start-5",{"button--on-blue-bg":"blue"===e.backgroundColor,"button--on-red-bg":"red"===e.backgroundColor||"dark-grey"===e.backgroundColor}]),onClick:_},(0,a.zw)((0,a.SU)(u)["global.next"]),3)])],64)):((0,a.wg)(),(0,a.iD)(a.HY,{key:0},[(0,a._)("h3",{id:(0,a.SU)(d),class:"headline headline--3 col-12"},(0,a.zw)(e.question.title),9,h),o[0]||(o[0]=(0,a.Uk)()),e.question.copy?((0,a.wg)(),(0,a.iD)("p",U,(0,a.zw)(e.question.copy),1)):(0,a.kq)("v-if",!0),o[1]||(o[1]=(0,a.Uk)()),e.question.image?((0,a.wg)(),(0,a.j4)(m.Z,(0,a.dG)({key:1},null===(n=e.question)||void 0===n?void 0:n.image,{class:"questionaire-question__image col-12 col-sm-5"}),null,16)):(0,a.kq)("v-if",!0),o[2]||(o[2]=(0,a.Uk)()),(0,a._)("div",{role:"group","aria-labelledby":(0,a.SU)(d),class:"questionaire-question__answers-wrapper grid-row col-12"},[((0,a.wg)(!0),(0,a.iD)(a.HY,null,(0,a.Ko)(e.question.answers,(l,o)=>((0,a.wg)(),(0,a.iD)("button",{key:o,class:(0,a.C_)(["button button--cta-2 questionaire-question__answers-button col-sm-3 col-12",{"button--on-blue-bg":"blue"===e.backgroundColor,"button--on-red-bg":"red"===e.backgroundColor||"dark-grey"==e.backgroundColor}]),onClick:e=>{return t("answerClicked",l=o),c.value=l,r.value=!0,void b();var l}}

1,(0,a.zw)(l.answer),11,H))),128))],8,S)],64))],2)}}},Q=(0,y.Z)(z,[["__scopeId","data-v-26a47b6e"]]);var j=o(9669),F=o.n(j);const R=["role","aria-labelledby"],Y={class:"container"},Z={class:"questionaire__content"},A={__name:"Questionaire",props:{backgroundColor:{type:String,default:"grey"},dataEndpoint:{type:String,default:null},headlineId:{type:String,default:"questionaire-heading"}},setup(e){const l=e,o=(0,a.iH)(null),n=(0,a.iH)(null),t=(0,a.iH)(!1),u=(0,a.iH)([]),i=(0,a.iH)([]),s=(0,a.iH)(0),r=(0,a.iH)(!1),c=(0,a.iH)(!1),d=(0,a.Fl)(()=>i.value[s.value]),v=(0,a.Fl)(()=>{var e;return(null===(e=i.value)||void 0===e?void 0:e.length)===s.value}),g=(0,a.Fl)(()=>{var e;return v.value?"result":(null===(e=d.value)||void 0===e?void 0:e.id)||"question"}),b=(0,a.Fl)(()=>u.value.map((e,l)=>{const o=i.value[l];return{question:o.title,answer:o.answers[e].answer,isCorrect:Boolean((null==o?void 0:o.rightAnswerIndex)==e)}}));function _(){s.value+=1,c.value=!0}function k(){u.value=[],s.value=0}return async function(){try{const e=await F().get(l.dataEndpoint);n.value=e.data,i.value=n.value.questions}catch(e){console.warn("fetchData failed",e)}}().then(()=>{t.value=!0}),(0,a.bv)(()=>{var e;r.value=Boolean(null===(e=o.value)||void 0===e?void 0:e.querySelector(`#${l.headlineId}`))}),(l,n)=>{const i=(0,a.up)("Skeleton");return(0,a.wg)(),(0,a.iD)("section",{ref_key:"rootElement",ref:o,class:"questionaire",role:r.value?"region":null,"aria-labelledby":r.value?e.headlineId:null},[(0,a._)("div",Y,[(0,a.WI)(l.$slots,"default"),n[2]||(n[2]=(0,a.Uk)()),(0,a._)("div",Z,[t.value?((0,a.wg)(),(0,a.j4)(a.uT,{key:0,name:"fade"},{default:(0,a.w5)(()=>[((0,a.wg)(),(0,a.iD)("div",{key:g.value},[d.value?((0,a.wg)(),(0,a.j4)(Q,{key:d.value.id,question:d.value,backgroundColor:e.backgroundColor,"focus-question-on-mounted":c.value,onNextQuestion:_,onAnswerClicked:n[0]||(n[0]=e=>u.value.push(e))},null,8,["question","backgroundColor","focus-question-on-mounted"])):(0,a.kq)("v-if",!0),n[1]||(n[1]=(0,a.Uk)()),v.value?((0,a.wg)(),(0,a.j4)(f,{key:1,data:b.value,backgroundColor:e.backgroundColor,onReset:k},null,8,["data","backgroundColor"])):(0,a.kq)("v-if",!0)]))]),_:1})):((0,a.wg)(),(0,a.j4)(i,{key:1,height:"480px"}))])])],8,R)}}},E=(0,y.Z)(A,[["__scopeId","data-v-0c2d2a46"]])}}]);