Show text/html when js timer runs out?

Question

mands 0 Newbie Poster

15 Years Ago

Hi I need some help,

I currently have a timer that counts down and what I would like is when the times runs out it then displays text or html (answer to question). I currenlty have the timer counting down and a seperate js show answer link that will show the div.

Thanks in advance.

Mands

html-css javascript

3 Contributors
24 Replies
1K Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by essential

essential 84 Posting Shark

15 Years Ago

Hi mands,

Would you prefer a simple demo?

aashishn86 0 Junior Poster

15 Years Ago

hi this code would display it after 5 seconds...
you can style it with CSS and modify according to your need..

<html>
<head>
<script type="text/javascript">

function timestrt()
 {
 setTimeout("dispa()",5000);
 }
function dispa()
 {
 document.getElementById("cans").innerHTML="the correct answer is a";
 }


</script>
<body onload="timestrt();">
<p> please chose the correct option</p>
<input type="radio" id="ans">a
<br>
<input type="radio" id="ans">b
<div id="cans">
</div>
<input type="button" value="next>>">
</body>
</html>

hope it helps....

aashishn86 0 Junior Poster

15 Years Ago

hi this code would display it after 5 seconds...
you can style it with CSS and modify according to your need..

Thanks but the answers arent a choice they are detailed explanations more like a few paragraphs, they are currenlty sitting in a div: see below
<a href="javascript:InsertContent('c1');">
[Show Answer]
</a>{/source}
<div
id="c1"
style="display: none;
border-color: black;
background-color: grey;
border-style: solid;
border-width: 1px;
color: black;
font-weight: bold;
padding: 20px;
margin: 20px;">
answer here</div>

<script type="text/javascript" language="JavaScript"></script>
Its basically a timed question but the answer cant be seen until the time has ran out, the user will have to write their answer and then check it against the correct answer, which are detailed explanations almost like an essay. So as you see I need the answer to show when the time has ran out.
Thanks
do you mean to say that the user can see the correct answer only after the time has ran out , or can he see it after he finishes his own answer and click on show answer or something...
please post a sample question and answer...
and the steps that a user has to take after the page loads..

aashishn86 0 Junior Poster

15 Years Ago

do you mean something like this :

<html>
<head>
<script type="text/javascript">

function timestrt()
 {
 setTimeout("dispa()",5000);
 }
function dispa()
 {
 document.getElementById("cans").innerHTML="the answer goes here.this is the answer";
 }


</script>
<body onload="timestrt();">
<p>Q> blah blah.. fill in your answer</p>
<input type="text" id="ans">
<br>

<div id="cans">
</div>
</body>
</html>

aashishn86 0 Junior Poster

15 Years Ago

but this is limiting the time the user can take to answer the question....

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

mands 0 Newbie Poster · Answer 1 · 2009-06-30T18:04:34+00:00

Hi mands,
Would you prefer a simple demo?

Yes that would be great!! thanks very much

mands 0 Newbie Poster · Answer 2 · 2009-06-30T18:51:46+00:00

hi this code would display it after 5 seconds...
you can style it with CSS and modify according to your need..

Thanks but the answers arent a choice they are detailed explanations more like a few paragraphs, they are currenlty sitting in a div: see below
<a href="javascript:InsertContent('c1');">
[Show Answer]
</a>{/source}
<div
id="c1"
style="display: none;
border-color: black;
background-color: grey;
border-style: solid;
border-width: 1px;
color: black;
font-weight: bold;
padding: 20px;
margin: 20px;">
answer here</div>

<script type="text/javascript" language="JavaScript"></script>
Its basically a timed question but the answer cant be seen until the time has ran out, the user will have to write their answer and then check it against the correct answer, which are detailed explanations almost like an essay. So as you see I need the answer to show when the time has ran out.
Thanks

mands 0 Newbie Poster · Answer 3 · 2009-06-30T19:27:53+00:00

do you mean to say that the user can see the correct answer only after the time has ran out , or can he see it after he finishes his own answer and click on show answer or something...
please post a sample question and answer...
and the steps that a user has to take after the page loads..
Hi, they will click on their question of choice, then the page with the question on will load, at the moment the user can see the the answer by cliking on 'show answer' shown at the end of the question. In an ideal world I would prefer to have this available only after the time has ran out....hopefully avoiding the opportunity to cheat.

mands 0 Newbie Poster · Answer 4 · 2009-06-30T19:54:11+00:00

Yeah sort of, this is practise for the actual exam so the user really needs to hand write the answer for themselves, hence the timing, once the allowed time has passed I then need to display the answer somehow. The answers a will be mini essays and so will be worded differently by each user but the conclusion will be the same.

Thanks very much for your help so far

aashishn86 0 Junior Poster · Answer 5 · 2009-06-30T19:55:20+00:00

aashishn86 0 Junior Poster

15 Years Ago

so does the code solve your problem ?

mands 0 Newbie Poster · Answer 6 · 2009-06-30T21:11:56+00:00

mands 0 Newbie Poster

15 Years Ago

erm no sorry it doesnt.

aashishn86 0 Junior Poster · Answer 7 · 2009-06-30T21:17:02+00:00

may be i can try and help if you post more what excatly are you trying to do ?

essential 84 Posting Shark Featured Poster · Answer 8 · 2009-07-01T07:41:57+00:00

Try this demo:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */
html, body {
  border : none;
  font : normal normal normal 95%/1.4 Verdana, Arial, sans-serif;
  height : auto;
  margin : 0;
  padding : 0;
  min-width : 800px;
  text-align : center;
  width : auto; }

body {
  background-color : #f0f0f0;
  color : #405060; }

div {
   border : none;
   margin : 0;
   padding : 0; }

div#main {
   text-align : left;
   margin : 0 auto;
   width : 96%; }

legend {
   padding : .200em;
   font-weight : bold;
   font-size : 9pt; }

div#panel {
   clear : right;
   float : right;
   width : 50%; }

ul {
   list-style : none;
   color : #000;
   margin : 0 1em 0 1em;

   letter-spacing : 3px; } ul span { color : #006; }

div#left {
   clear : left;
   float : left;
   width : 50%; }

fieldset {
   border : 1px solid;
   margin : 0;
   padding : 0 1em 1em 1em; }

div.tube {
   padding : 1em; }
/* ]]> */
</style> 
<script type="text/javascript">
// <![CDATA[
var sClock;
var thisAnswer;
var getAnswer;
var showAnswer;
var timer = 0;
var limit = 10;
var clock = function() {
   countdown = setTimeout( "clock()", 1000 );
   timer = (( timer === 60 ) ? 0 : timer );
   (( timer === limit ) ? clearTimeout( countdown ) : countdown );
   timer = (( timer < 10 ) ? "0" : "" ) + timer;
   sClock = (( "getElementById" in document ) ? document.getElementById("counter") : document.all.counter );
   thisAnswer = (( "getElementById" in document ) ? document.getElementById("ans") : document.all.ans );

   showAnswer = (( "getElementById" in document ) ? document.getElementById("showAns") : document.all.showAns );

   getAnswer = (( "getElementById" in document ) ? document.getElementById("answer") : document.all.anwser ).value;
   (( sClock ) ? sClock.innerHTML = "Timer: " + timer : null );
   if (( timer * 1 ) === limit ) {
      if ( thisAnswer.value !== "blue" ) {
      showAnswer.innerHTML = "The correct answer is <b><span style=\"color : #00F\">blue</span></b>.";
      } 
   } ++timer;
};
var myAnswer = function() {
   if ( thisAnswer && getAnswer ) {
   thisAnswer.value = getAnswer;
      if ( thisAnswer.value === "blue" ) {
      clearTimeout( countdown );
      showAnswer.innerHTML = "<hr /><span style=\"color : #800080\">Congratulation you've won the game!</span></b>.";
      return true;
      } alert( "\nSorry, but ( " + thisAnswer.value + " ) is not the correct answer.\nPlease try again..." );
      return false;
   } alert( "Please you must provide some answer on the field!" );
}; window.onload = clock;
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="testform" action="#" onsubmit="return false">
<div id="left">
<fieldset><legend id="counter"></legend>
<h2>Javascript Live Demo!</h2>
<legend>Test Question:</legend>
<ul>
<li><p><input type="hidden" ids="ans" name="ans" value="" />What is the color value of <span>#0000FF</span>?</p>
<div id="showAns"></div>
</li>
</ul>
</fieldset>
</div>
<div id="panel">
<div class="tube">
<label for="answer">Answer: <input type="text" id="answer" name="answer" size="30" value="" /></label> <input type="button" value="ENTER" onclick="myAnswer();" /></div></div>
</form>
</div>
</body>
</html>

A bit in a hurry, hope it gets what you need...

mands 0 Newbie Poster · Answer 9 · 2009-07-01T13:59:12+00:00

thats great essential but still not what I need, here is the basic code for the page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Q1</title>
</head>

<body>
Q1. Possible 3 marks, 5 minutes to complete 
<form name="counter"><input type="text" size="8"
name="d2"></form>

<script>
<!--
//
 var milisec=0
 var seconds=300
 document.counter.d2.value='300'

function display(){
 if (milisec<=0){
    milisec=9
    seconds-=1
 }
 if (seconds<=-1){
    milisec=0
    seconds+=1
 }
 else
    milisec-=1
    document.counter.d2.value=seconds+"."+milisec
    setTimeout("display()",100)
}
display()
-->
</script>

 

A 64 yr old man presented with tiredness, pallor and shortness of breath. A bone marrow sample was sent for cytogenetic analysis. The request card stated ?acute leukaemia. The karyotpe showed 2 of 10 cells to have a normal male karyotype, the other 8 cells had the same abnormal karyotpye.

You are provided with a metaphase typical of the abnormal cells (Fig A - below)

 

<img src="am-Q1-Fig-A.jpg" alt="Fig A"  /> 

 

A) Analyse the cell and write your report to the referring haematologist.

 

At completion of induction chemotherapy the patient was assessed as being in haematological and clinical remission. FISH testing on bone marrow (fig B) showed two types of cells, Cell 1 is tyoical of 90% of cells. Cell 2 is typical of the remaining 10%.

 



<img src="am-Q1-Fig-B.jpg" alt="Fig B"  /> 

B) Interpret the FISH signals and write your report to the referring haematologist.
<a href="javascript:InsertContent('c1');">

[Show Answer]
</a>



<div
   id="c1"
   style="display: none;
      border-color: black;
      background-color: grey;
      border-style: solid;
      border-width: 1px;
      color: black;
      font-weight: bold;
      padding: 20px;
      margin: 20px;">
a) 47,XY,+8 [8]/46,XY[2] typical of AML (and MDS)<br>

b)10% cells trisomy 8, patient not in cytogenetic remission.</div>


<script type="text/javascript" language="JavaScript"><!--
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
    document.getElementById(tid).style.display = "";
    }
else {
    document.getElementById(tid).style.display = "none";
    }
}
//--></script>
</body>

</html>

I hope this helps to understand what I need. I would like the 'show answer' to only be available to view after the time has run out/passed by. I dont need the users to submit an answer as there are too many variables in the answers they could give....plus this is a self study thing to help prepare them for an exam.
Thanks for all of your help xx

mands 0 Newbie Poster · Answer 10 · 2009-07-01T14:49:21+00:00

apologies didnt realise I had to encase my code in code tags..cant go back and edit either..:-(

essential 84 Posting Shark Featured Poster · Answer 11 · 2009-07-01T16:19:37+00:00

Here's it again:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */
html, body {
  border : none;
  font : normal normal normal 95%/1.4 Verdana, Arial, sans-serif;
  height : auto;
  margin : 0;
  padding : 0;
  min-width : 800px;
  text-align : center;
  width : auto; }

body {
  background-color : #f0f0f0;
  color : #405060; }

div {
   border : none;
   margin : 0;
   padding : 0; }

div#main {
   text-align : left;
   margin : 0 auto;
   width : 96%; }

div.tube {
   padding : 1em; }
/* ]]> */
</style> 
<script type="text/javascript">
// <![CDATA[
var seconds = 59;
var minutes = 5;

var InsertContent = function( tid ) {
   tid = (( "getElementById" in document ) ? document.getElementById( tid ) : document.all[ tid ] );
   tid.style.display = (( tid.style.display === "none" ) ? "block" : "none" );
};

var display = function() {
var zero = (( minutes < 10 ) ? "0" : "" );
   minutes -= (( seconds === 0 ) ? 1 : 0 );
   seconds = (( seconds <= 0 ) ? 59 : seconds );
   seconds = (( seconds < 10 ) ? "0" : "" ) + seconds;
   timer = setTimeout( "display()", 1000 );
   document.counter.d2.value = zero + minutes + ":" + seconds;
   if ( minutes === 0 ) {
   clearTimeout( timer );
   delete timer;
   InsertContent( "c1" );
   }
   --seconds;
}; window.onload = display;
// ]]>
</script>
</head>
<body>
<div id="main">
<p>Q1. Possible 3 marks, 5 minutes to complete</p>
<form id="counter" name="counter" action="javascript:void(0);">
<div><input style="text-align : center;" type="text" size="8" id="d2" name="d2" value="" /></div></form>
<p>A 64 yr old man presented with tiredness, pallor and shortness of breath. A bone marrow sample was sent for cytogenetic analysis. The request card stated ?acute leukaemia. The karyotpe showed 2 of 10 cells to have a normal male karyotype, the other 8 cells had the same abnormal karyotpye.<br />
You are provided with a metaphase typical of the abnormal cells (Fig A - below)
<img src="am-Q1-Fig-A.jpg" alt="Fig A" /></p>
<ol style="margin : 0 1em 1em 1.500em; list-style : upper-alpha;">

<li><p>Analyse the cell and write your report to the referring haematologist.
At completion of induction chemotherapy the patient was assessed as being in haematological and clinical remission. FISH testing on bone marrow (fig B) showed two types of cells, Cell 1 is tyoical of 90% of cells. Cell 2 is typical of the remaining 10%.
<img src="am-Q1-Fig-B.jpg" alt="Fig B" /></p></li>

<li><p>Interpret the FISH signals and write your report to the referring haematologist.
<a href="javascript:InsertContent('c1');">[Show Answer]</a></p><li>
</ol>

<div id="c1" style="display: none; border: 1px solid #000;background-color: #aaa; color: #000; font-weight: bold;padding: 20px; margin: 20px;">
<ol style="margin : 0 1em 1em 1.500em; list-style : upper-alpha;">
<li>47,XY,+8 [8]/46,XY[2] typical of AML (and MDS)</li>
<li>10% cells trisomy 8, patient not in cytogenetic remission.</li>
</ol>
</div>
</body>
</html>

mands 0 Newbie Poster · Answer 12 · 2009-07-01T16:30:12+00:00

Thanks timer is great!!! the answer can still be seen before the time runs out though......is it possible to change it so the answer cant be seen until then?
You didnt need to format the text but thanks for doing so :-)

essential 84 Posting Shark Featured Poster · Answer 13 · 2009-07-01T16:54:13+00:00

The problem about this, is that the user can actually view its answer in the source code viewer. But you can apply some encryption over it, to hide the actual answer for the basic user.

mands 0 Newbie Poster · Answer 14 · 2009-07-01T17:00:36+00:00

The problem about this, is that the user can actually view its answer in the source code viewer. But you can apply some encryption over it, to hide the actual answer for the basic user.

yeah i have that covered already, the answer shows when there is 59 seconds...what do I need to change for it to show at 0 seconds?

and thanks very much youve done wonders for me!

essential 84 Posting Shark Featured Poster · Answer 15 · 2009-07-01T17:09:46+00:00

essential 84 Posting Shark

15 Years Ago

I'l post back when i get home...

essential

essential 84 Posting Shark Featured Poster · Answer 16 · 2009-07-01T17:16:53+00:00

I've missed that spot:

Just simply add another statement for the seconds variable.
Like this:

if ( minutes === 0 && seconds === 0 ) {
   clearTimeout( timer );
   delete timer;
   InsertContent( "c1" );
   }

mands 0 Newbie Poster · Answer 17 · 2009-07-01T17:41:10+00:00

I've missed that spot:
Just simply add another statement for the seconds variable.
Like this:
if ( minutes === 0 && seconds === 0 ) {
   clearTimeout( timer );
   delete timer;
   InsertContent( "c1" );
   }

ok I did that and now its counting past 0 into minus numbers? thanks again

mands 0 Newbie Poster · Answer 18 · 2009-07-01T18:18:19+00:00

Its ok Ive worked it out....Thanks very much for taking the time to help me out :-) xxx

essential 84 Posting Shark Featured Poster · Answer 19 · 2009-07-01T19:09:55+00:00

This script a bit tricky, if you are careless implementing its code lines.

Here is the moded version, just simply replace the entire script block into this format:

<script type="text/javascript">
// <![CDATA[
var seconds = 59;
var minutes = 5;
var InsertContent = function( tid ) {
   tid = (( "getElementById" in document ) ? document.getElementById( tid ) : document.all[ tid ] );
   tid.style.display = (( tid.style.display === "none" ) ? "block" : "none" );
}; var display = function() {
var zero = (( minutes < 10 ) ? "0" : "" );
   minutes -= (( seconds === 0 ) ? 1 : 0 );
   seconds = (( minutes !== 0 && seconds === 0 ) ? 59 : seconds * 1 );
   seconds = (( seconds < 10 ) ? "0" : "" ) + seconds;
   timer = setTimeout( "display()", 1000 );
   document.counter.d2.value = zero + minutes + ":" + seconds;
   if ( minutes === 0 && parseInt( seconds ) === 0 ) {
   clearTimeout( timer );
   delete timer;
   InsertContent( "c1" );
   return; 
   } --seconds;
}; window.onload = display;
// ]]>
</script>

sorry for the delays...

essential