Hey there, We are Blossom Themes! We are trying to provide you the new way to look and use the blogger templates. Our designers are working hard and pushing the boundaries of possibilities to widen the horizon of the regular templates and provide high quality blogger templates to all hardworking bloggers!
(function(){ // Functions function buildQuiz(){ // variable to store the HTML output const output = []; // for each question... myQuestions.forEach( (currentQuestion, questionNumber) => { // variable to store the list of possible answers const answers = []; // and for each available answer... for(letter in currentQuestion.answers){ // ...add an HTML radio button answers.push( ` ` ); } // add this question and its answers to the output output.push( `
${currentQuestion.question}
${answers.join("")}
` ); } ); // finally combine our output list into one string of HTML and put it on the page quizContainer.innerHTML = output.join(''); } function showResults(){ // gather answer containers from our quiz const answerContainers = quizContainer.querySelectorAll('.answers'); // keep track of user's answers let numCorrect = 0; // for each question... myQuestions.forEach( (currentQuestion, questionNumber) => { // find selected answer const answerContainer = answerContainers[questionNumber]; const selector = `input[name=question${questionNumber}]:checked`; const userAnswer = (answerContainer.querySelector(selector) || {}).value; // if answer is correct if(userAnswer === currentQuestion.correctAnswer){ // add to the number of correct answers numCorrect++; // color the answers green answerContainers[questionNumber].style.color = 'lightgreen'; } // if answer is wrong or blank else{ // color the answers red answerContainers[questionNumber].style.color = 'red'; } }); // show number of correct answers out of total resultsContainer.innerHTML = `Your score is: ${numCorrect} / ${myQuestions.length}`; previousButton.style.display = 'none'; reviewButton.style.display = 'inline-block'; } function showSlide(n) { slides[currentSlide].classList.remove('active-slide'); slides[n].classList.add('active-slide'); currentSlide = n; reviewButton.style.display = 'none'; if(currentSlide === 0){ previousButton.style.display = 'none'; } else{ previousButton.style.display = 'inline-block'; } if(currentSlide === slides.length-1){ nextButton.style.display = 'none'; submitButton.style.display = 'inline-block'; } else{ nextButton.style.display = 'inline-block'; submitButton.style.display = 'none'; } } function showNextSlide() { showSlide(currentSlide + 1); } function showReviewSlide() { showSlide(currentSlide - 1); } function showPreviousSlide() { showSlide(currentSlide - 1); } // Variables const quizContainer = document.getElementById('quiz'); const resultsContainer = document.getElementById('results'); const submitButton = document.getElementById('submit'); const myQuestions = [ { question: "Who is Director-General of the World Health Organization ?", answers: { a: "António Guterres", b: "Narendra Modi", c: "Tedros Adhanom", d: "Mona Juul" }, correctAnswer: "c" }, { question: "What is the capital of North Korea", answers: { a: "Pyongyang", b: "Seoul", c: "Beijing", d: "Wuhan" }, correctAnswer: "a" }, { question: "What is the Official name of the virus causes Coronavirus disease ?", answers: { a: "severe acute respiratory syndrome coronavirus 1", b: "severe acute respiratory syndrome coronavirus 2 ", c: "COVID-19" }, correctAnswer: "b" }, { question: "from which place Coronavirus started spreading?", answers: { a: "Guangzhou", b: "Shanghai", c: "Beijing", d: "Wuhan" }, correctAnswer: "d" }, { question: "Who is Cabinet Minister of Ministry of Health and Family Welfare in India ?", answers: { a: "Narender Modi", b: "Harsh Vardhan", c: "Faggan Singh Kulaste" }, correctAnswer: "b" } ]; // Kick things off buildQuiz(); // Pagination const previousButton = document.getElementById("previous"); const nextButton = document.getElementById("next"); const slides = document.querySelectorAll(".slide"); const reviewButton = document.getElementById("review"); let currentSlide = 0; // Show the first slide showSlide(currentSlide); // Event listeners submitButton.addEventListener('click', showResults); previousButton.addEventListener("click", showPreviousSlide); nextButton.addEventListener("click", showNextSlide); reviewButton.addEventListener('click', showReviewSlide); })();
No comments:
Post a Comment