Javascript测验验证

我的大脑已经完全空白。我有我做的3个问题测验的布局。我只是不知道我需要使用的JavaScript代码。一旦提交测验，它需要验证所有问题都有答案（我不想使用警报或提示说你没有做这个或那个）。我想用它突出显示红色或其他。回答后，我希望显示正确答案的数量。假设我从3中获得2分。它显示我有2右（我想使用innerHTML或使用appendChild）这是我如何把它设置了：Javascript测验验证

<!DOCTYPE html> 
<html> 
<head> 
<title>Quiz</title> 
<meta charset="utf-8"> 

</head> 
<body> 

<form> 
<p class="question1">1. Red and Blue gets what color?</p> 
<ul class="answers"> 
    <input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Green</label><br/> 
    <input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Purple</label><br/> 
    <input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Yellow</label><br/> 
</ul> 

<p class="question2">2. Trick or ?</p> 
<input type="text" name="q2" value="treat" id="q2t"> 

<p class="question3">3. What is the best movie series of all time?</p> 
<select> 
    <option name="q3" id="q3hp" value="hp">Harry Potter</option> 
    <option name="q3" id="q3twi" value="twi">Twilight</option> 
    <option name="q3" id="q3star" value="star">Star Wars</option> 
</select> 
<br><br> 
<button type="button" id="results">Submit Quiz</button> 
</form> 
<script> 

</script> 

</body> 
</html>

只是需要一些帮助，这

来源

2014-10-05 Chad

您可以使用[jQuery验证插件（http://jqueryvalidation.org /） – dippas 2014-10-05 01:53:44

你可以得到每个输入的元件（Q1 ，Q2，使用

document.getElementById()

然后，你可以通过使用值属性来获取每个元素的值，并检查它是否是空的（等于'Q3））。因为你发现你可以通过创建一个CSS类并将其添加到使用

element.className +=' redWarning'

而且每一个充满问题，你可以检查它是否是正确的，并添加一个向右的元素添加红色边框的每个空元素答案反击。在最后你得到的ID一个元素将包含正确的答案计数和你的innerHTML属性更改为反像这样

document.getElementById('answersContainer').innerHTML = counter + ' right answers!'

来源

2014-10-05 04:48:17 OryanM

Javascript测验验证

回答

相关问题