add a counter in a multiple choices with javascript - javascript

I am currently developing an e-learning website with php
I want to add a script to make a counter growing by 40 s for each question of a multiple choice.
that's what I did but it's just a simple counter that don't make any action after the time is left:
<span id="countdown" class="timer"></span>
<script>
var seconds = 4;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Buzz Buzz";
} else {
seconds--;
}
}
var countdownTimer = setInterval('secondPassed()', 1000);
</script>-->
  if time passes then he goes on to the next question.

Write a function which provide next question. If your next question is in other page, use window.location.href = urlOfNextQuestion; in nextQuestion function. If you have an array of questions and you have a counter for them, replace current question with new one.
var seconds = 4;
function secondPassed() {
var minutes = Math.round((seconds - 30) / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Buzz Buzz";
nextQuestion();
} else {
seconds--;
}
}
var countdownTimer = setInterval('secondPassed()', 1000);
function nextQuestion() {
// window.location.href = urlOfNextQuestion;
alert("here we go");
// You have an index of current and next question and show new question
}
<span id="countdown" class="timer"></span>

Related

JS CountDown no reload on refresh please

Well my code should be working but it isn't. Each time I reload the time, my Countdown start back at his initialised value.
Since I'm not familliar with JS you may be able to m'éclaircir the mind
<script>
var upgradeTime = 172801;
var seconds = upgradeTime;
function timer() {
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
function pad(n) {
return (n < 10 ? "0" + n : n);
}
document.getElementById('countdown').innerHTML = pad(days) + ":" + pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()',1000,function() {
secondPassed();
if (seconds === 0) {
eraseCookie(seconds);
} else {
createCookie(seconds, seconds, 7);
}
});
</script>
How do I call it
<h1>Server Release in : <span id="countdown" class="timer"></span></h1>
I just want my timer to not refresh each time you reload the page.
Any kind of help would be appreciated
Here you go.
var upgradeTime = 172801; //Timer length in ms
var timerMS = window.localStorage.getItem("date");
startTimer();
function timer() {
var difference = timerMS - Date.now();
if (difference <= 0) {
startTimer();
return;
}
var seconds = (difference / 1000).toFixed(0),
days = Math.floor(seconds / 24 / 60 / 60),
hoursLeft = Math.floor((seconds) - (days * 86400)),
hours = Math.floor(hoursLeft / 3600),
minutesLeft = Math.floor((hoursLeft) - (hours * 3600)),
minutes = Math.floor(minutesLeft / 60),
remainingSeconds = seconds % 60;
function pad(n) {
return (n < 10 ? "0" + n : n);
}
document.getElementById('countdown').innerHTML = pad(days) + ":" + pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
setTimeout(timer, 1000);
}
function startTimer() {
if (!timerMS || timerMS < Date.now()) {
timerMS = Date.now() + upgradeTime;
window.localStorage.setItem("date", timerMS);
}
timer();
}

Separate watch time in one document [duplicate]

I am trying to create a multiple countdown timers using Javascript.
Facing issues with displaying the time and setInterval cleartInterval events of Javascript.
My code is on jsfiddle: here
Javascript:
function secondPassed(row, secs) {
var seconds = secs;
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown'+row).innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer[row]);
document.getElementById('countdown'+row).innerHTML = "Buzz Buzz";
} else {
seconds--;
}
}
var countdownTimer = [];
function timer(row, min) {
var seconds = min * 60;
countdownTimer[row] = setInterval('secondPassed('+row+','+seconds+')', 1000);
}
timer(1, 3);
timer(2, 2);
timer(3, 5);
HTML:
Timer 1: <span id="countdown1" class="timer"></span>
<br/>
Timer 2: <span id="countdown2" class="timer"></span>
<br/>
Timer 3: <span id="countdown3" class="timer"></span>
There are a couple problems here.
First, the syntax for setting a timer function with parameters is wrong. See Pass parameters in setInterval function.
Second, you need to store the remaining seconds for each timer somewhere.
var timerData = [];
function secondPassed(row) {
var seconds = timerData[row].remaining;
var minutes = Math.round((seconds - 30) / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown' + row).innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(timerData[row].timerId);
document.getElementById('countdown' + row).innerHTML = "Buzz Buzz";
} else {
seconds--;
}
timerData[row].remaining = seconds;
}
function timer(row, min) {
timerData[row] = {
remaining: min * 60,
timerId: setInterval(function () { secondPassed(row); }, 1000)
};
}
timer(1, 3);
timer(2, 2);
timer(3, 5);
Working fiddle: http://jsfiddle.net/835xehna/4/

JavaScript countdown timer with cookies stops after one minute

I have this countdown timer. For some reason it stops counting after one minute - it just stops.
If I count for 55 minutes it stops at 54:00
If I count for 2 minutes it stops at 1:00
Any ideas how do I fix that so it continues up to zero?
Here is the JSFiddle link: Countdown timer with cookies
And the JS code:
function countdown(minutes) {
var seconds = 60;
var mins = minutes;
if(getCookie("minutes")&&getCookie("seconds"))
{
var seconds = getCookie("seconds");
var mins = getCookie("minutes");
}
function tick() {
var counter = document.getElementById("timer");
setCookie("minutes",mins,10)
setCookie("seconds",seconds,10)
var current_minutes = mins-1
seconds--;
counter.innerHTML =
current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
//save the time in cookie
if( seconds > 0 ) {
setTimeout(tick, 1000);
} else {
if(mins > 1){
// countdown(mins-1); never reach “00″ issue solved:Contributed by Victor Streithorst
setTimeout(function () { countdown(mins - 1); }, 1000);
}
}
}
tick();
}
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
countdown(55);
I don't know why you are using the cookies here but, putting that aside, your problem seems to be the following lines:
var seconds = getCookie("seconds");
var mins = getCookie("minutes");
In your code after you finished the first minute you call the countdown function again with a minute less. However, the lines above returns the minute variable back to its previous value. So you end up stuck in the same minute after one minute pass.
So, I assume, you need to get the time from the cookies only once (first time the countdown runs). You can use something like this:
var firstTime = true;
function countdown(minutes) {
var seconds = 60;
var mins = minutes;
if(firstTime && getCookie("minutes")&&getCookie("seconds"))
{
firstTime = false;
seconds = getCookie("seconds");
mins = getCookie("minutes");
}
...
Note that var is unnecessary in the if clause since you already
defined seconds and mins variables.
Code with day:hours:minute:second support.
Just add number of minutes into timer span.
For one day test, I entered 1440 minutes.
<html>
<body>
<span id="countdown" class="timer">1440</span>
<script type="text/javascript">
var first_time = true;
var countdownTimer;
var seconds = document.getElementById('countdown').innerHTML * 60;
//alert(seconds);
if(!isNaN(seconds) && seconds > 0 ) {
function timer() {
if(first_time) {
countdownTimer = setInterval('timer()', 1000);
first_time = false;
}
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = (days < 10 ? "0" : "") + days + ":" + (hours < 10 ? "0" : "") + hours + ":" + (minutes < 10 ? "0" : "") + minutes + ":" + (remainingSeconds < 10 ? "0" : "") + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
} else {
seconds--;
}
}
timer()
//var countdownTimer = setInterval('timer()', 1000);
}
</script>
</body>
</html>

Having multiple countdown timer events intervals in javascript

I am trying to create a multiple countdown timers using Javascript.
Facing issues with displaying the time and setInterval cleartInterval events of Javascript.
My code is on jsfiddle: here
Javascript:
function secondPassed(row, secs) {
var seconds = secs;
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown'+row).innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer[row]);
document.getElementById('countdown'+row).innerHTML = "Buzz Buzz";
} else {
seconds--;
}
}
var countdownTimer = [];
function timer(row, min) {
var seconds = min * 60;
countdownTimer[row] = setInterval('secondPassed('+row+','+seconds+')', 1000);
}
timer(1, 3);
timer(2, 2);
timer(3, 5);
HTML:
Timer 1: <span id="countdown1" class="timer"></span>
<br/>
Timer 2: <span id="countdown2" class="timer"></span>
<br/>
Timer 3: <span id="countdown3" class="timer"></span>
There are a couple problems here.
First, the syntax for setting a timer function with parameters is wrong. See Pass parameters in setInterval function.
Second, you need to store the remaining seconds for each timer somewhere.
var timerData = [];
function secondPassed(row) {
var seconds = timerData[row].remaining;
var minutes = Math.round((seconds - 30) / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown' + row).innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(timerData[row].timerId);
document.getElementById('countdown' + row).innerHTML = "Buzz Buzz";
} else {
seconds--;
}
timerData[row].remaining = seconds;
}
function timer(row, min) {
timerData[row] = {
remaining: min * 60,
timerId: setInterval(function () { secondPassed(row); }, 1000)
};
}
timer(1, 3);
timer(2, 2);
timer(3, 5);
Working fiddle: http://jsfiddle.net/835xehna/4/

Javascript countdown timer + PHP code inside JS

I need help with countdown timer in javascript.I found the code below in PHPJabbers. This code works fine, but when I reload the page the time goes back to its initial time. I want to retain the time even if I load the page. I want also to add PHP function inside if seconds == 0. I'm not sure if it's possible. Thanks in advance
<span id="countdown" class="timer"></span>
<script>
var seconds = 60;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Buzz Buzz";
} else {
seconds--;
}
}
var countdownTimer = setInterval('secondPassed()', 1000);
</script>
Check this, (implemented using cookies)
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
//check existing cookie
cook=getCookie("my_cookie");
if(cook==""){
//cookie not found, so set seconds=60
var seconds = 60;
}else{
seconds = cook;
console.log(cook);
}
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
//store seconds to cookie
setCookie("my_cookie",seconds,5); //here 5 is expiry days
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Buzz Buzz";
} else {
seconds--;
}
}
var countdownTimer = setInterval(secondPassed, 1000);
working jsFiddle
Nice solution by bhavesh.. If someone wants to show the days,hour,mins, seconds together then they can refer this code.
Reverse timer from javascript:
var target_date = new Date('Aug 01 2014 20:47:00').getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById('timeremaining');
var countdownTimer = setInterval(function () {
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
if(days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0 )
{
document.getElementById('timeremaining').innerHTML = '';
clearInterval(countdownTimer);
}
else
{
if(days>0)
{
days= days+'d,';
}
else
{
days='';
}
countdown.innerHTML ='( ' + days + checkTime(hours) + ':'+ checkTime(minutes) + ':' + checkTime(seconds) +' remaining)';
}
}, 1000);
function checkTime(i) {
if (i < 10) {i = '0' + i};
return i;
}

Categories