timer quiz ni berfungsi untuk korang buat countdown timer dalam sesuatu quiz. sebab quiz kalau takde timer bukan quiz namenye. So timer ni berfungsi terus mengira walaupun pengguna tu bertukar ke next page sekalipun. jadi timer tu akan static lah. sebelum ni aku dah berjaya buat, tapi untuk satu page jer lah.. tukar ke page lain timer pun terus jadi pening.
last2, hari ni berjaya juga selepas bertungkus lumus hampir sbulan mencari cara macam mana untuk buat timer quiz dalam jsp.
so duk pikir-pikir then dapat jugak idea. iaitu aku gunakan <iframe> tag yang mana quiz module tu aku letakkan dalam iframe dan timer tu aku letak dalam parent. so bawah ni coding setelah penat2 mencari
<%@ page contentType=”text/html; charset=utf-8″ language=”java” import=”java.sql.*” errorPage=”" %>
<jsp:include page=”include/Blankheader.jsp” />
<jsp:useBean id=”data” />
<jsp:useBean id=”test” scope=”session”/>
<jsp:useBean id=”temuduga” scope=”session”/>
<jsp:useBean id=”user” scope=”session”/>
<Script Language=”JavaScript”>/* Script By hafriz
http://mohdhafriz.com
Please Keep The Credit Above
No Copyrights but be fair
*/
function dis(mins,secs) {
var disp;
if(mins <= 9) {
disp = ” 0″;
} else {
disp = ” “;
}
disp += mins + “:”;
if(secs <= 9) {
disp += “0″ + secs;
} else {
disp += secs;
}
return(disp);
}function display(){
rtime=etime-ctime;
if (rtime>60)
m=parseInt(rtime/60);
else{
m=0;
}
s=parseInt(rtime-m*60);
if(s<10)
s=”0″+s
document.cd.disp.value = dis(m,s);
window.status=”Time Remaining : “+m+”:”+s
window.setTimeout(“checktime()”,1000)
}function settimes(){
alert(“You have 20 minutes time !”)
var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
etime=hours*3600+mins*60+secs;
etime+=3600; //letak masa korng. cth 20minit = 1200, 60 minit 3600
checktime();
}function checktime(){
var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
ctime=hours*3600+mins*60+secs
if(ctime>=etime){
expired();
}
else
display();
}function expired(){
alert(“Test Ended”);
location.href=”keputusan.jsp”; //Put here the next page
}
</Script>
<style type=”text/css”>
#txt {
border:none;
font-family:verdana;
font-size:16pt;
font-weight:bold;
border-right-color:#FFFFFF;
float:left;
position:absolute;top:5px;left:5px;height:22px;padding:5px;font-size:16pt;background-color:#000000;color:#ffffff;text-align:center
}<!–
.visibleDiv, #topLeft, #topRight, #bottomLeft, #bottomRight
{
position: fixed;
width: 150px;
border: solid 1px #e1e1e1;
vertical-align: middle;
background: #ffdab9;
text-align: center;
}#topLeft
{
top: 10px;
left: 10px;
}#topRight
{
top: 10px;
right: 10px;
}#bottomLeft
{
bottom: 10px;
left: 10px;
}#bottomRight
{
bottom: 10px;
right: 10px;
}
//–></style>
//bila page bukak terus timer start
<body onLoad=”settimes()”>
//paparan untuk countdown
<div id=”topLeft”>
<form name=”cd”>
<input id=”txt” readonly=”true” type=”text” value=”10:00″ border=”0″ name=”disp”>
</form></div>
//iframe kat sini
<iframe src=”quiz.jsp” frameborder=”0″ scrolling=”no” width=”750″ height=”1000″></iframe></body>
</html>
Related posts:
