CODEWITHSUNDEEP
javascripthtmljquerycss
pogh10
pogh10

Reputation: 41

Make Right Answers Green and Wrong Answers Red for JS Quiz

I have a quiz system that is created in JS. I am using input elements to display each quiz option. I am trying to make it so when you click submit, it will loop through each input element and set the styling of the input text to green if it is a correct answer and red if it an incorrect answer. I am having trouble actually getting the text that is next to the input value however.

Below is a picture of the quiz: https://gyazo.com/1ba5245de2c5c6f96bd728e31aeb0899

HTML:

<!DOCTYPE html>
<html>
<head>

<link href ="style.css" rel ="stylesheet">
<!-- <link href="https://fonts.googleapis.com/css?family=OpenSans" rel="stylesheet"> -->
<script src = "main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>


<body>
<h1>Chapter 1 Quiz</h1>


<form id = "quiz" name = "quiz">
<p class = "questions">What is the capital of Rhode Island?</p>
<input id = "textbox" type = "text" name = "question1">

<p class = "questions">What is the capital of Connecticut?</p>
<input type = "radio" id = "mc" name = "question2" value = "Hartford"> Hartford<br>


<input type = "radio" id = "mc" name = "question2" value = "Heartford"> Heartford<br>

<p class = "questions">What is the capital of New York?</p>
<input type = "radio" id = "mc" name = "question3" value = "Albany"> Albany<br>
<input type = "radio" id = "mc" name = "question3" value = "All Benny's"> All Benny's<br>


<input id = "button" type = "button" value = "Finish" onclick = "check();">
</form>

<div id = "after_submit">
<p id = "number_correct"></p>
<p id = "message"></p>
</div>
</html>

</body>

JAVASCRIPT:


function check(){

    var question1 = document.quiz.question1.value;
    var question2 = document.quiz.question2.value;
    var question3 = document.quiz.question3.value;
    var correct = 0;
    var total_questions = 3;


    if (question1 == "Providence") {
        correct++;
}
    if (question2 == "Hartford") {
        correct++;
}   
    if (question3 == "Albany") {
        correct++;
    }


    var score;

    if (correct == 0) {
        score = 2;
    }

    if (correct > 0 && correct < total_questions) {
        score = 1;
    }

    if (correct == total_questions) {
        score = 0;
    }

    $( "input" ).each(function( index ) {
        console.log( index + ": " + $( this ).val() );
        // CHANGE THE STYLING HERE. VAL DOES NOT GET THE TEXT OF INPUT AND NIETHER DOES .text()
    });

    document.getElementById("after_submit").style.visibility = "visible";

    document.getElementById("message").innerHTML = "Correct Answers:";
    document.getElementById("number_correct").innerHTML = "Score: " + correct + " / " + total_questions + " (" + Math.trunc((correct / total_questions)*100) + "%)";


    }

I was thinking I could store the correct answers in the array and if the input has the value then change the styling of the text to green otherwise change it to red.

Upvotes: 0

Views: 2199

Answers (3)

Frkafulja
Frkafulja

Reputation: 26

why simple don't use class:

if(ans == correct) { $(this).toggleClass(corect); correct ++; } if(ans != correct) { $(this).toggleClass(wrong); }

// whidth text color you need on css

Upvotes: 1

CodeBug
CodeBug

Reputation: 1667

hi that is be done by just adding one else condition

style 

.mystyle{
    border-color: red;
}


if (question2 == "Hartford") {
    correct++;
}   
else{
var element = document.getElementById("textbox");
 element.classList.add("mystyle");
}

check my fiddle here click

Upvotes: 0

pogh10
pogh10

Reputation: 41

This code is not good. I decided to rewrite it with the correct answers in one place. Also I added labels to each input element so that I can manipulate the CSS better.

Here is the JS:


function check(){

    var correct = 0;
    var total_questions = 3;
    var correct_answers = ["Providence", "Hartford", "Albany"];

    $( "label" ).each(function( index ) {
        console.log( index + ": " + $( this ).text() );
        if (correct_answers.includes($( this ).text())) {
            this.style.color = 'green'
            correct++
        } else {
            this.style.color = 'red'

        }
    });

    document.getElementById("after_submit").style.visibility = "visible";

    document.getElementById("message").innerHTML = "Correct Answers:";
    document.getElementById("number_correct").innerHTML = "Score: " + correct + " / " + total_questions + " (" + Math.trunc((correct / total_questions)*100) + "%)";


    }

Upvotes: 0

Related Questions