아래는 본예제의 자바스크립트 입니다.
<html> <head> <title>해피CGI</title>
<script language="javascript"> var delay=10; //시간설정 var correctAnswers=new Array("c","b","d","c","d"); //정답
var q_num=1; var timer; var layer; var clock=delay; var score=0;
function show_question(){ if (layer=eval("document.all.question"+q_num)){ layer.style.display="inline"; document.all.timeLeft.innerHTML=clock; hide_question(); } else { document.all.timeLeft.innerHTML=0; document.all.quizScore.innerHTML="당신은 "+(q_num-1)+"문제중 "+score+"개를 맞췄습니다."; document.all.quizScore.style.display="inline"; } }
function hide_question(){ if (clock>0) { document.all.timeLeft.innerHTML=clock; clock--; timer=setTimeout("hide_question()",1000); } else { clearTimeout(timer); document.all.answerBoard.innerHTML=" "; clock=delay; layer.style.display="none"; q_num++; show_question(); } }
function check_answer(answer){ if (correctAnswers[q_num-1]==answer){ score++; document.all.answerBoard.innerHTML="<font color=blue><b>정답입니다.</b></font>"; } else { document.all.answerBoard.innerHTML="<font color=red><b>땡! 틀렸습니다.</b></font>"; } clock=0; clearTimeout(timer); timer=setTimeout("hide_question()",700); }
window.onload=show_question; </script> </head>
<body>
제한시간 : <B><span id="timeLeft"></span></B> 초<br> <br> <div id="answerBoard"> </div> <br>
<div id="question1" style="display:none"> <b>1. 해피CGI가 판매하는 솔루션이 아닌것은?</b><br> <a href="javascript:void(0)" onclick="check_answer('a')">a) 해피부동산</a><br> <a href="javascript:void(0)" onclick="check_answer('b')">b) 해피뉴스</a><br> <a href="javascript:void(0)" onclick="check_answer('c')">c) 해피버스데이</a><br> <a href="javascript:void(0)" onclick="check_answer('d')">d) 해피자동차</a><br> </div>
<div id="question2" style="display:none"> <b>2. RGB색의 기본이 아닌것은?</b><br> <a href="javascript:void(0)" onclick="check_answer('a')">a) 빨강</a><br> <a href="javascript:void(0)" onclick="check_answer('b')">b) 주황</a><br> <a href="javascript:void(0)" onclick="check_answer('c')">c) 초록</a><br> <a href="javascript:void(0)" onclick="check_answer('d')">d) 파랑</a><br> </div>
<div id="question3" style="display:none"> <b>3. 태왕사신기에서 물을 관장하며 동쪽의 수호를 담당하는 신의 이름은?</b><br> <a href="javascript:void(0)" onclick="check_answer('a')">a) 현준</a><br> <a href="javascript:void(0)" onclick="check_answer('b')">b) 현미</a><br> <a href="javascript:void(0)" onclick="check_answer('c')">c) 현철</a><br> <a href="javascript:void(0)" onclick="check_answer('d')">d) 현무</a><br> </div>
<div id="question4" style="display:none"> <b>4. 유재석이 담당하는 프로그램중 아닌것은?</b><br> <a href="javascript:void(0)" onclick="check_answer('a')">a) 무한도전</a><br> <a href="javascript:void(0)" onclick="check_answer('b')">b) 해피투게더</a><br> <a href="javascript:void(0)" onclick="check_answer('c')">c) 지피지기</a><br> <a href="javascript:void(0)" onclick="check_answer('d')">d) 진실개임</a><br> </div>
<div id="question5" style="display:none"> <b>5. 반지의 제왕에서 프로도의 발치수는?</b><br> <a href="javascript:void(0)" onclick="check_answer('a')">a) 290mm</a><br> <a href="javascript:void(0)" onclick="check_answer('b')">b) 300mm</a><br> <a href="javascript:void(0)" onclick="check_answer('c')">c) 310mm</a><br> <a href="javascript:void(0)" onclick="check_answer('d')">d) 글쓴이도 모른다.</a><br> </div>
<div id="quizScore" style="display:none"> </div>
</body> </html>
|