[ 초보를 위한 html 강좌. 퀴즈만들기 ]
html문서에 아래와 같은 코드를 입력하면,
간단한 퀴즈가 구성된다.
<html>
<head>
<script>
function checkval()
{var val ="1번문제의 정답";
if(val == (document.getElementById("출력1").value)){var val ="2번문제의 정답";
if(val == (document.getElementById("출력2").value){alert("모두다 정답입니다.");
window.open('https://gyool.net');
}
else{
alert("2번이 오답입니다.");
}
}else{
alert("1,2번 중 오답이 있습니다.");
}
}</script>
</head><body>
<form name="aform">
<input type="text" name="result" size=15 id="출력1"/><br />
<input type="text" name="result2" size=15 id="출력2"/><br />
<input type="button" id="btn" value="check" style= width:50 height=30 onclick="checkval()">
</form>
</body></html>
위의 코드는 두 개의 문제를 내고,
두 문제 모두 맞을 경우 지정된 url이 열리는 방식이다.
잘 이용하면 쿠폰이벤트나
간단한 무단 회원가입 방지기능으로 활용할 수 있다.
당연히 코드를 잘 수정하면
문제수를 늘릴수도 있다.
<html>
<head>
<script>
function checkval()
{var val ="1번문제의 정답";
if(val == (document.getElementById("출력1").value)){var val ="2번문제의 정답";
if(val == (document.getElementById("출력2").value)){var val ="3번문제의 정답";
if(val == (document.getElementById("출력3").value)){alert("모두다 정답입니다.");
window.open('https://gyool.net');
}
else{
alert("3번이 오답입니다.");
}
}else{
alert("2,3번 중 오답이 있습니다.");
}
}else{
alert("1,2,3번중 오답이 있습니다.");
}
}</script>
</head><body>
<form name="aform">
<input type="text" name="result" size=15 id="출력1"/><br />
<input type="text" name="result2" size=15 id="출력2"/><br />
<input type="text" name="result3" size=15 id="출력3"/><br />
<input type="button" id="btn" value="check" style= width:50 height=30 onclick="checkval()">
</form>
</body></html>
3문제로 코드를 수정한 것이다.
코드를 유심히 보면 알 수 있겠지만
if(val == (document.getElementById("inputbox ID").value))
이 부분이 정답을 검증하는 과정이고,
그에 대한 결과로 alert를 발생시키는 방식이다.
여러개의 inputbox의 값을 순차적으로 검증하면서
alert는 제일 깊이가 깊은 쪽에서부터 역순으로
else를 이용해 띄우게 된다.
그렇다보니 제일 depth가 깊은 곳은
모두 정답이 되는 것이고,
그 다음은 첫번째 else는 맨마지막 검증한 inputbox를 제외한
모든 문제가 정답이 되는 것이고,
두번째 else는 마지막에 검증한 두개의 inputbox를 제외한
모든 문제가 정답이 되는 것이다.
