进行测验并需要根据Javascript中的正确选择更改背景颜色

我正在为类进行测验，并且对JavaScript有点新。我需要让问题的背景颜色交替出现，我已经找到了答案。当每个问题被正确回答后，他们也需要改变颜色，因此当单击正确的单选按钮时，问题的背景颜色会立即发生变化，例如从白色变为蓝色。我相信这很简单，我似乎无法弄清楚从哪里开始做。任何帮助正确的方向表示赞赏。这里是我的测验的例子，以及我目前对Javascript的评价。进行测验并需要根据Javascript中的正确选择更改背景颜色

if (jQuery) { 
 
    var checkAnswers = function() { 
 
    var answerString = ""; 
 
    var answers = $(":checked"); 
 
    answers.each(function(i) { 
 
     answerString = answerString + answers[i].value; 
 
    }); 
 
    $(":checked").each(function(i) { 
 
     var answerString = answerString + answers[i].value; 
 
    }); 
 
    checkIfCorrect(answerString); 
 
    }; 
 

 
    var checkIfCorrect = function(theString) { 
 
    if (parseInt(theString, 16) === 811124566973) { 
 
     var d = document.getElementById("question1"); 
 
     var e = document.getElementById("question3"); 
 
     var f = document.getElementById("question5"); 
 
     var g = document.getElementById("question7"); 
 
     var h = document.getElementById("question9"); 
 
     var i = document.getElementById("question2"); 
 
     var j = document.getElementById("question4"); 
 
     var k = document.getElementById("question6"); 
 
     var l = document.getElementById("question8"); 
 
     var m = document.getElementById("question10"); 
 
     d.className += "correctOdd"; 
 
     e.className += "correctOdd"; 
 
     f.className += "correctOdd"; 
 
     g.className += "correctOdd"; 
 
     h.className += "correctOdd"; 
 
     i.className += "correctEven"; 
 
     j.className += "correctEven"; 
 
     k.className += "correctEven"; 
 
     l.className += "correctEven"; 
 
     m.className += "correctEven"; 
 
     $("h1").text("You Win!"); 
 
     $("canvas").show(); 
 
    } 
 
    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="quiz"> 
 
    <div id="question1"> 
 
    <div class="question"> 
 
     Which is not a main file type that we use to make websites? 
 
    </div> 
 
    <input type="radio" name="question1" value="a" /> 
 
    <label>.html</label> 
 
    <input type="radio" name="question1" value="b" /> 
 
    <label>.exe</label> 
 
    <input type="radio" name="question1" value="c" /> 
 
    <label>.js</label> 
 
    <input type="radio" name="question1" value="d" /> 
 
    <label>.css</label> 
 
    </div>

来源

2016-03-05 TonyM

目前还不清楚你想如何改变颜色。你能进一步解释吗？ – vinit

我很抱歉不清楚。基本上，一旦我点击问题的正确答案，问题的背景颜色和答案就需要改变。 – TonyM

试试这个：

jQuery('input[value="a"]').click(function(){ 
if (jQuery(this).is(':checked')) 
{ 
jQuery('body').css("background-color", "blue"); 
} 
}); 
jQuery('input[value="b"]').click(function(){ 
if (jQuery(this).is(':checked')) 
{ 
    jQuery('body').css("background-color", "purple"); 
}

等

2重要事项： CSS（ “背景色”， “蓝色”）， “蓝色” 可以是RGB颜色。 jQuery（'input [value =“b”]'）是一个选择器，它选择所有具有值“b”的文档按钮。如果您有很多b值比例按钮，您可能更愿意使用Id进行选择。

检查它的工作情况：https://jsfiddle.net/Aschab/d4qmhuq1/

来源

2016-03-06 13:50:22 Aschab

非常感谢您的帮助。我能够编辑它并使其适用于我所需要的。 – TonyM

也许使用的onchange单选按钮（此代码未测试）

onchange="checkanswer(this)" 

function checkanswer(ele){ 
    if(ele.value=="A") 
     ele.style.backgroundColor = 'green'; 
    else 
     ele.style.backgroundColor = 'red'; 
}

但使用JavaScript检查答案是一个贫穷的行动，你应该看看在服务器端，否则，人们可以用ctrl + U找到正确的答案...

来源

2016-03-06 13:41:42 user5962153

进行测验并需要根据Javascript中的正确选择更改背景颜色

回答

相关问题