如何在所有已获取元素的单击按钮上获得结果？

Question

我想构建一个简单易用的基于 Javascript 的测验应用程序（记住简单易用的代码，而不是高级 Javascript）我尽了最大努力，但我被困在这一点上，除了结果之外，一切都运行良好。我想使用 Javascript 在 html 标记中获取结果。这是我的代码：

// 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

使用 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 2

单选输入元素不正确。您可能希望在每个输入 type="radio" 下方添加一个标签元素并删除结束单选标记。

然后您可以通过检查是否只选择了正确的答案来简化您的 javascript。我在底部提供了一个带有脚本的代码示例。

通过只获取正确答案的输入元素，您可以将它们存储在一个数组中并循环遍历该数组以查看是否检查了正确答案。

我提供了一个示例来展示获得所需内容的更好方法。

<!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>

Answer 3

你有几个错误：

1. 你不断添加一个不应该存在的结束
2. 你不断将 sum 重置为 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>