Javascript quiz with multiple radio and text input types

Question

I've made a small test/quiz with radio and checkbox types. Radio button in my code is mandatory to be checked and when it is, I get the total score for all correct answers, when it's not I get alert message that i need to check all questions.

Now I want to expand this quiz.

1st problem: I've made multiple radio type questions, I don't know how to check if all radio type questions are checked.

2nd problem: I've made test type questions and I want them to be seen after I push "Finish" (alongside total score from test questions), but when I push "Finish" I do not see the text type answers.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/main.css">
    <title>Exam</title>
    <script src="./JS/assessor.js"></script>
</head>
<body>
    <section>
        <main>
            <h2>This is the exam</h2>
            <form name="exam" id="exam">
                <div class="question">
                    <div class="questionTitle">Question 1</div>
                    <p><input type="radio" id="answer1" name="answer1" value="wrong">wrong</p>
                    <p><input type="radio" id="answer1" name="answer1" value="wrong">wrong</p>
                    <p><input type="radio" id="answer1" name="answer1" value="wrong">wrong</p>
                    <p><input type="radio" id="answer1" name="answer1" value="right">right</p>
                </div>

                <div class="question">
                    <div class="questionTitle1">Question 1</div>
                    <p><input type="radio" id="answer3" name="answer3" value="wrong">wrong</p>
                    <p><input type="radio" id="answer3" name="answer3" value="wrong">wrong</p>
                    <p><input type="radio" id="answer3" name="answer3" value="wrong">wrong</p>
                    <p><input type="radio" id="answer3" name="answer3" value="right">right</p>
                </div>
                
                <div class="question">
                    <div class="questionTitle">Question 2</div>
                    <p><input type="checkbox" id="answer2wrong1" name="answer2_1" value="wrong">wrong</p>
                    <p><input type="checkbox" id="answer2right1" name="answer2_2" value="right">right</p>
                    <p><input type="checkbox" id="answer2right2" name="answer2_2" value="right">right</p>
                    <p><input type="checkbox" id="answer2wrong2" name="answer2_4" value="wrong">wrong</p>
                </div>
                
                <div>
                    <label for="fname">First field</label><br>
                    <input type="text" id="fname" name="fname" value="button1"><br>
                    <label for="fname">Second field</label><br>
                    <input type="text" id="fname" name="fname" value="button2"><br>
                    <label for="fname">Third field</label><br>
                    <input type="text" id="fname" name="fname" value="button3"><br>
                </div>

                <input type="button" id="button" name="" value="Finish" onclick="validate();assess()">
            </form>
            <p id="result"></p>
        </main>
    </section>
</body>
</html>

function validate() {
    var valid = false;
    var x = document.exam.answer1;

    for(var i=0; i<x.length; i++) {
        if (x[i].checked) {
            valid= true;
            break;
        }
    }
    if(valid) {
        assess();
    }
    
    else {
        alert("All questions must be checked");
        return false
    }
    function assess() {
        var score=0;
        var q1=document.exam.answer1.value;
        var result=document.getElementById('result');
        var exam=document.getElementById('exam');
    
        if (q1=="right") {score++}
    
        if (answer2right1.checked===true) {score += 0.5}
        if (answer2right2.checked===true) {score += 0.5}
        if (answer2wrong1.checked===true) {score -= 0.5}
        if (answer2wrong2.checked===true) {score -= 0.5}
    
        exam.style.display="none";
        result.textContent=`${score}`;
    }
}

https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page Ids should be unique per page — Taplar, Dec 18 '20 at 18:23
what do you mean? Everything is working for me here. Can you help me to solve this issue? — Vitoldas, Dec 22 '20 at 20:12

score 0 · Answer 1 · answered Dec 23 '20 at 14:28

Nobody replies to me so I try to figure it out myself. Yet I face problems.

1st example: I get Success when i check 1st questions answer, but i need to check if all questions are checked, and I need to do it at once. In this code i can only check 1 question's status wether checked or not.

var mark = document.getElementsByTagName('input');
    for (var i=0; i<mark.length; i++) {
        if (mark[i].type == 'radio' && mark[i].name=="answer1" && mark[i].checked==true) {
            alert("YES")
            break;
    }
}

2nd example: In this code it doesnt recognize my ID at all and neither true or false work.

if(document.getElementById("answer1").checked==true) {
    alert("Success");
}
else {
    alert("All questions must be checked");
}

score 0 · Accepted Answer · answered Dec 29 '20 at 13:37

I figured it out myself. I added few lines where for checked answer in every question the "filledQuestion" score increases by 1. Then if "filledQuestion" score is equal to the number of questions, it passes, if not, it shows error message.

function validate() {
    
    var mark = document.getElementsByTagName('input');
    var filledQuestion = 0;
    for (var i=0; i<mark.length; i++) {
        if (mark[i].type == 'radio' && mark[i].name=="answerR1" && mark[i].checked==true) {
            filledQuestion = filledQuestion + 1
        }
        else if (mark[i].type == 'radio' && mark[i].name=="answerR2" && mark[i].checked==true) {
            filledQuestion = filledQuestion + 1
            break;
        }
    }
    if (filledQuestion == 2) {
        assess();
        showDiv();
    }
    else (alert("All questions must be checked"))

My second issue was due to my choice to use ( exam.style.display="none"; ) line. When i do not use it, the score is visible in the same page and therefore i can see all the changes after i submit the form.

Javascript quiz with multiple radio and text input types

2 Answers2