자바스크립트를 이용한 시간제한 레이어를 만들 수 있을까요?

자바스크립트를 이용한 시간제한 레이어를 만들 수 있을까요? 정보

자바스크립트를 이용한 시간제한 레이어를 만들 수 있을까요?

본문

write.skin.php에 여러개의 레이어를 이용해서 간단한 테스트 페이지를 만들려고 합니다.
일단은 아래와 같이 write.skin.php에 여러개의 레이어를 만들어서 테스트 페이지를 만들었습니다.
그런데 각 레이어마다 타이머를 둬서 각기 다른 시간제한을 줘 다음레이어로 강제적으로 넘어가게 만들고 싶습니다.

<form>

<div id="step1" style="display: block;">
다음레이어에 대한 안내페이지
<a href="#none" onclick="document.getElementById('step1').style.display='none';document.getElementById('step2').style.display='block';">테스트시작</a>
</div>

<div id="step2" style="display: none;">
제한시간 3분의 타이머 1이 표시가 되고 20개 정도의 문제가 표시됩니다. <input~>
<a href="#none" onclick="document.getElementById('step2').style.display='none';document.getElementById('step3').style.display='block';">다음단계</a>
</div>

<div id="step3" style="display: none;">
다음 레이어에 대한 안내페이지
<a href="#none" onclick="document.getElementById('step3').style.display='none';document.getElementById('step4').style.display='block';">테스트시작</a>
</div>

<div id="step4" style="display: none;">
제한시간 1분 30초의 타이머 2가 표시가 되고 10개 정도의 문제가 표시됩니다.<input~>
<a href="#none" onclick="document.getElementById('step4').style.display='none';document.getElementById('step5').style.display='block';">다음단계</a>
</div>

<div id="step5" style="display: none;">
마지막페이지
<input type="submit" name="button" value="전송" />
</div>

</form>

step1의 테스트시작 버튼을 누르면 step2로 넘어가면서 동시에 step2의 타이머1이 작동하기 시작하여야합니다. 제한 시간이 완료되면 step3으로 강제적으로 넘어가게되고 시간이 완료되기 전에 step2의 다음단계 버튼을 누르면 타이머1은 작동이 멈추게 하고 싶습니다. 이런식으로 여러개의 타이머를 각각의 레이어에서 각기 다른 제한시간을 두고 사용하고 싶습니다.

고수님들 도와주세요..

댓글 전체

장군전사 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

08.02.22 10:14:09

퀴즈하려고 하시는거 아닌가요?

이거 응용하시면될거여요.. 자바스크립트로 구현한 시간제한(10초)있는 거거던요..ㅎㅎ

<html>
<head>
<title>시간제한 퀴즈</title>

<script language="javascript">
var delay=10; //시간설정
var correctAnswers=new Array("a","a","a","a","a"); //정답

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. 블루비 운영진과 닮은 연예인은 ?</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. 다음중 광역시가 아닌곳은?</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) www.naver.com</a><br>
<a href="javascript:void(0)" onclick="check_answer('b')">b) www.blueb.co.kr</a><br>
<a href="javascript:void(0)" onclick="check_answer('c')">c) blueb.co.kr</a><br>
<a href="javascript:void(0)" onclick="check_answer('d')">d) blueb.kr</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) 웹개발자를 위한 사이트</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="quizScore" style="display:none">
</div>

</body>
</html>

퀴즈하려고 하시는거 아닌가요?

이거 응용하시면될거여요.. 자바스크립트로 구현한 시간제한(10초)있는 거거던요..ㅎㅎ

var q_num=1;
var timer;
var layer;
var clock=delay;
var score=0;

window.onload=show_question;
</script>
</head>

<body>

제한시간 : <B><span id="timeLeft"></span></B> 초<br>
<br>
<div id="answerBoard">&nbsp;</div>
<br>

<div id="question3" style="display:none">
<b>3. 블루비 도메인이 아닌것은?</b><br>
<a href="javascript:void(0)" onclick="check_answer('a')">a) www.naver.com</a><br>
<a href="javascript:void(0)" onclick="check_answer('b')">b) www.blueb.co.kr</a><br>
<a href="javascript:void(0)" onclick="check_answer('c')">c) blueb.co.kr</a><br>
<a href="javascript:void(0)" onclick="check_answer('d')">d) blueb.kr</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) 웹개발자를 위한 사이트</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>

</body>
</html>

장군전사 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

08.02.22 11:23:00

시간을 각기 다르게 줄수있도록 조정하여봤습니다.ㅎㅎ
<html>
<head>
<title>시간</title>

<script language="javascript">
var delay_time=new Array("10","20","30","40"); // 시간비교치 배열
var correctAnswers=new Array("a","a","a","a","a"); //정답
var delay=10; // 시간 초기값
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=" ";
if (delay_time[q_num-1]==10){
delay=15;
} else if(delay_time[q_num-1]==20){
delay=20;
} else if(delay_time[q_num-1]==30){
delay=25;
} else if(delay_time[q_num-1]==40){
delay=30;
} else {
delay=10;
}
clock=delay;
layer.style.display="none";

<div id="question1" style="display:none">
<b>1. 블루비 운영진과 닮은 연예인은 ?</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. 다음중 광역시가 아닌곳은?</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) www.naver.com</a><br>
<a href="javascript:void(0)" onclick="check_answer('b')">b) www.blueb.co.kr</a><br>
<a href="javascript:void(0)" onclick="check_answer('c')">c) blueb.co.kr</a><br>
<a href="javascript:void(0)" onclick="check_answer('d')">d) blueb.kr</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) 웹개발자를 위한 사이트</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="quizScore" style="display:none">
</div>

</body>
</html>

시간을 각기 다르게 줄수있도록 조정하여봤습니다.ㅎㅎ 
<html>
<head>
    <title>시간</title>

</body>
</html>

모두가 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

08.02.24 00:35:27

아무것도 안나오는데요?
아래 소스에 적용해서 만들어 주시면 안될까요?
그리고 해당레이어에 남은시간 카운트도 되면 좋을것 같습니다.
<form>

<div id="step1" style="display: block;">
다음레이어에 대한 안내페이지
<a href="#none" onclick="document.getElementById('step1').style.display='none';document.getElementById('step2').style.display='block';">테스트시작</a>
</div>

<div id="step2" style="display: none;">
제한시간 3분의 타이머 1이 표시가 되고 20개 정도의 문제가 표시됩니다. <input~>
<a href="#none" onclick="document.getElementById('step2').style.display='none';document.getElementById('step3').style.display='block';">다음단계</a>
</div>

<div id="step3" style="display: none;">
다음 레이어에 대한 안내페이지
<a href="#none" onclick="document.getElementById('step3').style.display='none';document.getElementById('step4').style.display='block';">테스트시작</a>
</div>

<div id="step4" style="display: none;">
제한시간 1분 30초의 타이머 2가 표시가 되고 10개 정도의 문제가 표시됩니다.<input~>
<a href="#none" onclick="document.getElementById('step4').style.display='none';document.getElementById('step5').style.display='block';">다음단계</a>
</div>

<div id="step5" style="display: none;">
마지막페이지
<input type="submit" name="button" value="전송" />
</div>

</form>

아무것도 안나오는데요?
아래 소스에 적용해서 만들어 주시면 안될까요?
그리고 해당레이어에 남은시간 카운트도 되면 좋을것 같습니다.
<form>

<div id="step1" style="display: block;"> 
다음레이어에 대한 안내페이지 
<a href="#none" onclick="document.getElementById('step1').style.display='none';document.getElementById('step2').style.display='block';">테스트시작</a> 
</div>

<div id="step2" style="display: none;"> 
제한시간 3분의 타이머 1이 표시가 되고 20개 정도의 문제가 표시됩니다. <input~> 
<a href="#none" onclick="document.getElementById('step2').style.display='none';document.getElementById('step3').style.display='block';">다음단계</a> 
</div>

<div id="step3" style="display: none;"> 
다음 레이어에 대한 안내페이지  
<a href="#none" onclick="document.getElementById('step3').style.display='none';document.getElementById('step4').style.display='block';">테스트시작</a> 
</div>

<div id="step4" style="display: none;"> 
제한시간 1분 30초의 타이머 2가 표시가 되고 10개 정도의 문제가 표시됩니다.<input~> 
<a href="#none" onclick="document.getElementById('step4').style.display='none';document.getElementById('step5').style.display='block';">다음단계</a> 
</div>

<div id="step5" style="display: none;"> 
마지막페이지 
<input type="submit" name="button" value="전송" /> 
</div>

</form>

장군전사 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

08.02.25 10:09:20

설마요.. 다 제가 테스트 해본건데..
님꺼에 맞추신면 될텐데..

동그리75 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

08.02.28 14:01:10

넘..복잡하당..
도저히 나로서는 잘 모르겠음...ㅠㅠ

자바스크립트를 이용한 시간제한 레이어를 만들 수 있을까요? > 그누4 질문답변

그누4 질문답변

자바스크립트를 이용한 시간제한 레이어를 만들 수 있을까요? 정보

본문

댓글 전체

회원로그인