将 JS 测验的正确答案设为绿色，将错误答案设为红色答案

【问题标题】：Make Right Answers Green and Wrong Answers Red for JS Quiz将 JS 测验的正确答案设为绿色，将错误答案设为红色
【发布时间】：2020-05-30 21:23:36
【问题描述】：

我有一个用 JS 创建的测验系统。我正在使用输入元素来显示每个测验选项。我正在尝试这样做，所以当您单击提交时，它将循环遍历每个输入元素，并将输入文本的样式设置为绿色（如果它是正确答案）和红色（如果它不正确答案）。但是，我实际上无法获取输入值旁边的文本。

以下是测验的图片： 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) + "%)";


    }

我在想我可以将正确答案存储在数组中，如果输入具有值，则将文本的样式更改为绿色，否则将其更改为红色。

【问题讨论】：

这是意大利面条代码。你想尝试给它一些结构，也许将所有正确的答案放在一个地方吗？

标签： javascript html jquery css

【解决方案1】：

为什么简单不使用类：

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

// css 上需要的文字颜色宽度

【讨论】：

【解决方案2】：

这段代码不好。我决定在一个地方用正确的答案重写它。我还为每个输入元素添加了标签，以便更好地操作 CSS。

这里是 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) + "%)";


    }

【讨论】：

【解决方案3】：

您好，只需添加一个 else 条件即可完成

风格

.mystyle{
    border-color: red;
}


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

在这里检查我的小提琴 click

【讨论】：