1document.addEventListener("DOMContentLoaded", function () { 2 "use strict"; 3 4 const quizContainer = document.getElementById('quiz-container'); 5 const resultsContainer = document.getElementById('quiz-result-container'); 6 const backLinks = document.querySelectorAll('.quiz-back-link'); 7 const quizTitle = document.getElementById('quiz-main-title'); 8 const quizDescription = document.getElementById('quiz-main-description'); 9 let quizContentActiveIndex = 0; 10 let quizObject = {}; 11 let questionsCount = 0; 12 let isDisplayingResultStarted = false; 13 let correctAnswers = 0; 14 let maxLength = 250; 15 16 17 if (quizContainer && resultsContainer) { 18 19 const quiz = quizContainer.querySelector('#quiz'); 20 const quizIndicatorContainer = quiz.querySelector('#quiz-indicator-container'); 21 const quizItems = quiz.querySelectorAll('.quiz-content'); 22 const resetQuizButtons = resultsContainer.querySelectorAll('.quiz-repeat-cta'); 23 24 if(resetQuizButtons.length > 0) { 25 resetQuizButtons.forEach(resetButton => { 26 resetButton.onclick = function(event) { 27 resetQuiz(); 28 } 29 }); 30 } 31 32 function initQuiz() { 33 if(quizItems.length > 0) { 34 quizItems.forEach((quizContent, index) => { 35 if(quizContent.classList.contains('active')) { 36 quizContentActiveIndex = index; 37 } 38 let questionNumber = "'" + index + "'"; 39 quizObject[questionNumber] = ""; 40 questionsCount++; 41 });
42 addShowMore(); 43 } 44 } 45 46 initQuiz(); 47 48 if(backLinks.length > 0) { 49 backLinks.forEach(backLink => { 50 backLink.onclick = function(event) { 51 initPreviousQuizItem(); 52 } 53 }); 54 } 55 56 if(quizItems.length > 0) { 57 quizItems.forEach((quizContent, index) => { 58 let quizOptions = quizContent.querySelectorAll('.quiz-option'); 59 if(quizOptions.length > 0) { 60 quizOptions.forEach((quizOption, index) => { 61 quizOption.onclick = function(event) { 62 event.preventDefault(); 63 let targetElement = event.target; 64 let currentRadioElement; 65 if(targetElement.classList.contains('radio') || targetElement.classList.contains('radio-inner')) { 66 if(targetElement.classList.contains('radio')) { 67 currentRadioElement = targetElement; 68 }else { 69 currentRadioElement = targetElement.parentElement; 70 } 71 72 }else { 73 if(targetElement.classList.contains('quiz-option')) { 74 currentRadioElement = targetElement.querySelector('.radio'); 75 }else { 76 let parentElement = targetElement.closest('.quiz-option'); 77 if(parentElement) { 78 currentRadioElement = parentElement.querySelector('.radio'); 79 } 80 } 81 82 } 83 let currentOptionsContainer = currentRadioElement.parentElement.parentElement; 84 let containerRadioItems = currentOptionsContainer.querySelectorAll('.radio'); 85 containerRadioItems.forEach(containerRadio => { 86 containerRadio.classList.remove('checked'); 87 });
88 currentRadioElement.classList.add('checked'); 89 let correctOption = currentRadioElement.dataset.optionCorrect; 90 let currentQuestion = "'" + quizContentActiveIndex + "'"; 91 quizObject[currentQuestion] = correctOption; 92 initQuickResult(correctOption, currentOptionsContainer); 93 } 94 }); 95 } 96 97 }); 98 } 99 100 function initQuickResult(correctOption, currentOptionsContainer) { 101 let currentQuizQuestionContainer = currentOptionsContainer.parentElement; 102 let currentQuizContentContainer = currentQuizQuestionContainer.parentElement; 103 let quickResultContainer = currentQuizContentContainer.querySelector('.quick-result-container'); 104 let correctQuickResult = quickResultContainer.querySelector('.correct-result-container'); 105 let incorrectQuickResult = quickResultContainer.querySelector('.incorrect-result-container'); 106 let quizLinksCcontainer = currentQuizContentContainer.querySelector('.quiz-links-container'); 107 if(currentQuizQuestionContainer){ 108 currentQuizQuestionContainer.classList.add('hidden'); 109 if(quizLinksCcontainer) { 110 let quizForwardLink = quizLinksCcontainer.querySelector('.quiz-forward-link'); 111 if(quizForwardLink) { 112 quizForwardLink.classList.remove('hidden'); 113 quizForwardLink.style.display = "flex"; 114 let scrollIntoView = document.getElementById('scroll-into-view'); 115 if(scrollIntoView) { 116 scrollIntoView.scrollIntoView({behavior: 'smooth', block: 'start'}); 117 } 118 quizForwardLink.onclick = function(event) { 119 event.preventDefault(); 120 resetIndicatorAndTopBorderColors(); 121 initNextQuizItem(); 122 } 123 } 124 } 125 } 126 if(correctOption.trim() == "correct") { 127 correctAnswers++; 128 if(correctQuickResult) { 129 correctQuickResult.classList.remove('hidden'); 130 correctQuickResult.style = "display: flex;" 131 setIndicatorAndTopBorderColors(correctOption); 132 } 133 }else { 134 if(incorrectQuickResult) { 135 incorrectQuickResult.classList.remove('hidden'); 136 incorrectQuickResult.style = "display: flex;" 137 setIndicatorAndTopBorderColors(correctOption); 138 } 139 } 140 } 141 142 function setIndicatorAndTopBorderColors(correctOption) { 143 if(correctOption.trim() == "correct") { 144 quiz.style = "border-top-color: #378042;" 145 let quizIndicator = quiz.querySelector('.quiz-indicator'); 146 if(quizIndicator) { 147 if(isMobileVersion()) { 148 quizIndicator.style = "border-radius: 8px;border: 1.5px solid #378042;background: #C8F2C4;color: #378042;"; 149 }else { 150 quizIndicator.style = "border-radius: 8px;border: 3px solid #378042;background: #C8F2C4;color: #378042;"; 151 } 152 } 153 }else { 154 quiz.style = "border-top-color: #B11818;" 155 let quizIndicator = quiz.querySelector('.quiz-indicator'); 156 if(quizIndicator) { 157 if(isMobileVersion()) { 158 quizIndicator.style = "border-radius: 8px;border: 1.5px solid #B11818;background: #FFB5B5;color: #B11818;"; 159 }else { 160 quizIndicator.style = "border-radius: 8px;border: 3px solid #B11818;background: #FFB5B5;color: #B11818;"; 161 } 162 } 163 } 164 } 165 166 function resetIndicatorAndTopBorderColors() { 167 quiz.style = "" 168 let quizIndicator = quiz.querySelector('.quiz-indicator'); 169 if(quizIndicator) { 170 quizIndicator.style = ""; 171 } 172 } 173 174 function quickResultActive(quizContent) { 175 let quickResultContainer = quizContent.querySelector('.quick-result-container'); 176 let correctQuickResult = quickResultContainer.querySelector('.correct-result-container'); 177 let incorrectQuickResult = quickResultContainer.querySelector('.incorrect-result-container'); 178 return !correctQuickResult.classList.contains('hidden') || !incorrectQuickResult.classList.contains('hidden'); 179 } 180 181 function initPreviousQuizItem() { 182 if(quizItems.length > 0) {
183 quizItems.forEach((quizContent, index) => { 184 let isQuickResultActive = quickResultActive(quizContent); 185 if(quizContent.classList.contains('active')) { 186 if(isQuickResultActive) { 187 resetQuickResult(quizContent, index); 188 resetIndicatorAndTopBorderColors(); 189 }else { 190 quizContent.classList.remove('active'); 191 removeQuizProgress(index, quizContent); 192 let currentActive = quizItems[quizContentActiveIndex -1]; 193 if(currentActive) { 194 currentActive.classList.add('active'); 195 quizContentActiveIndex--; 196 } 197 } 198 } 199 }); 200 } 201 let scrollIntoView = document.getElementById('scroll-into-view'); 202 if(scrollIntoView) { 203 scrollIntoView.scrollIntoView({behavior: 'smooth', block: 'start'}); 204 } 205 206 } 207 208 function initNextQuizItem() { 209 quizContentActiveIndex++; 210 resetIndicatorAndTopBorderColors(); 211 if(quizItems.length > 0) { 212 quizItems.forEach((quizContent, index) => { 213 if(quizContent.classList.contains('active') && index !== quizContentActiveIndex) { 214 quizContent.classList.remove('active'); 215 resetQuickResult(quizContent, index); 216 }else { 217 if(index == quizContentActiveIndex) { 218 quizContent.classList.add('active'); 219 initQuizProgress(index); 220 //let quizResult = getCurrentQuizResult(index); 221 //if(quizResult !== "") { 222 // setIndicatorAndTopBorderColors(quizResult.trim()); 223 //} 224 let scrollIntoView = document.getElementById('scroll-into-view'); 225 if(scrollIntoView) { 226 scrollIntoView.scrollIntoView({behavior: 'smooth', block: 'start'}); 227 } 228 } 229 if(quizContentActiveIndex == questionsCount) { 230 initQuizResult(); 231 isDisplayingResultStarted = true; 232 } 233 } 234 });
235 } 236 } 237 238 function initQuizResult() { 239 if(!isDisplayingResultStarted) { 240 let quizResultElements = Array.from(resultsContainer.querySelectorAll('.quiz-result')); 241 if(quizResultElements.length > 0) { 242 quizResultElements.sort((a, b) => parseInt(a.dataset.correctAnswers) - parseInt(b.dataset.correctAnswers)); 243 let index = quizResultElements.findIndex(el => parseInt(el.dataset.correctAnswers) >= correctAnswers); 244 let targetResultElement = quizResultElements[index]; 245 if(targetResultElement) { 246 quiz.classList.add('hidden'); 247 targetResultElement.style.display = "flex"; 248 resultsContainer.classList.remove('hidden'); 249 initResultProgressText(targetResultElement); 250 resultsContainer.scrollIntoView({behavior: 'smooth', block: 'center'}); 251 } 252 } 253 } 254 255 } 256 257 function initResultProgressText(targetResultElement) { 258 let quizResultContainer = document.getElementById("quiz-result-container"); 259 if(quizResultContainer) { 260 let resultProgressText = quizResultContainer.dataset.progressText; 261 let quizIndicatorContainer = document.getElementById("quiz-indicator-container"); 262 if(quizIndicatorContainer) { 263 let questionsCount = quizIndicatorContainer.dataset.questionsCount; 264 resultProgressText = resultProgressText.replace("{1}", correctAnswers).replace("{2}", questionsCount); 265 let targetResultProgressElement = targetResultElement.querySelector('.quiz-result-progress'); 266 if(targetResultProgressElement) { 267 targetResultProgressElement.innerText = resultProgressText; 268 } 269 } 270 } 271 } 272 273 function initQuizProgress(index) { 274 let currentQuestionNumber = index + 1; 275 let dinamicQuizIndicatorElement = document.getElementById("dinamic-quiz-indicator"); 276 if(dinamicQuizIndicatorElement) { 277 dinamicQuizIndicatorElement.innerText = currentQuestionNumber; 278 } 279 } 280 281 function removeQuizProgress(index, quizContent) { 282 let currentQuestionNumber = index; 283 let dinamicQuizIndicatorElement = document.getElementById("dinamic-quiz-indicator"); 284 if(dinamicQuizIndicatorElement) { 285 dinamicQuizIndicatorElement.innerText = currentQuestionNumber; 286 } 287 } 288 289 function resetQuickResult(quizContent, index) { 290 let currentQuizResult = getCurrentQuizResult(index); 291 let quizQuestionContainer = quizContent.querySelector('.quiz-question-container'); 292 let quickResultContainer = quizContent.querySelector('.quick-result-container'); 293 let correctQuickResult = quickResultContainer.querySelector('.correct-result-container'); 294 let incorrectQuickResult = quickResultContainer.querySelector('.incorrect-result-container'); 295 if(currentQuizResult.trim() == "correct") { 296 if(!correctQuickResult.classList.contains('hidden')) { 297 correctQuickResult.classList.add('hidden'); 298 correctQuickResult.style = ""; 299 } 300 }else { 301 if(!incorrectQuickResult.classList.contains('hidden')) { 302 incorrectQuickResult.classList.add('hidden'); 303 incorrectQuickResult.style = ""; 304 } 305 } 306 if(quizQuestionContainer.classList.contains('hidden')) { 307 quizQuestionContainer.classList.remove('hidden'); 308 } 309 } 310 311 function getCurrentQuizResult(quizObjectIndex) { 312 let result = ""; 313 let index = 0; 314 for (let key in quizObject) { 315 if (quizObject.hasOwnProperty(key)) { 316 if(index == quizObjectIndex) { 317 result = quizObject[key]; 318 } 319 } 320 index++; 321 } 322 return result.trim(); 323 } 324 325 function resetQuiz() { 326 resetResults(); 327 resetIndicatorAndTopBorderColors(); 328 reinitQuiz(); 329 let scrollIntoView = document.getElementById('scroll-into-view'); 330 if(scrollIntoView) { 331 scrollIntoView.scrollIntoView({behavior: 'smooth', block: 'start'}); 332 } 333 } 334 335 function resetResults() { 336 resultsContainer.classList.add('hidden'); 337 let results = resultsContainer.querySelectorAll('.quiz-result'); 338 if(results.length > 0) {
339 results.forEach(result => { 340 result.style = "display:none;"; 341 }); 342 } 343 let quickResults = quiz.querySelectorAll('.quick-result-container'); 344 if(quickResults.length > 0) { 345 quickResults.forEach(quickResult => { 346 let correctResultContainer = quickResult.querySelector('.correct-result-container'); 347 if(correctResultContainer) { 348 correctResultContainer.style = ""; 349 if(!correctResultContainer.classList.contains('hidden')) { 350 correctResultContainer.classList.add('hidden'); 351 } 352 } 353 let incorrectResultContainer = quickResult.querySelector('.incorrect-result-container'); 354 if(incorrectResultContainer) { 355 incorrectResultContainer.style = ""; 356 if(!incorrectResultContainer.classList.contains('hidden')) { 357 incorrectResultContainer.classList.add('hidden'); 358 } 359 } 360 }); 361 } 362 } 363 364 function reinitQuiz() { 365 quizContentActiveIndex = 0; 366 quizObject = {}; 367 questionsCount = 0; 368 isDisplayingResultStarted = false; 369 correctAnswers = 0; 370 let dinamicQuizIndicatorElement = document.getElementById("dinamic-quiz-indicator"); 371 dinamicQuizIndicatorElement.innerText = 1; 372 if(quizItems.length > 0) { 373 quizItems.forEach((quizContent, index) => { 374 let quizQuestionContainer = quizContent.querySelector('.quiz-question-container'); 375 let quizForwardLink = quizContent.querySelector('.quiz-forward-link'); 376 if(quizForwardLink) { 377 quizForwardLink.classList.add('hidden'); 378 quizForwardLink.style = ""; 379 } 380 quizQuestionContainer.classList.remove('hidden'); 381 if(index == 0) { 382 if(!quizContent.classList.contains('active')) { 383 quizContent.classList.add('active'); 384 } 385 }else { 386 quizContent.classList.remove('active'); 387 } 388 let radioButtons = quizQuestionContainer.querySelectorAll('.radio'); 389 if(radioButtons.length > 0) { 390 radioButtons.forEach(radio => { 391 if(radio.classList.contains('checked')) { 392 radio.classList.remove('checked'); 393 } 394 }); 395 } 396 });
397 quiz.classList.remove('hidden'); 398 } 399 initQuiz(); 400 } 401 402 } 403 404 function addShowMore() { 405 let toggleTextContainers = document.querySelectorAll('.toggle-text-container'); 406 if(isMobileVersion()) { 407 if(toggleTextContainers.length > 0) { 408 toggleTextContainers.forEach(toggleTextContainer => { 409 let containerElement = toggleTextContainer.parentElement; 410 let content = containerElement.querySelector('.text-content'); 411 let fullContent = content.innerHTML; 412 if(content.dataset.content == null) { 413 content.setAttribute('data-content', content.innerHTML); 414 let truncatedContent = truncateHTML(fullContent, maxLength); 415 if (truncatedContent !== fullContent) { 416 content.innerHTML = truncatedContent; 417 toggleTextContainer.classList.remove('hidden'); 418 toggleTextContainer.style = "display:flex;"; 419 } 420 } 421 422 }); 423 } 424 }else { 425 if(toggleTextContainers.length > 0) { 426 toggleTextContainers.forEach(toggleTextContainer => { 427 toggleTextContainer.classList.add('hidden'); 428 toggleTextContainer.style = ""; 429 let textIconDown = toggleTextContainer.querySelector('.toggle-text-icon-down'); 430 let textIconUp = toggleTextContainer.querySelector('.toggle-text-icon-up'); 431 let toggleTextElement = toggleTextContainer.querySelector('.toggle-text'); 432 if(toggleTextContainer.classList.contains('expanded')) { 433 toggleTextContainer.classList.remove('expanded'); 434 toggleTextElement.textContent = 'Mehr anzeigen'; 435 if(textIconDown.classList.contains('hidden')) { 436 textIconDown.classList.remove('hidden'); 437 } 438 if(!textIconUp.classList.contains('hidden')) { 439 textIconUp.classList.add('hidden'); 440 } 441 }
442 let containerElement = toggleTextContainer.parentElement; 443 let content = containerElement.querySelector('.text-content'); 444 if(content.dataset.content != null) { 445 let fullHtmlContent = content.dataset.content; 446 content.innerHTML = fullHtmlContent; 447 } 448 }); 449 } 450 } 451 } 452 453 function truncateHTML(html, maxLength) { 454 const div = document.createElement('div'); 455 div.innerHTML = html; 456 const textContent = div.textContent; 457 if (textContent.length <= maxLength) { 458 return html; 459 } 460 let truncated = ''; 461 let currentLength = 0; 462 const walk = document.createTreeWalker(div, NodeFilter.SHOW_TEXT, null, false); 463 let node; 464 while ((node = walk.nextNode()) !== null) { 465 const remainingLength = maxLength - currentLength; 466 if (node.length > remainingLength) { 467 truncated += node.data.slice(0, remainingLength); 468 break; 469 } 470 truncated += node.data; 471 currentLength += node.length; 472 } 473 div.innerHTML = truncated; 474 return div.innerHTML + '...'; 475 } 476 477 function isMobileVersion() { 478 return window.innerWidth < 769; 479 } 480 481 function isMobile() { 482 return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); 483 } 484 485 window.addEventListener('resize', addShowMore); 486 487});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.