Quiz /*======================================================== Sitewide Styles ==========================================================*/ /*multiple selector*/ * { margin: 0; padding: 0; box-sizing: border-box; } body { margin: 0 auto; font-family: 'Lato', sans-serif; color: #b3b3b3; background-color: #31a2ac; text-align: center; margin-top: 0; } /*======================================================== Quiz Section ========================================================*/ /*styling quiz area*/ .webions_quiz { position: relative; } .webions_quiz .main { background-color: white; margin: 30px; max-width: 100%; padding: 30px; box-shadow: 0 0 20px 0 rgb(0 0 0 / 20%), 0 5px 5px 0 rgb(0 0 0 / 24%); } /*Editing the number of questions*/ .webions_quiz span { float: left; } /*Editing the number of questions*/ .webions_quiz span { float: left; } /*format text*/ .webions_quiz p { padding: 20px 0px 10px; font-size: 28px; font-weight: 600; } /*Form area width*/ .webions_quiz .form-area, .webions_quiz ul { margin: 20px auto; max-width: 650px; } /*formatting answers*/ .webions_quiz li { list-style-type: none !important; text-align: left; background-color: transparent; margin: 10px 5px; padding: 5px 10px; border: 1px solid lightgray; font-weight: 600; color: #202020; cursor: pointer; } .webions_quiz li:hover { background: #ECEEF0; } #quiz-results { text-align: center; display: none; } /*Change effect of question when the questions is selected*/ .webions_quiz .selected, .webions_quiz .selected:hover { background: #0283f447; } /*change correct answer background*/ .webions_quiz .correct, .webions_quiz .correct:hover { background: #9ACD32; color: white; padding: 5px; } /*change wrong answer background*/ .webions_quiz .wrong, .webions_quiz .wrong:hover { background: #db3c3c; color: white; } /*======================================================== Submit Button ========================================================*/ .webions_quiz .main button { font-family: "Roboto", sans-serif; text-transform: uppercase; width: 20%; border: none; padding: 15px; color: #FFFFFF; } .webions_quiz .submit:hover, .webions_quiz .submit:active, .webions_quiz .submit:focus { background: #04549a; } .webions_quiz .submit { background: #0283f4; min-width: 120px; border-radius: 7px; } /*next question button*/ .webions_quiz .next { background: #fa994a; min-width: 200px; border-radius: 7px; display: none; } .webions_quiz .next:hover, .webions_quiz .next:active, .webions_quiz .next:focus { background: #e38a42; } .webions_quiz .restart { background-color: #e38a42; } /*======================================================== Results ========================================================*/ .webions_quiz .circle { position: relative; margin: 0 auto; width: 200px; height: 200px; background: #bdc3c7; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; overflow: hidden; } .webions_quiz .fill { position: absolute; bottom: 0; width: 100%; height: 80%; background: #0283f4; } .webions_quiz h3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-family: Arial, sans-serif; color: #fff; font-size: 40pt; line-height: 0; font-weight: normal; } .webions_quiz .circle p { margin: 400px; } /*======================================================== Confeeti Effect ========================================================*/ .webions_quiz canvas { position: absolute; left: 50%; transform: translateX(-50%) !important; right: 0; max-width: 95%; max-height: 100%; bottom: 0; z-index: 0; border: 0px solid #000; display: none; } .webions_quiz #answer img { width: 100%; } h2.wrong { display: flex; flex-direction: column; padding: 5px; } .wrong span { padding: 5px 20px; background: #0283f4; font-size: 17px; } span.coins-count { float: none; font-size: 32px; color: #1a901e; } span.join-now { float: none; font-size: 23px; color: #fff; text-transform: uppercase; display: block; clear: both; background: #31a2ac; padding: 13px 5px; border-radius: 4px; max-width: 200px; margin: 15px auto 0; cursor : pointer; } span.join-now a { color: #fff; } span.join-now:hover a { color: #00f; } .reward-point-section { color: #313030; display : none; } 1/6 Submit You have been rewarded 100 Coins. To Redeem In Your Account Join now Try Again // Creating questions and answers //***************************************************************************** var question1 = { question: "Who is this?", image_path: "/wp-content/uploads/2021/04/Kangana-Ranaut.jpg", answers: ["Kangana", "Ananya", "Tara", "Katrina"], correct: 0 }; var question2 = { question: "Who is this?", image_path: "/wp-content/uploads/2021/04/Kareena-Kapoor.jpg", answers: ['Ananya', 'Tara', 'Katrina', 'Kareena'], correct: 3 }; var question3 = { question: "Who is this?", image_path: "/wp-content/uploads/2021/04/Ananya-Pandey.jpg", answers: ['Kareena', 'Ananya', 'Tara', 'Katrina'], correct: 1 }; var question4 = { question: "Who is this?", image_path: "/wp-content/uploads/2021/04/Katrina-Kaif.jpg", answers: ['Katrina', 'Ananya', 'Tara', 'Shraddha'], correct: 0 }; var question5 = { question: "Who is this?", image_path: "/wp-content/uploads/2021/04/Kriti-Sanon.jpg", answers: ['Kareena', 'Ananya', 'Tara', 'Kriti'], correct: 3 }; var question6 = { question: "Who is this?", image_path: "/wp-content/uploads/2021/04/Shraddha-Kapoor.jpg", answers: ['Kareena', 'Ananya', 'Shraddha', 'Katrina'], correct: 2 }; // create an array of objects var questions = [question1, question2, question3, question4, question5, question6]; // Initialize variables //------------------------------------------------------------------ var tags; var tagsClass = ''; var liTagsid = []; var correctAns = 0; var quizPage = 1; var currentIndex = 0; var currentQuestion = questions[currentIndex]; var prevousQuestion; var previousIndex = 0; var ulTag = document.getElementsByTagName('ul')[0]; var button = document.getElementById('submit'); var questionTitle = document.getElementById('question'); //save class name so it can be reused easily //if I want to change it, I have to change it one place var classHighlight = 'selected'; //self calling function showQuestions(); // Display Answers and hightlight selected item //------------------------------------------------------------------ function showQuestions() { if (currentIndex != 0) { // create again submit button only for next pages ulTag.innerHTML = ''; button.innerHTML = 'Submit'; button.className = 'submit'; button.id = 'submit'; //update the number of questions displayed document.getElementById('quizNumber').innerHTML = quizPage; } //Display Results in the final page if (currentIndex == (questions.length)) { ulTag.innerHTML = ''; document.getElementById('question').innerHTML = ''; showResults(); return } questionTitle.innerHTML = currentQuestion.question; console.log(currentQuestion.question); // create a for loop to generate the answers and display them in the page // $('#image').attr('src', currentQuestion.image_path); $('#answer').append(""); for (var i = 0; i < currentQuestion.answers.length; i++) { // creating answers var newAns = document.createElement('li'); newAns.id = 'ans' + (i + 1); newAns.className = "notSelected"; var textAns = document.createTextNode(currentQuestion.answers[i]); newAns.appendChild(textAns); var addNewAnsHere = document.getElementById('answer'); addNewAnsHere.appendChild(newAns); console.log(currentQuestion.answers[i]); } var $liTags = $('.notSelected').click(function(list) { list.preventDefault(); $liTags.removeClass(classHighlight); $(this).addClass(classHighlight); //get id name of clicked answer for (var i = 0; i < currentQuestion.answers.length; i++) { if ($liTags[i].className == "notSelected selected") { tags = $liTags[i].id; console.log(tags); tagsClassName = $liTags[i]; } } }); function auto_submit() { $('#answer li').each(function() { $(this).click(function() { setTimeout(function() { checkAnswer(); }, 200) }); }); } auto_submit(); // button.onclick = function() { checkAnswer() }; } // Show Correct Answer //------------------------------------------------------------------ function checkAnswer() { // get selected list var selectedItem = document.getElementById(tags); if (selectedItem == undefined) { alert("Please select an answer!") return } else { var userAns = selectedItem.innerHTML; } if (userAns == currentQuestion.answers[currentQuestion.correct]) { console.log("Correct! The answer is: " + userAns); selectedItem.className = 'correct'; correctAns++; $('#answer').append("Correct"); console.log(correctAns); $('#canvas').show(); $('#canvas').css({ bottom: '25%', }); confettiEffect(); } else { console.log("Wrong! The corrent answer is: " + currentQuestion.answers[currentQuestion.correct]); selectedItem.className = 'wrong'; $('#answer').append(" Wrong Correct Answer: " + currentQuestion.answers[currentQuestion.correct] + " "); // ulTag.getElementsByTagName('li')[currentQuestion.correct].className = 'correct'; console.log(currentQuestion.answers[currentQuestion.correct]); } button.innerHTML = 'Next Question'; button.className = 'next'; button.id = 'next'; prevousQuestion = currentQuestion; quizPage++; currentIndex++; currentQuestion = questions[currentIndex]; // button.onclick = function() { // $('#answer').empty(); // showQuestions(); // }; setTimeout(function() { $('#answer').empty(); $('#canvas').hide(); showQuestions(); }, 3000); return } // Final score //------------------------------------------------------------------ function showResults() { //deleting page number document.getElementById('pages').innerHTML = ''; // Change Title if (correctAns height) { this.anglespin = 0; this.y = height; this.velY *= -0.2; this.velX *= 0.9; }; if (this.x > width || this.x < 0) { this.velX *= -0.5; }; }, }); } function drawScreen() { context.globalAlpha = 1; for (var i = 0; i < particle.length; i++) { particle[i].draw(); } } function loadImage(url) { var img = document.createElement("img"); img.src = url; return img; } function update() { context.clearRect(0, 0, width, height); drawScreen(); requestAnimationFrame(update); } update(); function randomRange(min, max) { return min + Math.random() * (max - min); } function randomInt(min, max) { return Math.floor(min + Math.random() * (max - min + 1)); } function convertToRadians(degree) { return degree * (Math.PI / 180); } function drawStar(cx, cy, spikes, outerRadius, innerRadius, color) { var rot = Math.PI / 2 * 3; var x = cx; var y = cy; var step = Math.PI / spikes; context.strokeSyle = "#000"; context.beginPath(); context.moveTo(cx, cy - outerRadius) for (i = 0; i < spikes; i++) { x = cx + Math.cos(rot) * outerRadius; y = cy + Math.sin(rot) * outerRadius; context.lineTo(x, y) rot += step x = cx + Math.cos(rot) * innerRadius; y = cy + Math.sin(rot) * innerRadius; context.lineTo(x, y) rot += step } context.lineTo(cx, cy - outerRadius) context.closePath(); context.fillStyle = color; context.fill(); } } /* webions */
