Как получить результаты по нажатию одной кнопки со всеми полученными элементами?

Question

Я хочу создать простое и легкое приложение-викторину на основе Javascript (помните, простой и легкий код не с расширенным Javascript). Я старался изо всех сил, но я застрял на этом этапе, все работает нормально, кроме результата. Я хочу получить результаты в теге html, используя Javascript. Вот мой код:

// Javascript (important I need a solution in this code)

function check(){
    // question no1
    var score = 0;
    var q1WriteAnswer = document.getElementById('q1_o3');
    var q1option1 = document.getElementById('q1_o1');
    var q1option2 = document.getElementById('q1_o2');
    var q1option4 = document.getElementById('q1_o4');
    if (q1WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }
// question no2


    var score = 0;
    var q2WriteAnswer = document.getElementById('q2_o1');
    var q2option1 = document.getElementById('q2_o2');
    var q2option2 = document.getElementById('q2_o3');
    var q2option4 = document.getElementById('q2_o4');
    if (q2WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }


    // Question no3

    var score = 0;
    var q3WriteAnswer = document.getElementById('q3_o2');
    var q3option1 = document.getElementById('q3_o1');
    var q3option2 = document.getElementById('q3_o3');
    var q3option4 = document.getElementById('q3_o4');
    if (q3WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }


    // Question no4

    var score = 0;
    var q4WriteAnswer = document.getElementById('q4_o4');
    var q4option1 = document.getElementById('q4_o1');
    var q4option2 = document.getElementById('q4_o2');
    var q4option4 = document.getElementById('q4_o3');
    if (q4WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }


    // Question no5

    var score = 0;
    var q5WriteAnswer = document.getElementById('q5_o1');
    var q5option1 = document.getElementById('q5_o2');
    var q5option2 = document.getElementById('q5_o3');
    var q5option4 = document.getElementById('q5_o4');
    if (q5WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }


    // Question no6


    var score = 0;
    var q6WriteAnswer = document.getElementById('q6_o1');
    var q6option1 = document.getElementById('q6_o2');
    var q6option2 = document.getElementById('q6_o3');
    var q6option4 = document.getElementById('q6_o4');
    if (q6WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }



    // Questiton No7

    var score = 0;
    var q7WriteAnswer = document.getElementById('q7_o1');
    var q7option1 = document.getElementById('q7_o2');
    var q7option2 = document.getElementById('q7_o3');
    var q7option4 = document.getElementById('q7_o4');
    if (q7WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }

    // Question no 8

    var score = 0;
    var q8WriteAnswer = document.getElementById('q8_o1');
    var q8option1 = document.getElementById('q8_o2');
    var q8option2 = document.getElementById('q8_o3');
    var q8option4 = document.getElementById('q8_o4');
    if (q8WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }

    // Question No9

    var score = 0;
    var q9WriteAnswer = document.getElementById('q9_o3');
    var q9option1 = document.getElementById('q9_o1');
    var q9option2 = document.getElementById('q9_o2');
    var q9option4 = document.getElementById('q9_o4');
    if (q9WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }

    // Question No10

    var score = 0;
    var q10WriteAnswer = document.getElementById('q10_o1');
    var q10option1 = document.getElementById('q10_o2');
    var q10option2 = document.getElementById('q10_o3');
    var q10option4 = document.getElementById('q10_o4');
    if (q10WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }
var ab = document.createElement("h3");
ab.innerText = score;
document.body.appendChild(ab);
}

/* *{
    padding: 0px;
    margin: 0px;

} */

body{

    color: white;
    background-color: #222;
    background-image: url(images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}

fieldset{
    border-radius: 15px;
    text-align: center;
}

h3{
    background-color: cornsilk;
    color: blue;
    width: 10vw;
    height: 5vh;
    text-align: center;
    position: relative;
    left: 45%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz Application</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Quiz Application</h1>

    <div>
    <fieldset>
        <p>Who is the founder of Pakistan?</p>
        <input type="radio" name="founder" id="q1_o1">Allama Iqbal</radio>
        <input type="radio" name="founder" id="q1_o2">Manzoor Kapri</radio>
        <input type="radio" name="founder" id="q1_o3">Quaid-e-Azam</radio>
        <input type="radio" name="founder" id="q1_o4">Liaquat Ali Jinah</radio>
    </fieldset>
    </div><br>
    <br>
    <br>

    <div>
        <fieldset>
            <p>Who is national poet of Pakistan?</p>
            <input type="radio" name="national_poet" id="q2_o1">Allama Iqbal</radio>
            <input type="radio" name="national_poet" id="q2_o2">Manzoor Kapri</radio>
            <input type="radio" name="national_poet" id="q2_o3">Quaid-e-Azam</radio>
            <input type="radio" name="national_poet" id="q2_o4">Liaquat Ali Jinah</radio>
        </fieldset>
        </div><br>
        <br>
        <br>


        <div>
            <fieldset>
                <p>Who is the writer of national anthem of Pakistan?</p>
                <input type="radio" name="anthem_poet" id="q3_o1">Allama Iqbal</radio>
                <input type="radio" name="anthem_poet" id="q3_o2">Hafiz Jalindheri</radio>
                <input type="radio" name="anthem_poet" id="q3_o3">Quaid-e-Azam</radio>
                <input type="radio" name="anthem_poet" id="q3_o4">Liaquat Ali Jinah</radio>
            </fieldset>
            </div><br>
            <br>
            <br>


            <div>
                <fieldset>
                    <p>what is the national animal of Pakistan?</p>
                    <input type="radio" name="national_animal" id="q4_o1">Peacock</radio>
                    <input type="radio" name="national_animal" id="q4_o2">Dog</radio>
                    <input type="radio" name="national_animal" id="q4_o3">Lion</radio>
                    <input type="radio" name="national_animal" id="q4_o4">Markhor</radio>
                </fieldset>
                </div><br>
                <br>
                <br>



                <div>
                    <fieldset>
                        <p>Who is the Prime Minister of Pakistan?</p>
                        <input type="radio" name="pm" id="q5_o1">Imran Khan</radio>
                        <input type="radio" name="pm" id="q5_o2">Manzoor Kapri</radio>
                        <input type="radio" name="pm" id="q5_o3">Quaid-e-Azam</radio>
                        <input type="radio" name="pm" id="q5_o4">Liaquat Ali Jinah</radio>
                    </fieldset>
                    </div><br>
                    <br>
                    <br>



                    <div>
                        <fieldset>
                            <p>what is the area of pakistan in square km?</p>
                            <input type="radio" name="pk_sq_km" id="q6_o1">1,96,096 sq km</radio>
                            <input type="radio" name="pk_sq_km" id="q6_o1">5,05,095 sq km</radio>
                            <input type="radio" name="pk_sq_km" id="q6_o1">7,96,096 sq km</radio>
                            <input type="radio" name="pk_sq_km" id="q6_o1">2,96,096 sq km</radio>
                        </fieldset>
                        </div><br>
                        <br>
                        <br>


                        <div>
                            <fieldset>
                                <p>Who is the first prime minister of Pakistan?</p>
                                <input type="radio" name="first_PM" id="q7_o1">Liaquat Ali</radio>
                                <input type="radio" name="first_PM" id="q7_o2">Zulfiqar Ali Bhutto</radio>
                                <input type="radio" name="first_PM" id="q7_o3">Quaid-e-Azam</radio>
                                <input type="radio" name="first_PM" id="q7_o4">Manzoor Kapri</radio>
                            </fieldset>
                            </div><br>
                            <br>
                            <br>



                            <div>
                                <fieldset>
                                    <p>Which was the first capital of Pakistan?</p>
                                    <input type="radio" name="first_Capital" id="q8_o1">Karachi</radio>
                                    <input type="radio" name="first_Capital" id="q8_o2">Islamabad</radio>
                                    <input type="radio" name="first_Capital" id="q8_o3">Hydrabad</radio>
                                    <input type="radio" name="first_Capital" id="q8_o4">Quetta</radio>
                                </fieldset>
                                </div><br>
                                <br>
                                <br>



                                <div>
                                    <fieldset>
                                        <p>Who is the first woman prime minister of Pakistan?</p>
                                        <input type="radio" name="first_womanPM" id="q9_o1">Shoukat Khanam</radio>
                                        <input type="radio" name="first_womanPM" id="q9_o2">Shamshad Akhtar</radio>
                                        <input type="radio" name="first_womanPM" id="q9_o3">Benazir Bhutto</radio>
                                        <input type="radio" name="first_womanPM" id="q9_o4">Liaquat Ali Jinah</radio>
                                    </fieldset>
                                    </div><br>
                                    <br>
                                    <br>




                                    <div>
                                        <fieldset>
                                            <p>which is the current capital of Pakistan?</p>
                                            <input type="radio" name="founder" id="">Islamabad</radio>
                                            <input type="radio" name="founder" id="">Karachi</radio>
                                            <input type="radio" name="founder" id="">Hydrabad</radio>
                                            <input type="radio" name="founder" id="">Lahore</radio>
                                        </fieldset>
                                        </div><br>
                                        <br>
                                        <br>

                                        <button onclick="check()">Results</button>


    <script src="app.js"></script>
</body>
</html>

    

Answer 1

у вас есть несколько ошибок:

1. вы продолжаете добавлять закрывающий , которого не должно быть
2. вы продолжаете сбрасывать сумму до 0
3. у вас js есть 10 вопросов, у вашего html 9
4. ваше добавление в тело неверно

// Javascript (important I need a solution in this code)

function check(){
    // question no1
    var score = 0;
    var q1WriteAnswer = document.getElementById('q1_o3');
    var q1option1 = document.getElementById('q1_o1');
    var q1option2 = document.getElementById('q1_o2');
    var q1option4 = document.getElementById('q1_o4');
    if (q1WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }
// question no2


   // var score = 0;
    var q2WriteAnswer = document.getElementById('q2_o1');
    var q2option1 = document.getElementById('q2_o2');
    var q2option2 = document.getElementById('q2_o3');
    var q2option4 = document.getElementById('q2_o4');
    if (q2WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }


    // Question no3

   // var score = 0;
    var q3WriteAnswer = document.getElementById('q3_o2');
    var q3option1 = document.getElementById('q3_o1');
    var q3option2 = document.getElementById('q3_o3');
    var q3option4 = document.getElementById('q3_o4');
    if (q3WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }


    // Question no4

   // var score = 0;
    var q4WriteAnswer = document.getElementById('q4_o4');
    var q4option1 = document.getElementById('q4_o1');
    var q4option2 = document.getElementById('q4_o2');
    var q4option4 = document.getElementById('q4_o3');
    if (q4WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }


    // Question no5

   // var score = 0;
    var q5WriteAnswer = document.getElementById('q5_o1');
    var q5option1 = document.getElementById('q5_o2');
    var q5option2 = document.getElementById('q5_o3');
    var q5option4 = document.getElementById('q5_o4');
    if (q5WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }


    // Question no6


   // var score = 0;
    var q6WriteAnswer = document.getElementById('q6_o1');
    var q6option1 = document.getElementById('q6_o2');
    var q6option2 = document.getElementById('q6_o3');
    var q6option4 = document.getElementById('q6_o4');
    if (q6WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }



    // Questiton No7

   // var score = 0;
    var q7WriteAnswer = document.getElementById('q7_o1');
    var q7option1 = document.getElementById('q7_o2');
    var q7option2 = document.getElementById('q7_o3');
    var q7option4 = document.getElementById('q7_o4');
    if (q7WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }

    // Question no 8

   // var score = 0;
    var q8WriteAnswer = document.getElementById('q8_o1');
    var q8option1 = document.getElementById('q8_o2');
    var q8option2 = document.getElementById('q8_o3');
    var q8option4 = document.getElementById('q8_o4');
    if (q8WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }

    // Question No9

  //  var score = 0;
    var q9WriteAnswer = document.getElementById('q9_o3');
    var q9option1 = document.getElementById('q9_o1');
    var q9option2 = document.getElementById('q9_o2');
    var q9option4 = document.getElementById('q9_o4');
    if (q9WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }

    // Question No10
/*
    var score = 0;
    var q10WriteAnswer = document.getElementById('q10_o1');
    var q10option1 = document.getElementById('q10_o2');
    var q10option2 = document.getElementById('q10_o3');
    var q10option4 = document.getElementById('q10_o4');
    if (q10WriteAnswer.checked==true){

        score++

    }
    else{
        alert("wrong answer");
    }
    
*/

var ab = document.createElement("h3");
ab.innerText = score;
document.getElementsByTagName('body')[0].appendChild(ab);

}

/* *{
    padding: 0px;
    margin: 0px;

} */

body{

    color: white;
    background-color: #222;
    background-image: url(images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}

fieldset{
    border-radius: 15px;
    text-align: center;
}

h3{
    background-color: cornsilk;
    color: blue;
    width: 10vw;
    height: 5vh;
    text-align: center;
    position: relative;
    left: 45%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz Application</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Quiz Application</h1>

    <div>
    <fieldset>
        <p>Who is the founder of Pakistan?</p>
        <input type="radio" name="founder" id="q1_o1">Allama Iqbal
        <input type="radio" name="founder" id="q1_o2">Manzoor Kapri
        <input type="radio" name="founder" id="q1_o3">Quaid-e-Azam
        <input type="radio" name="founder" id="q1_o4">Liaquat Ali Jinah
    </fieldset>
    </div><br>
    <br>
    <br>

    <div>
        <fieldset>
            <p>Who is national poet of Pakistan?</p>
            <input type="radio" name="national_poet" id="q2_o1">Allama Iqbal
            <input type="radio" name="national_poet" id="q2_o2">Manzoor Kapri
            <input type="radio" name="national_poet" id="q2_o3">Quaid-e-Azam
            <input type="radio" name="national_poet" id="q2_o4">Liaquat Ali Jinah
        </fieldset>
        </div><br>
        <br>
        <br>


        <div>
            <fieldset>
                <p>Who is the writer of national anthem of Pakistan?</p>
                <input type="radio" name="anthem_poet" id="q3_o1">Allama Iqbal
                <input type="radio" name="anthem_poet" id="q3_o2">Hafiz Jalindheri
                <input type="radio" name="anthem_poet" id="q3_o3">Quaid-e-Azam
                <input type="radio" name="anthem_poet" id="q3_o4">Liaquat Ali Jinah
            </fieldset>
            </div><br>
            <br>
            <br>


            <div>
                <fieldset>
                    <p>what is the national animal of Pakistan?</p>
                    <input type="radio" name="national_animal" id="q4_o1">Peacock
                    <input type="radio" name="national_animal" id="q4_o2">Dog
                    <input type="radio" name="national_animal" id="q4_o3">Lion
                    <input type="radio" name="national_animal" id="q4_o4">Markhor
                </fieldset>
                </div><br>
                <br>
                <br>



                <div>
                    <fieldset>
                        <p>Who is the Prime Minister of Pakistan?</p>
                        <input type="radio" name="pm" id="q5_o1">Imran Khan
                        <input type="radio" name="pm" id="q5_o2">Manzoor Kapri
                        <input type="radio" name="pm" id="q5_o3">Quaid-e-Azam
                        <input type="radio" name="pm" id="q5_o4">Liaquat Ali Jinah
                    </fieldset>
                    </div><br>
                    <br>
                    <br>



                    <div>
                        <fieldset>
                            <p>what is the area of pakistan in square km?</p>
                            <input type="radio" name="pk_sq_km" id="q6_o1">1,96,096 sq km
                            <input type="radio" name="pk_sq_km" id="q6_o1">5,05,095 sq km
                            <input type="radio" name="pk_sq_km" id="q6_o1">7,96,096 sq km
                            <input type="radio" name="pk_sq_km" id="q6_o1">2,96,096 sq km
                        </fieldset>
                        </div><br>
                        <br>
                        <br>


                        <div>
                            <fieldset>
                                <p>Who is the first prime minister of Pakistan?</p>
                                <input type="radio" name="first_PM" id="q7_o1">Liaquat Ali
                                <input type="radio" name="first_PM" id="q7_o2">Zulfiqar Ali Bhutto
                                <input type="radio" name="first_PM" id="q7_o3">Quaid-e-Azam
                                <input type="radio" name="first_PM" id="q7_o4">Manzoor Kapri
                            </fieldset>
                            </div><br>
                            <br>
                            <br>



                            <div>
                                <fieldset>
                                    <p>Which was the first capital of Pakistan?</p>
                                    <input type="radio" name="first_Capital" id="q8_o1">Karachi
                                    <input type="radio" name="first_Capital" id="q8_o2">Islamabad
                                    <input type="radio" name="first_Capital" id="q8_o3">Hydrabad
                                    <input type="radio" name="first_Capital" id="q8_o4">Quetta
                                </fieldset>
                                </div><br>
                                <br>
                                <br>



                                <div>
                                    <fieldset>
                                        <p>Who is the first woman prime minister of Pakistan?</p>
                                        <input type="radio" name="first_womanPM" id="q9_o1">Shoukat Khanam
                                        <input type="radio" name="first_womanPM" id="q9_o2">Shamshad Akhta
                                        <input type="radio" name="first_womanPM" id="q9_o3">Benazir Bhutto
                                        <input type="radio" name="first_womanPM" id="q9_o4">Liaquat Ali Jinah
                                    </fieldset>
                                    </div><br>
                                    <br>
                                    <br>




                                    <div>
                                        <fieldset>
                                            <p>which is the current capital of Pakistan?</p>
                                            <input type="radio" name="founder" id="">Islamabad
                                            <input type="radio" name="founder" id="">Karachi
                                            <input type="radio" name="founder" id="">Hydrabad
                                            <input type="radio" name="founder" id="">Lahore
                                        </fieldset>
                                        </div><br>
                                        <br>
                                        <br>

                                        <button onclick="check()">Results</button>


    <script src="app.js"></script>
</body>
</html>

Answer 2

Это можно сделать проще, используя пример querySelector:

// Javascript (important I need a solution in this code)


function checkQuestion(questionName, answerID) {
  if(questionName == null || answerID == null) return;

  const answer = document.getElementById(answerID);
  const question = document.querySelector(`input[name="${questionName}"]:checked`);

  if(answer == null || question == null) return;

  return answer.id === question.id;
}
function updateScore(name, score, isCorrect) {
  if(isCorrect == null) return score;

  if(isCorrect) {
    document.querySelectorAll(`input[name="${name}"]:not(:checked)`).forEach(input => input.disabled = true);
    return score + 1;
  }
  else alert("wrong answer");

  return score;
}

function check() {
  let score = 0;

  // question no1
  const nameQ1 = 'founder'
  const validQ1 = checkQuestion(nameQ1, 'q1_o3');
  score = updateScore(nameQ1, score, validQ1);

  // question no2
  const nameQ2 = 'national_poet';
  const validQ2 = checkQuestion(nameQ2, 'q2_o1');
  score = updateScore(nameQ2, score, validQ2);

  // question no3
  const nameQ3 = 'anthem_poet'
  const validQ3 = checkQuestion(nameQ3, 'q3_o2');
  score = updateScore(nameQ3, score, validQ3);

  // question no4
  const nameQ4 = 'national_animal'
  const validQ4 = checkQuestion(nameQ4, 'q4_o4');
  score = updateScore(nameQ4, score, validQ4);

  // question no5
  const nameQ5 = 'pm';
  const validQ5 = checkQuestion(nameQ5, 'q5_o1');
  score = updateScore(nameQ5, score, validQ5);

  // question no6
  const nameQ6 = 'pk_sq_km'
  const validQ6 = checkQuestion(nameQ6, 'q6_o1');
  score = updateScore(nameQ6, score, validQ6);

  // question no7
  const nameQ7 = 'first_PM';
  const validQ7 = checkQuestion(nameQ7, 'q7_o1');
  score = updateScore(nameQ7, score, validQ7);

  // question no8
  const nameQ8 = 'first_Capital';
  const validQ8 = checkQuestion(nameQ8, 'q8_o1');
  score = updateScore(nameQ8, score, validQ8);

  // question no9
  const nameQ9 = 'first_womanPM';
  const validQ9 = checkQuestion(nameQ9, 'q9_o3');
  score = updateScore(nameQ9, score, validQ9);

  // question no9
  const nameQ10 = 'founder2';
  const validQ10 = checkQuestion(nameQ10, 'q10_o1');
  score = updateScore(nameQ10, score, validQ10);

  //display result
  const ab = document.querySelector('.ab') || ((e) => {
    e.classList.add('ab');
    document.body.appendChild(e)
    return e;
  })(document.createElement("h3"));
  ab.innerText = score;
}

/* *{
    padding: 0px;
    margin: 0px;

} */

body{
    margin: 1em;
    color: white;
    background-color: #222;
    background-image: url(images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}

fieldset{
    border-radius: 15px;
    text-align: center;
}

h3{
    background-color: cornsilk;
    color: blue;
    width: 10vw;
    height: 5vh;
    text-align: center;
    position: relative;
    left: 45%;
}
input[type=radio]:disabled ~ label {
  color: gray;
}

<h1>Quiz Application</h1>

<div>
  <fieldset>
    <p>Who is the founder of Pakistan?</p>
    <input type="radio" name="founder" id="q1_o1"><label>Allama Iqbal</label>
    <input type="radio" name="founder" id="q1_o2"><label>Manzoor Kapri</label>
    <input type="radio" name="founder" id="q1_o3"><label>Quaid-e-Azam</label>
    <input type="radio" name="founder" id="q1_o4"><label>Liaquat Ali Jinah</label>
  </fieldset>
</div><br>
<br>
<br>

<div>
  <fieldset>
    <p>Who is national poet of Pakistan?</p>
    <input type="radio" name="national_poet" id="q2_o1"><label>Allama Iqbal</label>
    <input type="radio" name="national_poet" id="q2_o2"><label>Manzoor Kapri</label>
    <input type="radio" name="national_poet" id="q2_o3"><label>Quaid-e-Azam</label>
    <input type="radio" name="national_poet" id="q2_o4"><label>Liaquat Ali Jinah</label>
  </fieldset>
</div><br>
<br>
<br>


<div>
  <fieldset>
    <p>Who is the writer of national anthem of Pakistan?</p>
    <input type="radio" name="anthem_poet" id="q3_o1"><label>Allama Iqbal</label>
    <input type="radio" name="anthem_poet" id="q3_o2"><label>Hafiz Jalindheri</label>
    <input type="radio" name="anthem_poet" id="q3_o3"><label>Quaid-e-Azam</label>
    <input type="radio" name="anthem_poet" id="q3_o4"><label>Liaquat Ali Jinah</label>
  </fieldset>
</div><br>
<br>
<br>


<div>
  <fieldset>
    <p>what is the national animal of Pakistan?</p>
    <input type="radio" name="national_animal" id="q4_o1"><label>Peacock</label>
    <input type="radio" name="national_animal" id="q4_o2"><label>Dog</label>
    <input type="radio" name="national_animal" id="<label>q4_o3"><label>Lion</label>
    <input type="radio" name="national_animal" id="q4_o4"><label>Markhor</label>
  </fieldset>
</div><br>
<br>
<br>



<div>
  <fieldset>
    <p>Who is the Prime Minister of Pakistan?</p>
    <input type="radio" name="pm" id="q5_o1"><label>Imran Khan</label>
    <input type="radio" name="pm" id="q5_o2"><label>Manzoor Kapri</label>
    <input type="radio" name="pm" id="q5_o3"><label>Quaid-e-Azam</label>
    <input type="radio" name="pm" id="q5_o4"><label>Liaquat Ali Jinah</label>
  </fieldset>
</div><br>
<br>
<br>



<div>
  <fieldset>
    <p>what is the area of pakistan in square km?</p>
    <input type="radio" name="pk_sq_km" id="q6_o1"><label>1,96,096 sq km</label>
    <input type="radio" name="pk_sq_km" id="q6_o1"><label>5,05,095 sq km</label>
    <input type="radio" name="pk_sq_km" id="q6_o1"><label>7,96,096 sq km</label>
    <input type="radio" name="pk_sq_km" id="q6_o1"><label>2,96,096 sq km</label>
  </fieldset>
</div><br>
<br>
<br>


<div>
  <fieldset>
    <p>Who is the first prime minister of Pakistan?</p>
    <input type="radio" name="first_PM" id="q7_o1"><label>Liaquat Ali</label>
    <input type="radio" name="first_PM" id="q7_o2"><label>Zulfiqar Ali Bhutto</label>
    <input type="radio" name="first_PM" id="q7_o3"><label>Quaid-e-Azam</label>
    <input type="radio" name="first_PM" id="q7_o4"><label>Manzoor Kapri</label>
  </fieldset>
</div><br>
<br>
<br>



<div>
  <fieldset>
    <p>Which was the first capital of Pakistan?</p>
    <input type="radio" name="first_Capital" id="q8_o1"><label>Karachi</label>
    <input type="radio" name="first_Capital" id="q8_o2"><label>Islamabad</label>
    <input type="radio" name="first_Capital" id="q8_o3"><label>Hydrabad</label>
    <input type="radio" name="first_Capital" id="q8_o4"><label>Quetta</label>
  </fieldset>
</div><br>
<br>
<br>



<div>
  <fieldset>
    <p>Who is the first woman prime minister of Pakistan?</p>
    <input type="radio" name="first_womanPM" id="q9_o1"><label>Shoukat Khanam</label>
    <input type="radio" name="first_womanPM" id="q9_o2"><label>Shamshad Akhtar</label>
    <input type="radio" name="first_womanPM" id="q9_o3"><label>Benazir Bhutto</label>
    <input type="radio" name="first_womanPM" id="q9_o4"><label>Liaquat Ali Jinah</label>
  </fieldset>
</div><br>
<br>
<br>




<div>
  <fieldset>
    <p>which is the current capital of Pakistan?</p>
    <input type="radio" name="founder2" id=""><label>Islamabad</label>
    <input type="radio" name="founder2" id=""><label>Karachi</label>
    <input type="radio" name="founder2" id=""><label>Hydrabad</label>
    <input type="radio" name="founder2" id=""><label>Lahore</label>
  </fieldset>
</div><br>
<br>
<br>

<button onclick="check()">Results</button>

Answer 3

Некорректные элементы радиовхода. Вы можете добавить элемент метки под каждым input type = "radio" и удалить закрывающий радио-тег.

Затем вы можете упростить свой javascript, проверив, выбран ли только правильный ответ. Я предоставил пример кода со сценарием внизу.

Получив только правильные элементы ввода ответа, вы можете сохранить их в массиве и l oop поверх массива, чтобы увидеть, проверен ли правильный ответ .

Я привел пример, чтобы показать лучший способ получить то, что вы ищете.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Quiz Application</h1>
    <h2>Score: <span id="score">0</span></h2>

    <div>
        <fieldset>Who is the founder of Pakistan? <br>
            <input type="radio" name="founder" id="q1_o1" value="Allama Iqbal">
            <label for="founder">Allama Iqbal</label>
            <input type="radio" name="founder" id="q1_o2" value="Manzoor Kapri">
            <label for="founder">Manzoor Kapri</label>
            <input type="radio" name="founder" id="q1_o3" value="Quaid-e-Azam">
            <label for="founder">Liaquat Ali Jinah</label>
            <input type="radio" name="founder" id="q1_o4" value="Liaquat Ali Jinah">
            <label for="founder">Liaquat Ali Jinah</label>
        </fieldset>

        <fieldset>Who is the national poet of Pakistan? <br>
            <input type="radio" name="national_poet" id="q2_o1" value="Allama Iqbal">
            <label for="national_poet">Allama Iqbal</label>
            <input type="radio" name="national_poet" id="q2_o2" value="Manzoor Kapri">
            <label for="national_poet">Manzoor Kapri</label>
            <input type="radio" name="national_poet" id="q2_o3" value="Quaid-e-Azam">
            <label for="national_poet">Liaquat Ali Jinah</label>
            <input type="radio" name="national_poet" id="q2_o4" value="Liaquat Ali Jinah">
            <label for="national_poet">Liaquat Ali Jinah</label>
        </fieldset>
    </div>

    <button onClick="check()">Check Answer</button>
    

    <script>
        function check(){
            // question no1
            var score = 0;
            var wrong_count = 0;
            var scoreNode = document.getElementById('score');


            const answer1 = document.getElementById('q1_o3');
            const answer2 = document.getElementById('q2_o1');

            const answers = [answer1, answer2];

            answers.forEach(answer => {
                if (answer.checked) {
                    score++
                } else {
                    wrong_count++
                }
            })

            scoreNode.innerHTML = score;

            if (wrong_count > 0) {
                alert(`You answered ${wrong_count} question(s) incorrectly.`);
            }
            
        }
    </script>
</body>
</html>