mail2vinay789
New Coder
JavaScript:
Quiz button not showing.
<!DOCTYPE html> <html> <head> <title>Quiz</title> <style> .quiz { background-image: linear-gradient(to right, #0000cc, #0033cc, #0066cc, #0099cc, #00cccc); align-content: center; color: white; border-radius: 5px; padding: 10px; border: 1px solid #0066cc; } .radio-button { display: block; margin-bottom: 10px; font-weight: bold; } .correct-answer { display: none; margin-top: 10px; color: red; font-size: 1.2em; } button{ background-color:#0066cc; width:100px; height:50px; border-radius:10px; font-size:1.2em; color:white; } </style> </head> <body> <h1 style="text-align: center; font-weight: bold; color: #0066cc;">Quiz</h1> <div class="quiz"> <form id="quiz-form"> <div id="quiz-questions"></div> </form> </div> <script> var questions = [ { "question": "He always………to prove that the earth revolves round the sun.", "a": "tried", "b": "tries", "c": "was trying", "d": "is trying", "answer": "b" }, { "question": "इनमें से इंटरनेट किसके द्वारा चलाया जाता है ?", "a": " VSNL", "b": " IETF", "c": " Inter NIC", "d": " कोई नहीं इनमें से", "answer": "d" }, { "question": "भारत में निर्मित प्रथम कंप्यूटर का नाम इनमें से क्या है ?", "a": " आर्यभट्ट", "b": " सिद्धार्थ", "c": " अशोक", "d": " बुद्ध", "answer": "b" }, { "question": "Neelam is learning how……..", "a": "to type", "b": "to typing", "c": "typing", "d": "type", "answer": "a" } ]; // Shuffle questions array to randomize the order questions.sort(function() { return 0.5 - Math.random() }); var quizForm = document.getElementById('quiz-form'); var quizQuestionsDiv = document.getElementById('quiz-questions'); // Loop through questions array and add each question to the form for (var i = 0; i < questions.length; i++) { var question = questions[i]; var answers = [question.a, question.b, question.c, question.d]; // Shuffle answers array to randomize the order answers.sort(function() { return 0.5 - Math.random() }); // Create HTML elements for question and answers var questionLabel = document.createElement('label'); questionLabel.textContent = question.question; var answersDiv = document.createElement('div'); for (var j = 0; j < answers.length; j++) { var answer = answers[j]; var answerLabel = document.createElement('label'); answerLabel.className = 'radio-button'; var radioButton = document.createElement('input'); radioButton.type = 'radio'; radioButton.name = 'question' + i; radioButton.value = answer; answerLabel.appendChild(radioButton); answerLabel.appendChild(document.createTextNode(answer)); answersDiv.appendChild(answerLabel); } // Add question and answers to the form quizQuestionsDiv.appendChild(questionLabel); quizQuestionsDiv.appendChild(answersDiv); // Add submit button for each question var submitButton = document.createElement('button'); submitButton.type = 'button'; submitButton.textContent = 'Submit'; // Add event listener to submit button submitButton.addEventListener('click', showAnswer); quizQuestionsDiv.appendChild(submitButton); // Add space between submit buttons quizQuestionsDiv.appendChild(document.createElement('br')); quizQuestionsDiv.appendChild(document.createElement('br')); // Create label for answer var answerLabel = document.createElement('label'); answerLabel.className = 'correct-answer'; answerLabel.textContent = 'Correct answer: ' + question.answer; quizQuestionsDiv.appendChild(answerLabel); } // Show answer when submit button is clicked function showAnswer(event) { var submitButton = event.target; var answersDiv = submitButton.previousElementSibling; var correctAnswerLabel = answersDiv.nextElementSibling; correctAnswerLabel.style.display = 'block'; } </script> </body> </html>