how do I fix the score in my option quiz?

Question

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>

Does this answer your question? [How to get the selected radio button’s value?](https://stackoverflow.com/questions/9618504/how-to-get-the-selected-radio-button-s-value) — Andy Ray, May 13 '21 at 20:20
Yes it does, you're trying to get the selected radio button. Especially this answer https://stackoverflow.com/a/24886483/743464. Right now your `quesiton1` is a DOM element, not a string, so your if statements will never be true. Check the duplicate question again, and also make sure to console.log() things to help debug, which would show you that `question1` isn't a string. — Andy Ray, May 13 '21 at 20:25
`document.getElementsByClassName("question1")[0]` [No, no, no, no, no!](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) — Scott Marcus, May 13 '21 at 20:27

score 0 · Accepted Answer · answered May 13 '21 at 20:30

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>

DCR · Answer 2 · 2021-05-13T21:04:42.443

you have a couple of issues:

id's have to be unique.
you didn't specify any classes in your html
you need to get the 'value' of the input
you need to reference the correct index

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');
    
    //console.log(question1,question2,question3)
    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" class='question1' name="question1" value="Červená, Zelená, Modrá">Červená, Zelená, Modrá<br>
        <input type="radio" class='question1' name="question1" value="Červená, Zelená, Žlutá">Červená, Zelená, Žlutá<br>
        <input type="radio" class='question1' 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" class='question2' name="question2" value="0, 275">0, 275<br>
        <input type="radio" class='question2' name="question2" value="0, 255">0, 255<br>
        <input type="radio" class='question2' 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" class='question3' name="question3" value="Někdy ano, někdy ne">Někdy ano, někdy ne<br>
        <input type="radio" class='question3' name="question3" value="Ne">Ne<br>
        <input type="radio" class='question3' 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>

What if the nothing is selected and click on the submit button? Have you tried? it will get three corrects. And your solution won't even work if all three questions selected wrong. — StevenXXCCC, May 13 '21 at 20:33
@Jakub Mitrega This solution is incorrect and will always show three points. And you still accepting this? Please test the code properly before accept! — StevenXXCCC, May 13 '21 at 20:43
@StevenXXCC you are correct. the solution offered has a problem. we need to get the checked radio button. I'll update the snippet — DCR, May 13 '21 at 20:59

how do I fix the score in my option quiz?

2 Answers2