如何突出显示在线测验的正确和错误答案？

Question

I am creating a simple quiz about country capitals and would like to have the website highlight the correct answers (in green) for each question after the user hits the submit button as well as highlight any incorrect answers chosen (in red). I have searched on this site under similar questions, but the answers provided confused me.

I would like to have the background colors activated along with the alert message that gives the percentage of correct answers. Currently, the alert works perfectly fine, but I would like assistance for the background colors.

 function check() { var q1 = document.quiz.q1.value; var q2 = document.quiz.q2.value; var q3 = document.quiz.q3.value; var q4 = document.quiz.q4.value; var q5 = document.quiz.q5.value; var count = 0; if (q1 == "c") { count++; } if (q2 == "d") { count++; } if (q3 == "c") { count++; } if (q4 == "b") { count++; } if (q5 == "d") { count++; } var final = (count / 5) * 100 alert("Your got " + final + "% correct!"); } 

 body, html { height: 100%; width: 100%; margin: 0; color: rgb(0, 0, 0); font-size: 100%; font-weight: bold; } body { text-align: left; padding-left: 25px; background-color: rgb(255, 253, 208); } h1 { color: rgb(0, 0, 0); } .Correct { background-color: lawngreen; } .Incorrect { background-color: red; } 

 <form id="quiz" name="quiz"> <p>What is the capital of the USA?</p> <br> <input type="radio" name="q1" value="a" class="Incorrect">Chicago <br> <input type="radio" name="q1" value="b" class="Incorrect">Maimi<br> <input type="radio" name="q1" value="c" class="Correct">Washington DC <br> <input type="radio" name="q1" value="d" class="Incorrect">Vegas<br> <br> <p>What is the current capital of Brazil?</p> <br> <input type="radio" name="q2" value="a" class="Incorrect">Salvador <br> <input type="radio" name="q2" value="b" class="Incorrect">Rio de Janero <br> <input type="radio" name="q2" value="c" class="Incorrect">Sao Paulo <br> <input type="radio" name="q2" value="d" class="Correct">Brasilia <br> <br> <p>What is the capital of Japan?</p> <br> <input type="radio" name="q3" value="a" class="Incorrect">Osaka <br> <input type="radio" name="q3" value="b" class="Incorrect">Kyoto <br> <input type="radio" name="q3" value="c" class="Correct">Tokyo<br> <input type="radio" name="q3" value="d" class="Incorrect">Sapporo<br> <br> <p>What is the capital of Germany?</p> <input type="radio" name="q4" value="a" class="Incorrect">Munich<br> <input type="radio" name="q4" value="b" class="Correct">Berlin<br> <input type="radio" name="q4" value="c" class="Incorrect">Cologne<br> <input type="radio" name="q4" value="d" class="Incorrect">Hamburg<br> <p>What is the capital of South Korea? </p> <input type="radio" name="q5" value="a" class="Incorrect">Busan<br> <input type="radio" name="q5" value="b" class="Incorrect">Incheon<br> <input type="radio" name="q5" value="c" class="Incorrect">Jeju<br> <input type="radio" name="q5" value="d" class="Correct">Seoul<br> <br/> <input type="button" value="submit" onclick="check()"> </form> 

Answer 1

You're currently trying to style the input radio button (the clickable circle), but are expecting the text to be styled instead. Traditionally, you should have the text and input for each choice wrapped in a <label> tag. Then apply the css style to each label. I did the first one for you in your code below.

Also, add for="..." to each label, so that when the text is clicked, that corresponding input box is also selected. You will also need to add an id="..." to each input for this to work.

 // js truncated, no changes 

 .Incorrect { background-color: red; } // css truncated, no changes 

 <form id="quiz" name="quiz"> <p>What is the capital of the USA?</p> <br> <label for="q1a" class="Incorrect"> <input type="radio" name="q1" id="q1a" value="a"> Chicago </label> <br> <input type="radio" name="q1" value="b" class="Incorrect">Maimi<br> <input type="radio" name="q1" value="c" class="Correct">Washington DC <br> <input type="radio" name="q1" value="d" class="Incorrect">Vegas<br> <br> <input type="button" value="submit" onclick="check()"> </form> 

Answer 2

Additionally to chadiusvt Answer you can add some Lines like this:

This at the End of CSS Area(just next to your .Incorrect part):

.nocolor {
    background-color: rgb(255, 253, 208);
}

This at the End of JS Area(after Alert, but inside of the function):

var elem = document.getElementsByClassName("nocolor");
while (elem.length)
    elem[0].className = elem[0].className.replace(/\bnocolor\b/g, "");

Now add the class 'nocolor' to all Label-Elements. Looks like this eg

<label class="Incorrect nocolor" ><input type="radio" name="q1" value="a">Chicago</label><br>
<label class="Incorrect nocolor" ><input type="radio" name="q1" value="b">Maimi</label><br>
<label class="Correct   nocolor" ><input type="radio" name="q1" value="c">Washington D.C.</label><br>

This new class 'nocolor' will hide the backgroundcolors until you click the Button. This need to be after .Correct and .Incorrect so it will overwrite the red/green Background temporary!

The three Lines of JS: 1. Line looks for all Elements with class 'nocolor' 2. Line goes through the Elements and 3. Line removes all of the nocolor-classes on each Element. = the red/green Backgrounds will be visible again(after clicking the Button).