Sascha's Science website
const quizContainer = document.getElementById('quiz'); const resultsContainer = document.getElementById('results'); const submitButton = document.getElementById('submit'); function buildQuiz(){} function showResults(){} // display quiz right away buildQuiz(); // on submit, show results submitButton.addEventListener('click', showResults); const myQuestions = [ { question: "Why is the sky blue?", answers: { a: "The way the sun’s light travels through the atmosphere makes the sky look blue.", b: "The o2 that gets in the atmosphere", c: "Magic", }, correctAnswer: "a" question: "Who invented JavaScript?", answers: { a: "Douglas Crockford", b: "Sheryl Sandberg", c: "Brendan Eich" }, correctAnswer: "c" }, { question: "Which one of these is a JavaScript package manager?", answers: { a: "Node.js", b: "TypeScript", c: "npm" }, correctAnswer: "c" }, { question: "Which tool can you use to ensure code quality?", answers: { a: "Angular", b: "jQuery", c: "RequireJS", d: "ESLint" }, correctAnswer: "d" }, } ]; 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( `` ${letter} : ${currentQuestion.answers[letter]} ` ); } // 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(''); } myQuestions.forEach( (currentQuestion, questionNumber) => { // the code we want to run for each question goes here }); // we'll want to store the list of answer choices 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('')}
` ); quizContainer.innerHTML = output.join(''); // 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 = `${numCorrect} out of ${myQuestions.length}`; (function(){ // put the rest of your code here })();
output.push( `
${currentQuestion.question}
${answers.join("")}
` ); .slide{ position: absolute; top: 0px; width: 100%; z-index: 1; opacity: 0; transition: opacity 0.5s; } .active-slide{ opacity: 1; z-index: 2; } .quiz-container{ position: relative; height: 200px; margin-top: 40px; } // Functions // New functions go here // Variables // Same code as before // Kick things off buildQuiz(); // Pagination // New code here // Show the first slide showSlide(currentSlide); // Event listeners // New event listeners here // Pagination const previousButton = document.getElementById("previous"); const nextButton = document.getElementById("next"); const slides = document.querySelectorAll(".slide"); let currentSlide = 0; function showSlide(n) { slides[currentSlide].classList.remove('active-slide'); slides[n].classList.add('active-slide'); currentSlide = n; 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'; } } // Pagination ... showSlide(currentSlide); function showNextSlide() { showSlide(currentSlide + 1); } function showPreviousSlide() { showSlide(currentSlide - 1); } // Event listeners ... previousButton.addEventListener("click", showPreviousSlide); nextButton.addEventListener("click", showNextSlide);