WoW! .... Закрыть .... Спасибо за поддержку.Но все же все неправильные ответы показывают красным цветом.Это позволит пользователю узнать, на какой вопрос он ответил неправильно.Эта часть в порядке.Но как только неправильные ответы помечаются красным (я имею в виду только неправильно выбранные тексты выбора радиокнопок, а не весь выбор вопросов и ответов
правильный ответ этой неправильной попыткичтобы показать его зеленым, чтобы просветить пользователя. И печальная часть в том, что я снова потерпел неудачу с CSS. Я хотел создать тест в блоге и добавил пользовательский CSS с условным тегом в html поста блоггера ..... НеРаботаю. Однако я добавлю здесь модифицированный код, чтобы вы получили ясную картину, если я поступаю правильно, как вы сказали. (Как и где добавить правила CSS внутри этого кода (если это то, что вы имеете в виду))
<!DOCTYPE HTML>
<html>
<body>
<title>Quiz Questions And Answers</title>
<div class="header">
<h1>Quiz Questions</h1>
</div>
<form id="quiz">
<div class="questions">
<p>
<b>1. He -------------------- it.</b><br/>
<label><input type="radio" name="q1" value="don't like" />don't like</label><br/>
<label><input type="radio" name="q1" value="doesn't like" />doesn't like</label><br/>
<label><input type="radio" name="q1" value="doesn't likes" />doesn't likes</label>
</p>
<hr>
<p><b>2. They -------------------- here very often.</b><br/>
<label><input type="radio" name="q2" value="don't come">don't come</label><br/>
<label><input type="radio" name="q2" value="doesn't come">doesn't come</label><br/>
<label><input type="radio" name="q2" value="doesn't comes">doesn't comes</label>
</p>
<hr>
<p><b>3. John and Mary -------------------- twice a week.</b><br/>
<label><input type="radio" name="q3" value="come">come</label><br/>
<label><input type="radio" name="q3" value="comes">comes</label><br/>
<label><input type="radio" name="q3" value="coming">coming</label><br/>
</p>
<hr>
<p>
<input type="button" value="Grade Me" id="scoreButton">
<input type="reset" value="Clear"><br/>
Number of score out of 15 = <input type="text" size="15" id="mark">
Score in percentage = <span id="percentage"></span>
<p>
</div>
</form>
<script>
var answers = ["doesn't like","don't come","come"];
var rads, quiz; // need to be set after load
window.addEventListener("load",function() { // when page loads
quiz = document.getElementById("quiz");
rads = quiz.querySelectorAll("input[type=radio]"); // all radios in the quiz
document.getElementById("scoreButton").addEventListener("click",function(e) { // on submit
var score = 0;
var checked = quiz.querySelectorAll("input[type=radio]:checked"); // all checked radios
for (var i=0;i<checked.length;i++) { // loop over all checked radios in the form
var idx = checked[i].name.substring(1)-1; //remove the q from the name - JS arrays start at 0
var correct = checked[i].value==answers[idx];
checked[i].closest("p").classList.toggle("error",!correct)
checked[i].closest("p").classList.toggle("correct",correct)
score += correct?3:-1; // this is called a ternary
}
var scoreper = Math.round(score * 100 / rads.length);
document.querySelector("#percentage").innerHTML = scoreper + "%";
quiz.mark.value = score;
});
});
</script>
</body>
</html>