I have a 1st Inline table with a 3 seconds count down and when it reaches to 0 (zero) I would like to load a 2nd Inline block by itself. When counter === 0.
It is a game and you have 3 secs to choose the answer per block, you either click or let the game take you the next block once the timer gets to zero.
If click on the link, it does take me to 2nd block. The problem is combining the countdown and transitioning to a 2nd or 3rd block by itself.
I've tried several things but with no success. Any idea on how to fix my code? I will really appreciate it. Hopes this makes sense.
HTML:
<button class='inline' href="#Set1" onclick="CountDown()">Start here...</button>
<div style='display:none'>
<div id='GameSet1'>
<table width="100%">
<tr>
<td>
<a class="Set2" href="#">Click here to open 2nd Set</a>
</td>
<td>
<b>Time left: <div id="count1">3</div></b>
</td>
</tr>
</table>
</div>
</div>
<div style='display:none'>
<div id='GameSet2'>
<table width="100%">
<tr>
<td>
<a class="SetN" href="#">Something else here</a>
</td>
<td>
<b>Time left: <div id="countN">3</div></b>
</td>
</tr>
</table>
</div>
</div>
Code here when (counter === 0) does not work.
CODE: (Uses jQuery)
<script>
$(document).ready(function () {
$(".inline").colorbox({
inline: true,
width: "1000",
height: "850"
});
});
function CountDown() {
var counter = 3;
setInterval(function () {
counter--;
if (counter >= 0) {
span = document.getElementById("count1");
span.innerHTML = counter;
}
if (counter === 0) {
$(".Set2").colorbox({
inline:true,
href:"#GameSet2"
});
clearInterval(counter);
}, 1000);
}
</script>
As far as I can understand, you have a set of panels and you want each panel to be displayed for 3 seconds unless an link is clicked. If this is the case, I have a solution. Unfortunately, my example does not work inside jsFiddle because everything is surrounded in a function. Also, I decided to not use jQuery because I have never used it before and when I tried to use the color box, it said it wasn't defined.
The code is:
</head>
<body>
<button onclick="start(this)" class="inline">Start Here</button>
<div style="display:none" id="Set1">
<table border="1">
<tr>
<td>
<a href="#" onclick="start(this)">Click here to open 2nd Set</a>
</td>
<td>
Time Left: <span id="Time1"></span>
</td>
</tr>
</table>
</div>
<div style="display:none" id="Set2">
<table border="1">
<tr>
<td>
<a href="#" onclick="done()">Something else here</a>
</td>
<td>
Time Left: <span id="Time2"></span>
</td>
</tr>
</table>
</div>
<script>
window.onload = function(){
//You could use colorbox here
/*
$(".inline").colorbox({
inline: true,
width: "1000",
height: "850"
});
*/
}
//This is the Question Number. It should start at zero.
num = 0
//This is a object where all the counters are going to be stored
count = {}
function Count(count,func,func2){
/*
This is an Object Constructor. This will hold all the timers and make
it easier to create and kill a timer. The instanses will also hold the
data of the timer.
*/
this.count = count
thisParent = this
this.kill = function(){
//This is a function for stopping the timer
clearInterval(thisParent.counter)
if(func2 != undefined){
//Calls the function when the timer ends.
//The function was passed in as a argument
func2()
}
}
function oneCount(){
//This function is executed every second
//This function is passed in as an argument and is called every second.
//The Parent Object is passed into it as the argument
func(thisParent)
//Decrements count
thisParent.count -= 1
//Stops timer at zero
if(thisParent.count < 0){
thisParent.kill()
}
}
//This executes it once to prevent delay
oneCount()
//The counter is stored in ObjectInstance.counter
this.counter = setInterval(oneCount,1000)
}
function start(el){
num += 1
max = 2
element = document.getElementById("Set"+String(num))
element.style.display = "block"
if(num == 1){
el.style.display = "none"
}else{
document.getElementById("Set"+String(num-1)).style.display = "none"
count[num-1].kill()
}
element2 = document.getElementById("Time"+num.toString())
function CountFunction(o,el){
el.innerHTML = o.count
}
function End(){
if(num<max){
start(num+1)
}
}
count[num] = new Count(3,function(n){CountFunction(n,element2)},End)
}
function done(){
alert("That Was The Last Question")
}
</script>
<body>
<html>
The URL is here: