Dynamic timer

All web design discussion, including Ultimate Quiz MOD support.

Moderator: CricketMX Forum Moderators

User avatar
quahappy
Happy, not Quappy
Happy, not Quappy
Posts: 2266
Joined: Fri Oct 10, 2008 8:56 pm
Location: South Yorkshire, UK

Thanks! Really appreciate it.

Look forward to hearing from you at your convenience. :D
If you don't ask...
User avatar
battye
Site Admin
Site Admin
Posts: 14391
Joined: Sun Jan 11, 2004 8:26 am
Location: Australia
Contact:

I don't have any phpBB2 setups anywhere, so I'm doing this on memory a bit while looking at the files, so unfortunately I'm not able to test this for you!

Open overall_header.tpl, and find:

Code: Select all

</head>
Before, add:

Code: Select all

<script type="text/javascript" src="http://www.YOURWEBSITEADDRESS.com/CountDown.js"></script>
<script type="text/javascript">
window.onload=WindowLoad;
function WindowLoad(event) {
	ActivateCountDown("CountDownPanel", 100);
}
</script>
Replace your YOURWEBSITEADDRESS with your real website address.

Now, create the file CountDown.js and fill it with this code:

Code: Select all

--CountDown.js
var _countDowncontainer=0;
var _currentSeconds=0;

function ActivateCountDown(strContainerID, initialValue) {
	_countDowncontainer = document.getElementById(strContainerID);
	
	if (!_countDowncontainer) {
		alert("count down error: container does not exist: "+strContainerID+
			"\nmake sure html element with this ID exists");
		return;
	}
	
	SetCountdownText(initialValue);
	window.setTimeout("CountDownTick()", 1000);
}

function CountDownTick() {
	if (_currentSeconds <= 0) {
		alert("your time has expired!");
		return;
	}
	
	SetCountdownText(_currentSeconds-1);
	window.setTimeout("CountDownTick()", 1000);
}

function SetCountdownText(seconds) {
	//store:
	_currentSeconds = seconds;
	
	//get minutes:
	var minutes=parseInt(seconds/60);
	
	//shrink:
	seconds = (seconds%60);
	
	//get hours:
	var hours=parseInt(minutes/60);
	
	//shrink:
	minutes = (minutes%60);
	
	//build text:
	var strText = AddZero(hours) + ":" + AddZero(minutes) + ":" + AddZero(seconds);
	
	//apply:
	_countDowncontainer.innerHTML = strText;
}

function AddZero(num) {
	return ((num >= 0)&&(num < 10))?"0"+num:num+"";
}
And upload it into your root directory. (ie. usually called public_html in an FTP client)

In templates/subSilver/quiz_play_input_answer_body.tpl, find:

Code: Select all

		<tr>
			<td class="row1" width="100%" align="center" valign="middle" height="100%" colspan="2">
				<span class="genmed">
					{L_INPUT_INFORMATION}
				</span>
			</td>
		</tr>
After, add:

Code: Select all

		<tr>
			<td class="row1" width="100%" align="center" valign="middle" height="100%" colspan="2">
				<span class="genmed">
					Time remaining: <span id="CountDownPanel"></span>
				</span>
			</td>
		</tr>
Do the same with quiz_play_multiple_choice_body.tpl, but add the above code after this:

Code: Select all

		<tr>
			<td class="row1" width="100%" align="center" valign="middle" height="30" colspan="2">
				<span class="genmed">
					{L_MULTIPLE_INFORMATION}
				</span>
			</td>
		</tr>
And after this for quiz_play_true_false_body.tpl:

Code: Select all

		<tr>
			<td class="row1" width="100%" align="center" valign="middle" height="30" colspan="2">
				<span class="genmed">
					{L_TRUE_FALSE_INFORMATION}
				</span>
			</td>
		</tr>
CricketMX.com in 2022: Still the home of bat's, rat's and other farmyard animals!

"OK, life [as you chose to define it] repeats until there are no more lessons to be learned." - nrnoble (June 12, 2005)
"the new forum looks awesome, it's getting bigger & better" - p2p-sharing-rules (11 Jan, 2008)
"Looks like CMX is not only getting bigger...but, also getting better!!" - moongirl (14 Dec, 2007)
User avatar
quahappy
Happy, not Quappy
Happy, not Quappy
Posts: 2266
Joined: Fri Oct 10, 2008 8:56 pm
Location: South Yorkshire, UK

MANY thanks for your reply battye! I will be hopefully getting all this done later this evening when the kids are tucked up in bed. Will let you know how I get on.

Thanks again! :D
If you don't ask...
User avatar
quahappy
Happy, not Quappy
Happy, not Quappy
Posts: 2266
Joined: Fri Oct 10, 2008 8:56 pm
Location: South Yorkshire, UK

Right. I finally got round to doing this. Did all the required edits and creation of the .js file, which was uploaded to root of my test forum. Ran a test quiz but all I'm getting is:

Time remaining:

... and no countdown. :(

I've also tried clearing the templates (have eXtreme Styles MOD installed) and browser cache (just to double-check as this has happened to me before where it kept reloading old data and not the new lol)... still nothing.

Does the "CountDownPanel" (in templates/quiz tpl files) parameter need calling globally (includes/functions... )? Or is there something else that requires doing? Or have I ballsed up? lol. Honestly though, I have rechecked everything.

Sorry to be a pain battye and hope you can assist further. Thanks.
If you don't ask...
User avatar
battye
Site Admin
Site Admin
Posts: 14391
Joined: Sun Jan 11, 2004 8:26 am
Location: Australia
Contact:

I got your PM and had a look at the templates, I think you have made the edits correctly. It might be something conflicting (maybe the template handles "spans" in a way that is causing the timer not to display). Or it might even be something in the Javascript.

Try this:

Everywhere where you put:

Code: Select all

Time remaining: <span id="CountDownPanel"></span>

Replace with:

Code: Select all

Time remaining: <div id="CountDownPanel"></div>
In case that doesn't work, I think I will start looking for alternative Javascript timers... hopefully something a little bit simpler (I don't know any Javascript :))
CricketMX.com in 2022: Still the home of bat's, rat's and other farmyard animals!

"OK, life [as you chose to define it] repeats until there are no more lessons to be learned." - nrnoble (June 12, 2005)
"the new forum looks awesome, it's getting bigger & better" - p2p-sharing-rules (11 Jan, 2008)
"Looks like CMX is not only getting bigger...but, also getting better!!" - moongirl (14 Dec, 2007)
User avatar
quahappy
Happy, not Quappy
Happy, not Quappy
Posts: 2266
Joined: Fri Oct 10, 2008 8:56 pm
Location: South Yorkshire, UK

Thanks for looking at my site battye - appreciate that!

I've done what you suggested and still no countdown timer I'm afraid. :(

Is there anywhere else where the Countdown.js file could go?
If you don't ask...
User avatar
battye
Site Admin
Site Admin
Posts: 14391
Joined: Sun Jan 11, 2004 8:26 am
Location: Australia
Contact:

Hmm, try this then.

Remove this from overall_header.tpl

Code: Select all

<script type="text/javascript">
window.onload=WindowLoad;
function WindowLoad(event) {
   ActivateCountDown("CountDownPanel", 100);
}
</script>

Replace the contents of CountDown.js with:

Code: Select all

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var up,down;var min1,sec1;var cmin1,csec1,cmin2,csec2;
function Minutes(data) {
for(var i=0;i<data.length;i++) 
if(data.substring(i,i+1)==":") 
break;  
return(data.substring(0,i)); 
}
function Seconds(data) {        
for(var i=0;i<data.length;i++) 
if(data.substring(i,i+1)==":") 
break;  
return(data.substring(i+1,data.length)); 
}
function Display(min,sec) {     
var disp;       
if(min<=9) disp=" 0";   
else disp=" ";  
disp+=min+":";  
if(sec<=9) disp+="0"+sec;       
else disp+=sec; 
return(disp); 
}

function Down() {       
cmin2=1*Minutes(document.sw.beg2.value);        
csec2=0+Seconds(document.sw.beg2.value);        
DownRepeat(); 
}
function DownRepeat() { 
csec2--;        
if(csec2==-1) { 
csec2=59; cmin2--; 
}       
document.sw.disp2.value=Display(cmin2,csec2);   
if((cmin2==0)&&(csec2==0)) 
alert("Time Up!");     
else down=setTimeout("DownRepeat()",1000); 
}
// End -->
</SCRIPT>
Then in overall_header.tpl find where it says <body and add in onload="Down()" with a space between body and onload.

Then in each of the places where it says:

Code: Select all

<div id="CountDownPanel"></div>
Replace with:

Code: Select all

<input type="hidden" name="beg2" value="0:31">			<input type="text" name="disp2" size="7" onload="Down()">
This is different code (the one I use on Online-Scrabble in fact, so hopefully this will work better :))
CricketMX.com in 2022: Still the home of bat's, rat's and other farmyard animals!

"OK, life [as you chose to define it] repeats until there are no more lessons to be learned." - nrnoble (June 12, 2005)
"the new forum looks awesome, it's getting bigger & better" - p2p-sharing-rules (11 Jan, 2008)
"Looks like CMX is not only getting bigger...but, also getting better!!" - moongirl (14 Dec, 2007)
User avatar
quahappy
Happy, not Quappy
Happy, not Quappy
Posts: 2266
Joined: Fri Oct 10, 2008 8:56 pm
Location: South Yorkshire, UK

Really appreciate your help here. Thanks!

I've done all that but I'm a little confused (doesn't take much to confuse me lol) about how the CountDown.js script gets called. I'm still not getting a countdown timer. :(

I've also tried renaming CountDown.js to countdown.js to ensure there is no case sensivity issue and it's not that. The CountDown.js has also been moved and tested from html root, test/ folder root and in template folder to no avail.

Before in <template>/overall_header.tpl, the Body onload contained: <body onload="PreloadFlag = true;">. I changed it to: <body onload="Down()">. As there was a " ; " beforehand, I had also tried: <body onload="Down();"> and no result there either.

So keen to get this working as I really believe this will be the crowd puller for members at my site... and eliminate cheats (i.e. search engines lol).

Thanking you in advance again to any help. :D
If you don't ask...
User avatar
quahappy
Happy, not Quappy
Happy, not Quappy
Posts: 2266
Joined: Fri Oct 10, 2008 8:56 pm
Location: South Yorkshire, UK

I bet it's something ridiculously simple I'm doing wrong somewhere. Got to be. I just can't see where lol.
If you don't ask...
User avatar
battye
Site Admin
Site Admin
Posts: 14391
Joined: Sun Jan 11, 2004 8:26 am
Location: Australia
Contact:

Sorry for the delay in replying. I don't think you are doing anything wrong, whatever it is it will just be trial and error... we will find the right combination soon I am confident of it :)

What happens if you use this?

Code: Select all

<body onload="PreloadFlag = true; Down();">
CricketMX.com in 2022: Still the home of bat's, rat's and other farmyard animals!

"OK, life [as you chose to define it] repeats until there are no more lessons to be learned." - nrnoble (June 12, 2005)
"the new forum looks awesome, it's getting bigger & better" - p2p-sharing-rules (11 Jan, 2008)
"Looks like CMX is not only getting bigger...but, also getting better!!" - moongirl (14 Dec, 2007)
User avatar
quahappy
Happy, not Quappy
Happy, not Quappy
Posts: 2266
Joined: Fri Oct 10, 2008 8:56 pm
Location: South Yorkshire, UK

No worries! :D

Nothing at all I'm afraid. :(

Just the text - Time Remaining, and an empty box to the right of it.
If you don't ask...
User avatar
battye
Site Admin
Site Admin
Posts: 14391
Joined: Sun Jan 11, 2004 8:26 am
Location: Australia
Contact:

I've taken another look at your test site. It looks like this line might be missing (add it just before </head> in overall_header.tpl)

Code: Select all

<script type="text/javascript" src="http://www.YOURWEBSITEADDRESS.com/CountDown.js"></script>
Don't forget to edit the YOURWEBSITEADDRESS part :)
CricketMX.com in 2022: Still the home of bat's, rat's and other farmyard animals!

"OK, life [as you chose to define it] repeats until there are no more lessons to be learned." - nrnoble (June 12, 2005)
"the new forum looks awesome, it's getting bigger & better" - p2p-sharing-rules (11 Jan, 2008)
"Looks like CMX is not only getting bigger...but, also getting better!!" - moongirl (14 Dec, 2007)
User avatar
quahappy
Happy, not Quappy
Happy, not Quappy
Posts: 2266
Joined: Fri Oct 10, 2008 8:56 pm
Location: South Yorkshire, UK

Inserted code into overall_header.tpl file. Cleared eXtreme Styles cache (and browser cache) and still no timer. :cry:

If it help, you are more than welcome to use eXtreme Styles MOD at my test site to make any edits you think will help get this up and running. The test site is only where I do all testing of MOD's before installing them into my "live" one. When it gets in a mess, I simply remove it and install a fresh copy of phpBB2. ;)

I really appreciate all your time and patience battye. :D
If you don't ask...
User avatar
quahappy
Happy, not Quappy
Happy, not Quappy
Posts: 2266
Joined: Fri Oct 10, 2008 8:56 pm
Location: South Yorkshire, UK

Hiya battye,

I've been fiddling around and came across this site: http://forums.aspfree.com/code-bank-54/ ... 89373.html (Which I realised after is already mentioned in first page of this topic!!)

I thought... I'll give it a go.... and still nothing. But! By accident, I had inserted the code you see below (which was originally in overall_header.tpl) into quiz_play_input_answer_body.tpl (and other two quiz_play files):

Code: Select all

<script type="text/javascript">
window.onload=WindowLoad;
function WindowLoad(event) {
	ActivateCountDown("CountDownPanel", 100);
}
</script>
... at the top of each file. And the timer appears! Also, I changed:

Code: Select all

<span class="genmed">
               Time remaining: <span id="CountDownPanel"></span>
            </span>
to:

Code: Select all

               Time remaining: <span id="CountDownPanel"></span>
I'm mystified though why that is working when technically the <script> code should really be in overall_header.tpl file BEFORE </head> but doesn't seem to work that way.

Now here's the question now.... is there any way of "passing" the UQM timer variable (set in admin panel) the <script> that is now in quiz_play tpl files?

If the UQM timer is set at say, 10 seconds per question, this means if a Member creates a quiz with 5 questions, the overall time would be 50 seconds. The actual countdown timer would theoretically be incorrect. The only way to solve this would be for all members to set ten questions per quiz (no less, no more) so that the timer in CountDownPanel will always read 100 (1min and 40 seconds in total). I hope I'm making sense!

If I've got the above wrong and it is possible, I'd would love to know. :D
If you don't ask...
User avatar
quahappy
Happy, not Quappy
Happy, not Quappy
Posts: 2266
Joined: Fri Oct 10, 2008 8:56 pm
Location: South Yorkshire, UK

Is the above feasible battye? ;)
If you don't ask...
Post Reply