https://www.bfa-i.dk/app/assets/quiz.js

1const L=`
2<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
3<g id="chevron-right">
4<path id="Vector" d="M9 18L15 12L9 6" stroke="#0F448A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
5</g>
6</svg>
7`,F=`
8<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
9<g id="chevron-left">
10<path id="Vector" d="M15 18L9 12L15 6" stroke="#0F448A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
11</g>
12</svg>
13`,A=`
14<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
15<path id="Vector 2" d="M1.15039 5.72072L5.30424 8.62324L12.2273 2.22363" stroke="#008A29" stroke-width="4"/>
16</svg>
17`,k=`
18<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
19<path id="Vector 2" d="M1.69727 2.20696L6.81323 7.03656M6.81323 7.03656L11.6781 11.7922M6.81323 7.03656L11.6781 2.5144L1.69727 11.7922" stroke="#F7F7F7" stroke-width="4"/>
20</svg>
21`,j=`
22<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
23<g id="chevron-down">
24<path id="Vector" d="M6.6875 9L12.6875 15L18.6875 9" stroke="#0F448A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
25</g>
26</svg>
27`,I=e=>`
28	<iframe width="560" height="315" src="https://www.youtube.com/embed/${e}" title="YouTube video pla	yer" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`,B=e=>`
29	<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/${e}" frameborder="0" fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="In the Garden of Tulips"></iframe></div><script src="https://player.vimeo.com/api/player.js"><\/script>`;let l=0;sessionStorage.getItem("BFAQuiz")?sessionStorage.getItem("BFAQuiz"):sessionStorage.setItem("BFAQuiz","{}");function C(){l-=1,m(l,json)}function M(){l+=1,m(l,json)}function V(e){l+=1;const r=e.split(","),s=JSON.parse(sessionStorage.getItem("BFAQuiz"));if(s[r[0]]=r[1],sessionStorage.setItem("BFAQuiz",JSON.stringify(s)),l==g){setTimeout(()=>{H(json)},300);return}setTimeout(()=>{m(l,json)},300)}const z=document.querySelector("#quizcontainer"),g=json.questions.length,E=e=>String.fromCharCode(97+e).toUpperCase(),Q=(e,r,s)=>{let n="<ul>";return e.answers.forEach((a,i)=>{const c=E(i);let o=!1;i==s&&(o=!0),n+=`
30			<li>
31                <span class="alpha-number">${c}</span>
32				<input type='radio' ${o?"checked":""} data-answer="${r}, ${i}" id='answer-${i}' name=answer-${r}></input>
33				<label tabindex="0" for=answer-${i}>
34                ${a.imageUrl?`<img src="${a.imageUrl}" />`:""}
35                
36                ${a.answer}<span>Svar</span></label>
37			</li>
38			`,a+="</ul>"}),`
39        <div class='question' id="question">
40            <div class='heading'><span class="title">
41
42			${e.question}</span>
43            <div class="heading-right">
44            <span class="progress-numbers">${r+1} / ${g}</span>
45                    <div class='actions'>
46                    <button data-prev>${F}</button>
47                    <button data-next>${L}</button>
48                </div>
49            </div>
50
51            </div>
52			<div class="question-media">
53			${e.imageUrl?`<img src="${e.imageUrl}" />`:""}
54			${e.videoSource=="YouTube"&&e.videoId?I(e.videoId):""}
55			${e.videoSource=="Vimeo"&&e.videoId?B(e.videoId):""}
56			<span>${e.text}</span>
57        </div>
58                <span >Vælg et svar</span>
59                <div class='answers'>
60                    ${n}
61                </div>
62        </div>
63
64				`};function m(e,r){let s=null,n=null;sessionStorage.getItem("BFAQuiz")&&(n=JSON.parse(sessionStorage.getItem("BFAQuiz")),s=n[e]),z.innerHTML=Q(r.questions[e],e,s),document.querySelectorAll("#quizcontainer input").forEach(w=>{w.addEventListener("click",()=>{V(w.dataset.answer)})});const i=document.querySelector("[data-prev]"),c=document.querySelector("[data-next]");e==0&&(i.disabled=!0);let o=0;n&&Object.keys(n).length>0&&(o=Object.keys(n).length),(e==g-1||o==e)&&(c.disabled=!0),i.addEventListener("click",C),c.addEventListener("click",M);const d=document.querySelector("#progress"),p=document.querySelector("#progress-bar");d.style.width=p.clientWidth/g*(e+1)+"px",document.querySelector("#question").scrollIntoView({behavior:"instant",block:"end"})}m(l,json);function U(){sessionStorage.setItem("BFAQuiz","{}"),location.reload()}const O=e=>{let r=[],s='<div class="quiz-results">',n='<div class="answerlist"><p>Dine svar</p><ul>';e.questions.forEach((t,v)=>{const b=JSON.parse(sessionStorage.getItem("BFAQuiz"));let S="correct",x=A,u=t.answers.findIndex($=>$.isCorrectAnswer===!0);const T=E(u),y=b[v];u!=b[v]?(x=k,S="wrong"):r.push(u);let f='<ul class="panel-answers">';

64t.answers.forEach(($,h)=>{f+=`
65                   <li class="${u==h?"correct":h==y?"wrong":""}">
66                     <div class="icon">${u==h?A:h==y?k:""}</div>
67                        ${$.answer}
68                   </li>
69                `}),f+="</ul>",n+=`
70            <li class="answer-item ${S}">
71            <div class="answer-panel"  data-answer-accordion>
72                <div class="answer-icon">${x}</div>
73                   <span class="answer-number">${v+1}</span> 
74                  ${t.question}
75
76                <div class="expand-answer">${j}</div>
77                </div>
78                <div class="answer-content">
79                <div class="content-wrapper">
80                     <span class="title">${t.question}</span>
81					<div class="question-media">
82						${t.imageUrl?`<img src="${t.imageUrl}" />`:""}
83						${t.videoSource=="YouTube"&&t.videoId?I(t.videoId):""}
84						${t.videoSource=="Vimeo"&&t.videoId?B(t.videoId):""}
85						<span>${t.text}</span>
86					</div>
87                        <span class="subtitle">Dit svar</span>
88                        ${f}
89                </div>
90				<div class="answer-explanation">
91						<span class="subtitle">Det rigtige svar er ${T} </span>
92						${t.explanationText}
93					</div>
94                </div>
95            </li>`}),n+="</ul></div>";const a=r.length/g*100,i=e.completedTexts.sort((t,v)=>t.showAtPercentage-v.showAtPercentage),c=i.filter(t=>t.showAtPercentage<a);let o;a>0?o=c[c.length-1]:o=i[0];let d=o.title;d=d.replace("{{correctAnswers}}",r.length),d=d.replace("{{numberOfQuestions}}",g),s+=`
96           <div class="">
97                <div class="result-heading">
98                <div class="heading-title">
99				${r.length>0?'<img src="/Assets/Images/congrats_limit.gif" />':""}
100                    <h2>${d}</h2>
101                    </div>
102                     <div class="result-text">${o.text}</div>
103                   </div>
104           </div>`;let p='<div class="completed-content">';e.completedContents.forEach(t=>{p+=`
105            <a href="${t.url}" class="completed-content-item">
106                <img src="${t.imageUrl}" />
107                <div class="completed-content-text">${t.text} <span class="completed-content-chevron">${L}</span></div>
108            </a>
109            `}),p+="</div>";let w=`
110		<button id="resetbutton">Tag Quiz igen</button>`;return s+=p,s+=n,s+=w,s+="</div>",s};function H(e){z.innerHTML=O(e),document.querySelectorAll("[data-answer-accordion]").forEach(s=>{s.addEventListener("click",()=>{s.classList.toggle("expanded"),s.nextElementSibling.style.maxHeight?s.nextElementSibling.style.maxHeight=null:s.nextElementSibling.style.maxHeight=s.nextElementSibling.scrollHeight+"px"})}),document.querySelector("#resetbutton").addEventListener("click",()=>{U()})}