Javascript quiz with multiple radio and text input types

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>

JavaScript
​x
 
<!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}`;
    }
}

JavaScript
 
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}`;
    }
}
​

Answer

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"))

JavaScript
 
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.

Advertisement

Answer