// Collection elements const collectionList = document.querySelector('.quiz-questions-collection') const collectionElements = collectionList.children // ---------------- Hiding Question-elements Mechanism (other than first) ---------------- // ID-string to seach for individual Collection Element const moduleTitle = document.querySelector('h4.font-variant').textContent; const moduleRegex = /Module \d+/; const moduleNumber = moduleTitle.match(moduleRegex); const moduleNumberClean = moduleNumber[0].toLowerCase().replace(/\s/, '-') const levelRegex = /(\w+) \|\s*Module/; const moduleLevel = moduleTitle.match(levelRegex) const moduleLevelClean = moduleLevel[1].toLowerCase() const elementStringPartOne = '#' + moduleLevelClean + '-' + moduleNumberClean + '-' + 'question-'; const previousQuizElement = [] // Hide col-elements that are not the first for (let i = 1; i <= collectionElements.length; i++) { const elementString = elementStringPartOne + [i] const collectionElement = document.querySelector(elementString) if (i > 1) { collectionElement.style.display = 'none' } else { previousQuizElement.push(collectionElement) } } // ---------------- Answer Mechanism ---------------- const answerOptionWrappers = document.querySelectorAll('.answer-option-wrapper') answerOptionWrappers.forEach((wrapper) => { const answerOptions = wrapper.children Array.from(answerOptions).forEach((option) => { option.addEventListener('click', () => { const questionArea = option.parentElement.parentElement if (questionArea.style.opacity == 0.6) { return } const continueButton = option.parentElement.parentElement.parentElement.parentElement.lastElementChild // Check if option is NOT selected const bgColor = option.style.backgroundColor if(bgColor == '' || bgColor == 'transparent') { // Resetting styles on "questionAnswers" const parent = option.parentElement Array.from(parent.children).forEach(child => { child.style.color = '#19224c' child.style.backgroundColor = 'transparent' }) // Setting style on Answer-option option.style.backgroundColor = '#19224c' option.style.color = '#ffffff' // Setting opacity-style on "continue-button" continueButton.style.opacity = 1 } else { option.style.backgroundColor = 'transparent' option.style.color = '#19224c' continueButton.style.opacity = 0.5 } }) }) }) // ---------------- Next Question Mechanism ---------------- const continueButtons = document.querySelectorAll('.continue-button'); const finalScoreWrapper = document.querySelector('.final-score-wrapper'); const correctAnswersElement = document.querySelector('.correct-answers') const wrongAnswersElement = document.querySelector('.wrong-answers') const accuracyElement = document.querySelector('.accuracy') const recommendationWrappers = document.querySelectorAll('.recommendation-wrapper') // ---------------- Progress bar ---------------- //Getting last question number const lastQuestionElement = collectionElements[collectionElements.length - 1] const numberOfQuestions = lastQuestionElement.children[0].children[0].textContent // Getting Error-message const errorMessage = document.querySelector('.error-message') // Stoarge variables for later usage let correctAnswersCounter = 0 let totalAnswersCounter = 0 let nextQuestionContainer = [] // const wrongAnswersContainer = [] continueButtons.forEach((button) => { button.addEventListener('click', () => { // const buttonOpacity = button.style.opacity const buttonParent = button.parentElement const questionNumber = buttonParent.children[0] const questionArea = buttonParent.children[1].children[1] const hiddenNum = buttonParent.children[1].children[1].children[2].textContent // Check: answer selected - if answered, we get that answer and check it - then we show next question // 1) Get this wrapper const questionElement = button.parentElement // 1.b) Get next question wrapper (if it's not the last) if (totalAnswersCounter < collectionElements.length - 1) { const nextQuestionElement = questionElement.parentElement.nextElementSibling.children[0] // 2) Adding/pushing Next-question to array next cycle nextQuestionContainer.push(nextQuestionElement) } else { nextQuestionContainer = [finalScoreWrapper] } if (buttonOpacity == 1) { // Lower opacity questionNumber.style.opacity = 0.6 questionArea.style.opacity = 0.6 // 3) Get answer const answerOptions = questionElement.children[1].children[1].children[1].children; Array.from(answerOptions).forEach(option => { // Error-messsage showing? if (errorMessage.style.display == 'flex') { errorMessage.style.display = 'none' } const optionBgColer = option.style.backgroundColor; if (optionBgColer == 'rgb(25, 34, 76)') { const answer = option.textContent.substring(0, 2); // 4) Check: correct answer? if (answer == hiddenNum) { // 5.a) Hide & display correct-answer-block const continueButton = questionElement.children[4] continueButton.style.display = 'none'; const correctAnswerButton = questionElement.children[2] correctAnswerButton.style.display = 'flex'; //Change color on answerOption option.style.backgroundColor = '#4cb06c' const correctIcon = option.children[2] correctIcon.style.display = 'block' // 6.a) Add 1 to correct-answers-counter & total-answers-counter correctAnswersCounter += 1 totalAnswersCounter += 1 // 7.a) Correct-Answer-Block: Next Question Mechanism correctAnswerButton.addEventListener('click', () => { const progressBar = document.querySelector('.progress-bar') const progressBarElements = document.querySelectorAll('.progress-bar-element') const questionPercentage = 1 / numberOfQuestions * 100 progressBarElements[0].style.width = questionPercentage + '%'; if (progressBarElements[0].style.display == 'flex') { const newBarElemenet = progressBarElements[0].cloneNode(true) progressBar.appendChild(newBarElemenet) } if (progressBarElements[0].style.display == '') { progressBarElements[0].style.display = 'flex'; } questionElement.style.display = 'none'; // 8.a) Adding result numbers - if element is last if (nextQuestionContainer[0].className == 'final-score-wrapper') { correctAnswersElement.textContent = correctAnswersCounter wrongAnswersElement.textContent = totalAnswersCounter - correctAnswersCounter accuracyElement.textContent = correctAnswersCounter / totalAnswersCounter * 100 // Check score-accuracy to give correct recommendation if (accuracyElement.textContent == 100) { recommendationWrappers[0].style.display = 'block'; } else if (accuracyElement.textContent >= 87.5) { recommendationWrappers[1].style.display = 'block'; } else if (accuracyElement.textContent >= 56.25) { recommendationWrappers[2].style.display = 'block'; } else if (accuracyElement.textContent >= 20) { recommendationWrappers[3].style.display = 'block'; } else if (accuracyElement.textContent >= 5) { recommendationWrappers[4].style.display = 'block'; } else if (accuracyElement.textContent == 0) { recommendationWrappers[5].style.display = 'block'; } } nextQuestionContainer[nextQuestionContainer.length - 1].style.display = 'flex'; }) } else { // 5.b) Hide & display wrong-answer-block const continueButton = questionElement.children[4]; continueButton.style.display = 'none'; const wrongAnswerButton = questionElement.children[3] wrongAnswerButton.style.display = 'flex'; // Change bgColor on answerOption option.style.backgroundColor = '#c91c1c' const wrongIcon = option.children[3] wrongIcon.style.display = 'block' // 6.b) Add 1 to total-answers-counter totalAnswersCounter += 1 // 7.b) Wrong-Answer-Block: Next Question Mechanism wrongAnswerButton.addEventListener('click', () => { const progressBar = document.querySelector('.progress-bar') const progressBarElements = document.querySelectorAll('.progress-bar-element') const questionPercentage = 1 / numberOfQuestions * 100 progressBarElements[0].style.width = questionPercentage + '%'; if (progressBarElements[0].style.display == 'flex') { const newBarElemenet = progressBarElements[0].cloneNode(true) progressBar.appendChild(newBarElemenet) } if (progressBarElements[0].style.display == '') { progressBarElements[0].style.display = 'flex'; } questionElement.style.display = 'none'; // 8.b) Adding result numbers - if element is last if (nextQuestionContainer[0].className == 'final-score-wrapper') { correctAnswersElement.textContent = correctAnswersCounter wrongAnswersElement.textContent = totalAnswersCounter - correctAnswersCounter accuracyElement.textContent = correctAnswersCounter / totalAnswersCounter * 100 if (accuracyElement.textContent == 100) { recommendationWrappers[0].style.display = 'block'; } else if (accuracyElement.textContent >= 87.5) { recommendationWrappers[1].style.display = 'block'; } else if (accuracyElement.textContent >= 56.25) { recommendationWrappers[2].style.display = 'block'; } else if (accuracyElement.textContent >= 20) { recommendationWrappers[3].style.display = 'block'; } else if (accuracyElement.textContent >= 5) { recommendationWrappers[4].style.display = 'block'; } else if (accuracyElement.textContent == 0) { recommendationWrappers[5].style.display = 'block'; } } nextQuestionContainer[nextQuestionContainer.length - 1].style.display = 'flex'; }) }; }; }); } else { errorMessage.style.display = 'flex' } }) }) // ---------------- Correct/Wrong Answer-Block: Next Question Mechanism ---------------- // ---------------- TITLE ----------------