how do I fix the score in my option quiz?

I have a problem with the option quiz, more precisely with the evaluation of the correct answers. I don’t get a score and it still stays at 0. Thank you for your help.

    function check(){
        var question1 = document.getElementsByClassName("question1")[0];
        var question2 = document.getElementsByClassName("question2")[0];
        var question3 = document.getElementsByClassName("question3")[0];
        var correct = 0;
    
        if (question1 == "Červená, Zelená, Modrá") {
            correct++;
        }
        if (question2 == "0, 255") {
            correct++;
        }   
        document.getElementById("number_correct").innerHTML = "Máš " + correct + " otázky/otázek správně.";
    }

    <form id="quiz">
            <p style="font-weight: 900">V RGB modelu se jedná o jaké barvy?</p>
            <input type="radio" id="mc" name="question1" value="Červená, Zelená, Modrá">Červená, Zelená, Modrá<br>
            <input type="radio" id="mc" name="question1" value="Červená, Zelená, Žlutá">Červená, Zelená, Žlutá<br>
            <input type="radio" id="mc" name="question1" value="Černá, Fialová, Modrá">Červená, Fialová, Modrá<br>
        </form>
        <br>
        <form id="quiz">
            <p style="font-weight: 900">RGB monitory jsou schopny regulovat jas na jaké stupnici?</p>
            <input type="radio" id="mc" name="question2" value="0, 275">0, 275<br>
            <input type="radio" id="mc" name="question2" value="0, 255">0, 255<br>
            <input type="radio" id="mc" name="question2" value="50, 355">50, 355<br>
        </form>
        <br>
        <form id="quiz">
            <p style="font-weight: 900">Má každý bod určenou svou přesnou polohu?</p>
        </form>
        <br>
        <input id="check-btn" type="button" value="Vyhodnotit test" onclick="check();">
        <br>
        <br>
        <div id="number_correct"></div>

Answer

So, First, ids should unique. Remove all your id=”mc”.

Second. you need to get the value of the “Selected” option; Access using “input[name=”question1″]:checked” and access value using “selectedOption.value”.

See the snippet below:

function check(){
    var question1 = document.querySelector('input[name="question1"]:checked');
    var question2 = document.querySelector('input[name="question2"]:checked');
    var question3 = document.querySelector('input[name="question3"]:checked');
    var correct = 0;

    if (question1 !=null && question1.value == "Červená, Zelená, Modrá") {
        correct++;
    }
    if (question2 !=null && question2.value == "0, 255") {
        correct++;
    }   
    if (question3 !=null &&question3.value == "Ano") {
        correct++;
    }
    
    document.getElementById("number_correct").innerHTML = "Máš " + correct + " otázky/otázek správně.";
}

<form id="quiz">
        <p style="font-weight: 900">V RGB modelu se jedná o jaké barvy?</p>
        <input type="radio" name="question1" value="Červená, Zelená, Modrá">Červená, Zelená, Modrá<br>
        <input type="radio" name="question1" value="Červená, Zelená, Žlutá">Červená, Zelená, Žlutá<br>
        <input type="radio"name="question1" value="Černá, Fialová, Modrá">Červená, Fialová, Modrá<br>
    </form>
    <br>
    <form id="quiz">
        <p style="font-weight: 900">RGB monitory jsou schopny regulovat jas na jaké stupnici?</p>
        <input type="radio" name="question2" value="0, 275">0, 275<br>
        <input type="radio" name="question2" value="0, 255">0, 255<br>
        <input type="radio" name="question2" value="50, 355">50, 355<br>
    </form>
    <br>
    <form id="quiz">
        <p style="font-weight: 900">Má každý bod určenou svou přesnou polohu?</p>
        <input type="radio" name="question3" value="Někdy ano, někdy ne">Někdy ano, někdy ne<br>
        <input type="radio" name="question3" value="Ne">Ne<br>
        <input type="radio" name="question3" value="Ano">Ano<br>
    </form>
    <br>
    <input id="check-btn" type="button" value="Vyhodnotit test" onclick="check();">
    <br>
    <br>
    <div id="number_correct"></div>

Advertisement

Answer