https://www1.wdr.de/assets-v5.180.2/js/Quiz-31Q0Tsb9.js

1import{B as R}from"./Base-BouCSPYx.js";const g="v-bannerhochm",T="v-gseapremiumxl",h="%%FORMAT%%",p=`_v-${h}`,L=(t,e=g)=>t.includes(h)?t.includes(p)?t.replaceAll(p,`_${e}`):t.replaceAll(h,e):t,y=t=>t==="bild"||t==="audio"||t==="video",q=(t,e=g)=>{const s=t.typ?.trim().toLowerCase(),n=t.src?.trim();if(!s||!n||!y(s))return null;const r=s==="bild"?L(n,e):n;return{type:s,src:r,description:t.beschreibung?.trim()||void 0}},H=(t,e)=>{const s=t.frage?.trim(),n=t.antworten??[];if(!s||n.length===0)return null;const r=n.map((a,l)=>{const u=a.antwort?.trim();return u?{id:`q${e+1}-a${l+1}`,text:u,isCorrect:a.richtig===1}:null}).filter(a=>a!==null);if(r.length===0)return null;const i=(t.assets??[]).map(a=>q(a,g)).filter(a=>a!==null);return{id:`q${e+1}`,promptHtml:s,explanationHtml:t.erklaerung?.text?.trim()||void 0,answers:r,assets:i}},C=t=>{const e=t.titel?.trim(),s=t.einleitung?.trim()||void 0;if(!e)throw new Error("Quiz-Daten sind unvollstaendig: titel fehlt.");const n=(t.fragen??[]).map(H).filter(i=>i!==null);if(n.length===0)throw new Error("Quiz-Daten sind unvollstaendig: keine gueltigen Fragen gefunden.");const r=(t.assets??[]).map(i=>q(i,T)).filter(i=>i!==null);return{title:e,intro:s,questions:n,...r.length>0&&{assets:r}}},M=async t=>{const e=await fetch(t);if(!e.ok)throw new Error(`Quiz konnte nicht geladen werden (${e.status}).`);const s=await e.json();return C(s)};class _{quiz;currentQuestionIndex=0;selectedAnswerIndex=null;answerRevealed=!1;correctAnswers=0;finished=!1;constructor(e){this.quiz=e}get data(){return this.quiz}get currentIndex(){return this.currentQuestionIndex}get totalQuestions(){return this.quiz.questions.length}get selection(){return this.selectedAnswerIndex}get isAnswerRevealed(){return this.answerRevealed}get isFinished(){return this.finished}get currentQuestion(){return this.quiz.questions[this.currentQuestionIndex]}get correctAnswerIndex(){return this.currentQuestion.answers.findIndex(e=>e.isCorrect)}get isCurrentSelectionCorrect(){return this.selectedAnswerIndex===null?!1:this.currentQuestion.answers[this.selectedAnswerIndex]?.isCorrect===!0}selectAnswer(e){this.finished||this.answerRevealed||!this.currentQuestion.answers[e]||(this.selectedAnswerIndex=e)}revealAnswer(){if(this.finished||this.selectedAnswerIndex===null||this.answerRevealed)return;this.currentQuestion.answers[this.selectedAnswerIndex]?.isCorrect&&(this.correctAnswers+=1),this.answerRevealed=!0}advance(){if(this.finished||!this.answerRevealed)return;if(this.currentQuestionIndex<this.quiz.questions.length-1){this.currentQuestionIndex+=1,this.selectedAnswerIndex=null,this.answerRevealed=!1;return}this.finished=!0}restart(){this.currentQuestionIndex=0,this.selectedAnswerIndex=null,this.answerRevealed=!1,this.correctAnswers=0,this.finished=!1}getResult(){return{correct:this.correctAnswers,total:this.totalQuestions}}}const o=t=>t.replaceAll("&","&amp;").replaceAll("<","&lt;").replaceAll(">","&gt;").replaceAll('"',"&quot;").replaceAll("'","&#39;"),S=t=>{const e=t.assets.find(s=>s.type==="bild");return e?`<figure class="quizAsset quizAssetPending"><img class="quizAssetImage" data-quiz-asset-image src="${e.src}" alt="${o(e.description||"")}" loading="eager" decoding="async" /></figure>`:""},k=()=>'<div class="quizState">Quiz wird geladen ...</div>',A=t=>`<div class="quizState quizStateError">${o(t)}</div>`,F=t=>{const e=t.intro?.trim()?`<p class="quizIntroText">${o(t.intro)}</p>`:"",s=t.assets?.find(r=>r.type==="bild");return`
2    <section class="quizView quizIntro" aria-live="polite">
3      ${s?`<figure class="quizAsset quizAssetPending"><img class="quizAssetImage" data-quiz-asset-image src="${s.src}" alt="${o(s.description||"")}" loading="eager" decoding="async" /></figure>`:""}
4      <div class="quizIntroContent">
5        <h2 class="quizTitle">${o(t.title)}</h2>
6        ${e}
7        <button type="button" class="quizButton" data-quiz-action="start">Quiz starten</button>
8      </div>
9    </section>
10  `},B=(t,e,s,n,r,i,a,l)=>{const u=s+1,v=i&&u===n?"Zum Ergebnis":"Weiter",$=r===null&&!i,z=e.explanationHtml?.trim()||"",I=i?`
11      <div class="quizResolution ${l?"correct":"incorrect"}

11" aria-live="polite">
12        <p class="quizResolutionKicker">${l?"Richtig!":"Leider falsch"}</p>
13        ${z?`<div class="quizResolutionText">${z}</div>`:""}
14      </div>
15    `:"",Q=e.answers.map((d,c)=>{const f=r===c,m=`${e.id}-a${c+1}`,w=i?c===a?"correct":"incorrect":"",x=i&&f?"selected":"",b=i?`<span class="quizAnswerStateIcon ${w}" aria-hidden="true"></span>`:`
16            <input
17              class="input"
18              id="${m}"
19              aria-label="${o(d.text)}"
20              type="radio"
21              name="${e.id}"
22              value="${c}"
23              data-quiz-answer-index="${c}"
24              ${f?"checked":""}
25            />
26          `,E=i?`<span class="quizAnswerText">${d.text}</span>`:`<label for="${m}">${d.text}</label>`;return`
27        <li class="quizAnswerItem">
28          <span class="radio ${w} ${x}">
29            ${b}
30            ${E}
31          </span>
32        </li>
33      `}).join("");return`
34    <section class="quizView quizQuestion" aria-live="polite">
35      <header class="quizHeader">
36        <h2 class="quizTitle quizQuestionTitle">${o(t)}</h2>
37        <div class="quizProgress">
38          <progress class="quizProgressBar" value="${u}" max="${n}" aria-label="Fragenfortschritt"></progress>
39          <div class="quizProgressLabel">Frage ${u}/${n}</div>
40        </div>
41      </header>
42      ${S(e)}
43      <div class="quizPrompt">${e.promptHtml}</div>
44      <div class="quizAnswerGroup inputComponent radioButtonGroup">
45        <div class="inputFieldWrapper">
46          <ul class="quizAnswerList ${i?"revealed":""}">${Q}</ul>
47        </div>
48      </div>
49      ${I}
50      <button type="button" class="quizButton next" data-quiz-action="next" ${$?"disabled":""}>${v}</button>
51    </section>
52  `},D=(t,e)=>`
53    <section class="quizView quizResult" aria-live="polite">
54      <h2 class="quizTitle">${o(t.title)}</h2>
55      <p class="quizResultText">Die Gesamtpunktzahl beträgt ${e.correct} / ${e.total} Punkten.</p>
56      <button type="button" class="quizButton restart" data-quiz-action="restart">Nochmal versuchen</button>
57    </section>
58  `;class O extends R{static className="Quiz";engine=null;init(){this.bootstrap()}async bootstrap(){const e=this.container.getAttribute("data-quiz-json");if(!e){this.container.innerHTML=A("Quiz-Konfiguration fehlt: data-quiz-json ist nicht gesetzt.");return}this.container.innerHTML=k();try{const s=await M(e);this.engine=new _(s),this.showIntro()}catch(s){const n=s instanceof Error?s.message:"Quiz konnte nicht geladen werden.";this.container.innerHTML=A(n)}}showIntro(){if(!this.engine)return;this.container.innerHTML=F(this.engine.data),this.hydrateAssetImages(),this.container.querySelector('[data-quiz-action="start"]')?.addEventListener("click",()=>this.showQuestion())}showQuestion(){if(!this.engine)return;this.container.innerHTML=B(this.engine.data.title,this.engine.currentQuestion,this.engine.currentIndex,this.engine.totalQuestions,this.engine.selection,this.engine.isAnswerRevealed,this.engine.correctAnswerIndex,this.engine.isCurrentSelectionCorrect),this.hydrateAssetImages();const e=this.container.querySelectorAll("[data-quiz-answer-index]"),s=this.container.querySelector('[data-quiz-action="next"]');e.forEach(n=>{n.addEventListener("change",()=>{if(this.engine?.isAnswerRevealed)return;const r=Number(n.dataset.quizAnswerIndex);this.engine?.selectAnswer(r),s?.removeAttribute("disabled")})}),s?.addEventListener("click",()=>{if(this.engine){if(this.engine.isAnswerRevealed){if(this.engine.advance(),this.engine.isFinished){this.showResult();return}this.showQuestion();return}this.engine.revealAnswer(),this.showQuestion()}})}hydrateAssetImages(){this.container.querySelectorAll("[data-quiz-asset-image]").forEach(s=>{const n=s.closest(".quizAsset");if(!n)return;const r=()=>{n.classList.remove("quizAssetPending")},i=()=>{n.remove()};if(s.complete){if(s.naturalWidth>0){r();return}i();return}s.addEventListener("load",r,{once:!0}),s.addEventListener("error",i,{once:!0})})}

58showResult(){if(!this.engine)return;this.container.innerHTML=D(this.engine.data,this.engine.getResult()),this.container.querySelector('[data-quiz-action="restart"]')?.addEventListener("click",()=>{this.engine?.restart(),this.showIntro()})}}export{O as default};