Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Help me out this is my i made a quiz with submit button show correct answer but it's not working

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>
 
Hi @mail2vinay789,

That code isn't going to work because you have single line comments (//comment) in the code, so most of your javascript is commented out.
Either use multi-line comments (/* comment */) or properly format your code.

Also please format code before posting it here. No one want to read through unformatted code on a single line.
 
this is my code i need correct answer to show when submit button click

JavaScript:
<!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>
 
Have you debugged your code in the showAnswer() function ? If not, go do it now, and inspect all variables after assignment.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom