Forum:

HTML Pages with CSS and JavaScript

Need Help with starting a timer in Javascript

Greenhorn

Posts: 27

posted 7 years ago

Hi All I have two pages Timer.jsp and Questions.jsp The codes are given below timer .jsp=

function Tick() {
        if (TotalSeconds <= 0) {
                alert("Time's up!")
                return;
        }

TotalSeconds -= 1;
        UpdateTimer()
        window.setTimeout("Tick()", 1000);
}
function UpdateTimer() {
        var Seconds = TotalSeconds;
        
        var Days = Math.floor(Seconds / 86400);
        Seconds -= Days * 86400;

var Hours = Math.floor(Seconds / 3600);
        Seconds -= Hours * (3600);

var Minutes = Math.floor(Seconds / 60);
        Seconds -= Minutes * (60);

var TimeStr = ((Days > 0) ? Days + " days " : "") + LeadingZero(Hours) + 
		":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds)

Timer.innerHTML = TimeStr;
}

function LeadingZero(Time) {

return (Time < 10) ? "0" + Time : + Time;

}
</script>

<html>
<body>
<style type="text/css">
body *
{
    font-family: Verdana, sans-serif;
    font-size: 12px;
}

body
{
    margin: 0;
    padding-top: 5px;
}

h1 
{
    font-family: 'Trebuchet MS', Tahoma, Verdana, sans-serif; 
    font-size: 17px;    
    padding: 5px;
    padding-left: 0px;
    color: #808080;
}

a 
{
    color: #2ba2cd; 
    text-decoration: none; 
}

img
{
    vertical-align: middle;
    border: 0px;
}

/* ---------------------------------------------------------- */

a:hover 
{
    text-decoration: underline;
}

hr.bar
{
    BORDER-TOP-WIDTH: 0px;
    BORDER-LEFT-WIDTH: 0px; 
    BORDER-BOTTOM-WIDTH: 0px; 
    COLOR: #d4d4d4;       
    HEIGHT: 5px; 
    BACKGROUND-COLOR: #f2f2f2; 
    BORDER-RIGHT-WIDTH: 0px
}

/* ---------------------------------------------------------- */

.tp-p-instruction
{
    padding-left: 15px;
    background-image: url('/_files/images/website/arrow-bullet.gif');
    background-position: left;
    background-repeat: no-repeat;
    color: #808080;        
}

/* ---------------------------------------------------------- */

.tp-page-wrap 
{
    width: 990px;
    text-align: left;
    margin: 0 auto;
    padding: 0px;
}

.div-tabs-container
{
   padding: 10px;
   border : 2px solid #5eac1a;
}

.div-tab-container 
    {
        padding: 10px;
    }
        
/* ---------------------------------------------------------- */

.tbl-menu *
{
        font-size: 11px;
}

.tbl-menu td
    {
        padding: 4px;
        font-size: 11px;
        font-weight: bold;
    }
    
    .tbl-menu td.normal
    {
        padding: 5px;  
        background-image: url('/_files/images/website/bg-blue-menu.gif');
        background-repeat: repeat-x;
        border-right : 1px solid #fff; 
        border-bottom : 1px solid #fff; ; 
    }
    
    .tbl-menu td.current
    {
        border-bottom: 0px; 
        border-right : 1px solid #fff;   
        background-image: url('/_files/images/website/bg-green-menu.gif');
        background-repeat: repeat-x; 
    }
     
    .tbl-menu td.disabled
    {
        padding: 5px;  
        background-image: url('/_files/images/website/bg-gray-menu.png');
        background-repeat: repeat-x;
        border-right : 1px solid #fff; 
        border-bottom : 1px solid #fff; ; 
    }
     
    .tbl-menu td a.menu
    {
        font-family: Verdana, Tahoma, sans-serif;
        font-size: 11px;
        color: #fff;
        font-weight: bold;
        padding-right: 10px;
        padding-left: 10px;
        text-decoration: none; 
    }

.tbl-menu td a.menu:hover
    {
         color: #E1FFE9;
    }

/* ---------------------------------------------------------- */
    
.bix-div-container
{
    width: 100%;
}

.bix-td-direction
    {
        border: 1px solid #ddd;
        border-left: 5px solid #eee;
        padding: 5px;
    }    
    
        .bix-td-direction  p, .bix-td-direction li
        {   
            font-family: Arial, Verdana;
            font-size: 13px;
            padding: 0px;
        }

.bix-tbl-container
    {
        margin-bottom: 20px;
        border-bottom: 1px dashed gray;
    }

.bix-td-qno
        {
            font-family: Verdana, Arial, Tahoma;
            font-size: 12px;
            width:30px;
            padding-top: 5px;
        }

.bix-td-qtxt
        {
            font-family: Verdana, Arial, Tahoma;
            font-size: 12px;
            line-height: 17px;
            padding-top: 5px;
        }

.bix-td-option 
        {
            font-family: Verdana, Tahoma;
            padding:5px;
            margin: 5px;
            font-size: 12px;
            border: 2px solid #FFFFFF;
        }
        
        .bix-td-radio
        {
            padding-bottom: 10px;
            
        }
            
        .bix-inner-td-option
        {
            font-family: Verdana, Tahoma, Arial;
            font-size: 12px;
        }
        
        .bix-div-answer
        {
            margin-top: 5px;
            margin-bottom: 10px;
            border-left: 5px solid #ddf8c2;
            padding-left: 10px;
        }        
        
/* ---------------------------------------------------------- */ 
        
.tp-div-submit
{        
    background-color: #fbfbfb;
    margin-top:20px; 
    padding:10px; 
    border: 1px dashed #ccc;
}

.tp-td-rightinfo
{
    padding: 15px;
}

.tp-td-rightinfo *
{
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 12px;
}

.ib-green
{
    color: #5eac1a;
}
     
.ib-dgray
{
    color: #606060;
}

.ib-gray
{
    color: #808080;
}

.ib-answered
{
    font-weight: bold;
    color: #5eac1a;
    font-size: 15px;
}     
</style>
<center>
<div class="tp-page-wrap" style="width: 950px">
<table id="tp-tbl-header" width="100%" cellpadding="0" cellspacing="0" border="0" style="padding-bottom:2px;"><tr>
            <td width="30%" align="left">
                <img src="logo.gif" alt="InidBIX.com" />  
            </td>
            <td width="40%" align="center">  
            </td>
            <td width="30%" align="right" valign="middle">
               <img src="online-test.gif" alt="Online Test" />         
            </td>
        </tr></table>
		<hr class="bar">
        <div align="center" style="padding-top:10px; padding-bottom:10px;"> <script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
        <hr class="bar">
        <input id="hdnTitleID" type="hidden" value="7" />

<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td width="50%" valign="middle">
                            <h1 style="margin-left:0;">Java Programming Test 1</h1>
                         </td>
                         <td width="50%" align="right" valign="middle">
                            <span id="idTimerSpan" style="color: #808080; display:none;">
Time Left: <b id="idTimerLCD">00:30:00</b></span>
                         </td>
                         </tr></table>
                         <input type="hidden" id="hdnTestTitleID" value="13" />
                         <input type="hidden" id="hdnTestID" value="61" />
                         <input type="hidden" id="hdnInitialTimer"  value="1800" />
                         <input type="hidden" id="hdnTimer"  value="1800" />

<div id="divIntroduction" style="display:none">
                        <b>Online Test > Online Java Programming Test > Java Programming Test 1 (Mock Test)</b>
                   </div>    
                   <input type="hidden" value="2" id="idAgentType">

<table class="tbl-menu" cellpadding="0" cellspacing="0" border="0" style="margin: 0px">
    <tr>
        <td id="lnkTestTitle_TD"    class="current" nowrap="nowrap">
<a id="lnkTestTitle" class="menu jq-menu" href="javascript: void(0);">Java Programming</a></td>
        <td id="lnkResultStatus_TD" class="current" style="display:none" nowrap="nowrap">
<a id="lnkResultStatus" class="menu jq-menu" href="javascript: void(0);">Result & Statistics</a></td>
    </tr>
    </table>
    
    <div class="div-tabs-container"> 
        <table cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td width="60%" valign="top"> 
                <div id="divInitiator" style="padding:25px; padding-top:5px;" align="center">
                     <div id="divLoading" align="center">
                        <br /><img src="progress.gif" alt="Loading..." />
<span style="color:#808080">  Loading Test...</span>
                     </div>
					 
					 
<div style="width:90%;height:40%;border:5px solid green;">

<div align="left">
          <p class="ib-green" style="font-size:12px; font-familty: Verdana,
		  sans-serif; align="center"><b>Instruction:</b></p>
          <p class="tp-p-instruction">Total number of questions : <b>20</b>.</p>
          <p class="tp-p-instruction">Time alloted : <b>30</b> minutes.</p>
          <p class="tp-p-instruction">Each question carry 1 mark, no negative marks.</p>
         </div>
		 <div id='timer'>
            <input type="button" value=" Start Test ..." id="btnStartTest" 
onClick="location.href='Questions.jsp'" onClick="CreateTimer('timer', 1800);"/>
                     </div>
</div>					 
					
</body>
</html>
</body>
<html>

and Questions.jsp =

<%@ page import ="java.util.*"%>
<%@ page import ="java.io.*"%>

<html>
<head>
<title>Radio Button</title>
	
</head>

<body>
<center>
<style type="text/css">
body *
{
    font-family: Verdana, sans-serif;
    font-size: 12px;
}

body
{
    margin: 0;
    padding-top: 5px;
}

h1 
{
    font-family: 'Trebuchet MS', Tahoma, Verdana, sans-serif; 
    font-size: 17px;    
    padding: 5px;
    padding-left: 0px;
    color: #808080;
}

a 
{
    color: #2ba2cd; 
    text-decoration: none; 
}

img
{
    vertical-align: middle;
    border: 0px;
}

/* ---------------------------------------------------------- */

a:hover 
{
    text-decoration: underline;
}

/* ---------------------------------------------------------- */

</style>
<div class="tp-page-wrap" style="width: 950px">
<table id="tp-tbl-header" width="100%" cellpadding="0" cellspacing="0" border="0" style="padding-bottom:2px;"><tr>
            <td width="30%" align="left">
                <img src="logo.gif" alt="InidBIX.com" />  
            </td>
            <td width="40%" align="center">  
            </td>
            <td width="30%" align="right" valign="middle">
               <img src="online-test.gif" alt="Online Test" />         
            </td>
        </tr></table>
		<hr class="bar">
        <div align="center" style="padding-top:10px; padding-bottom:10px;"> <script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
        <hr class="bar">
        <input id="hdnTitleID" type="hidden" value="7" />
		<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td width="50%" valign="middle">
                            <h1 style="margin-left:0;">Java Programming Test 1</h1>
                         </td>
                         <td width="50%" align="right" valign="middle">
                            <span id="idTimerSpan" style="color: #808080; display:none;">
Time Left: <b id="idTimerLCD">00:30:00</b></span>
                         </td>
                         </tr></table>
                         <input type="hidden" id="hdnTestTitleID" value="13" />
                         <input type="hidden" id="hdnTestID" value="61" />
                         <input type="hidden" id="hdnInitialTimer"  value="1800" />
                         <input type="hidden" id="hdnTimer"  value="1800" />
                         
						 
						 
						 
</table>

<% BufferedReader br= new BufferedReader(new FileReader("C:/tomcat/webapps/myJSP/temp.txt"));
String line=null;
String wrd=null;
while((line=br.readLine())!=null)
{
Scanner sc = new Scanner(line);%>

<br/>

<table class="bix-tbl-container" cellspacing="0" cellpadding="0" border="0" width="100%"><tr>
             
<pre><code class="java">public class ArrayTest 
{ 
    public static void main(String[ ] args)
    { 
        float f1[ ], f2[ ]; 
        f1 = new float[10]; 
        f2 = f1; 
        System.out.println("f2[0] = " + f2[0]); 
    } 
}
</code></pre>
</table>
</div>
                                     
<%  }%><br>
 
<%
if(sc.hasNext("2.1"))
{
String word[]=line.split(":");
wrd= word[1];%>
<input name="radioButton1" type="radio" value="1" checked="checked"/> <%out.println(wrd);%>
<%}
if(sc.hasNext("2.2"))
{
String word[]=line.split(":");
wrd= word[1];%>
<input name="radioButton1" type="radio" value="2" /> <%out.println(wrd);%>
<% }
if(sc.hasNext("2.3"))
{
String word[]=line.split(":");
wrd= word[1];%>
<input name="radioButton1" type="radio" value="3" /><%out.println(wrd);%>
<% }
if(sc.hasNext("2.4"))
{
String word[]=line.split(":");
wrd= word[1];%>
<input name="radioButton1" type="radio" value="4" /> <%out.println(wrd);%>
<br>
</div>
<div style="width:100%;border-top:1px dashed #000000;line-height:0px;"></div>
<%  } %>
<% } %>

</form>
</div>
</center>
</body>
</html>

Now i want when i click on the starttest button on timer.jsp it takes me to Questions.jsp which it does and starts a countdown timer there for 30:00 munites this is where i need help . This is a project i am doing please if anybody can help.

It should be like the website http://www.indiabix.com/online-test/java-programming-test/61 . In this website when you clik on starttest button where it redirects to another page and starts the timer on the left hand side of the page . Please if anybody can help it would be of great help to me

Rob Crowther

author

Posts: 297

I like...

posted 7 years ago

How is this question different from your last one? What is the point of having JavaScript in timer.jsp if that page isn't even loaded when you want the timer to be running?

Read my books: Hello! HTML5 & CSS3 | HTML5 in Action | Read my blog

Don't get me started about those stupid light bulbs.