자바 스크립트 퀴즈 유효성 확인

내 마음은 완전히 비어 있습니다. 내가 만든 3 가지 질문 퀴즈의 레이아웃이 있습니다. Javascript 코드를 알아 내야합니다. 일단 퀴즈를 제출하면, 모든 질문에 답이 있는지 확인해야합니다 (나는 경고를 사용하고 싶지 않습니다. 빨간색이나 뭔가를 강조하는 스타일로 스타일을 지정하고 싶습니다. 답변을 받으면 정답 수를 표시하고 싶습니다. 내가 3 명 중 2 명을 얻는다 고 가정 해 봅시다. (Q1 자바 스크립트 퀴즈 유효성 확인

<!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처럼 카운터의 innerHTML 속성을 변경 /) – dippas

몇 가지 도움이 필요합니다 내가 여기에 내가 그것을 설정 한 방법이다 (I 싶어 사용 innerHTML을 나에 appendChild)이 권리를 가지고 표시 비어 있다면 그런 다음 ''같음 (Value 속성을 사용하여 각 요소의 값을 얻을 확인할 수 있습니다

document.getElementById()

를 사용하여, Q2, Q3)). 당신이 CSS 클래스를 생성하고

element.className +=' redWarning'

그리고 모든 작성 질문 당신이 잘 있는지 확인하고 오른쪽에 하나를 추가 할 수 있습니다에 사용 요소에 추가하여 빨간색 테두리를 추가 할 수 있습니다 찾을 각각의 빈 요소에 대해 답변 카운터. 끝에 당신은 정답이 계산이 포함됩니다 ID로 요소를 얻을 그렇게

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

출처

2014-10-05 04:48:17 OryanM

자바 스크립트 퀴즈 유효성 확인

답변

관련 문제