I will like to achieve something in a quiz system.
Right about now I have a quiz system that works perfectly well. It closes the quiz after 10:00 min is elapsed.
But what I want now is, for each of the question there should be a timer.
So Question 1 would have 10 secs, Question 2 would also have 10 secs down to Question 20.
So when you fail to answer any question within ten seconds, it automatically takes you to the next question.
Right about now, what happens is that you must click on the next question button before it takes you to the next question, which is what I want to change.
Below is the code that does the timer and submit after 10 min
<script>
//function that keeps the counter going
function timer(secs){
var ele = document.getElementById("countdown");
ele.innerHTML = "Your Time Starts Now";
var mins_rem = parseInt(secs/60);
var secs_rem = secs%60;
if(mins_rem<10 && secs_rem>=10)
ele.innerHTML = " "+"0"+mins_rem+":"+secs_rem;
else if(secs_rem<10 && mins_rem>=10)
ele.innerHTML = " "+mins_rem+":0"+secs_rem;
else if(secs_rem<10 && mins_rem<10)
ele.innerHTML = " "+"0"+mins_rem+":0"+secs_rem;
else
ele.innerHTML = " "+mins_rem+":"+secs_rem;
if(mins_rem=="00" && secs_rem < 1){
quiz_submit();
}
secs--;
//to animate the timer otherwise it'd just stay at the number entered
//calling timer() again after 1 sec
var time_again = setTimeout('timer('+secs+')',1000);
}
</script>
<script>
setTimeout(function() {
$("form").submit();
}, 600000);
</script>
Here is the code that does the onclick to next question
<script type="text/javascript">
$('.cont').addClass('hide');
count=$('.questions').length;
$('#question'+1).removeClass('hide');
$(document).on('click','.next',function(){
last= parseInt($(this).attr('id'));
nex = last+1;
$('#question'+last).addClass('hide');
$('#question'+nex).removeClass('hide');
});
$(document).on('click','.previous',function(){
last = parseInt($(this).attr('id'));
pre = last-1;
$('#question'+last).addClass('hide');
$('#question'+pre).removeClass('hide');
});
setTimeout(function() {
$("form").submit();
}, 120000);
</script>
Please note that I fetch my questions with Php Mysqli
Initialize a timeout into a variable at start. The callback should simulate a click on the next button. Use .click() to simulate. It will execute all click event listeners associated to the button.
You also have to reset the timer when button is clicked (manually or not).
EDIT: After discussing by comments, I guess that you have <button.next> tags for each question in your HTML, with a numeric ID. So I propose you to stock in a variable your current progression.
// Initializes
let currentQuestion = 1;
let question_timer = setTimeout(question_timeout_callback, 10000);
// Function which simulates the click.
function question_timeout_callback() {
// Simulates
$(document).find(`#${currentQuestion}`).click();
}
// your code...
// And in your click event listener:
$(document).on('click','.next', function () {
// Resets timer
clearTimeout(question_timer);
question_timer = setTimeout(question_timeout_callback, 10000);
// Update question tracking
currentQuestion++;
// your code...
});
// Do NOT forget to update .previous buttons with "currentQuestion--"
Now, do not forget to ask yourself how you will handle the possibility to come back to the previous question.
i would suggest different approach.
first, take the time-counting to the backend of your application (so user can't tamper with it).
when user begins quiz, save start time and user identifier into db.
implement timeout (2s interval?) to ask backend, how much time is left.
create simple script which loads remaining time from db (calculates how much time remains for current question) and returns it to the frontend.
php:
<?php
$user = (int) $_GET['user'];
$questionNumber = (int) $_GET['question'];
//connect to the db
//select eg. with PDO
$st = $db->prepare('SELECT start_time FROM quiz_completion WHERE user_id = :user');
$st->bindParam(':user', $user, PDO::PARAM_INT);
$startTimeRow = $sth->execute();
//calculate remaining time
$elapsed = time() - $startTimeRow['start_time'];
$borderTime = 10 * $questionNumber;
echo $borderTime - $elapsed;
exit(0);
with mocked GET & db: https://3v4l.org/MId0K
then in js just call this script with user identifier and question number. when less than zero is returned, move user to the next question.
js:
$.ajax('http://localhost/your_php_script.php?user='+user+'&question='+questionNumber).done(
function(response){
if (response < 0) {
//move to the next q.
} else {
//show remaining time?
}
});
with asking backend to get time, there is risk of waiting too long for an answer from php (when many users are completing the poll)
Related
I'm sure this question has been answered, before, but my searches are coming up empty.
I have a simple jQuery function (that slides in a box after the page has been scrolled down). It works fine.
However, how do I set cookies, or other method, to make it execute on the first page load and, then, on every 3rd page load of the session, after that?
A little snippet like this should work for you.
(function () {
// Get the countdown from localStorage
var countdown = Number(window.localStorage.getItem('countdown'));
// If countdown isn’t set it or if it has
// run a couple times it’ll be `0`
// Either way—we reset countdown and run the function
if (!countdown) {
countdown = 3;
// Run the function
}
// Update the countdown
window.localStorage.setItem('countdown', countdown - 1);
})();
These are both very instructive answers (my javascript skill is at the piece-it-together level). If it's helpful to someone, even though the question was for a javascript solution, I realized there might be a PHP solution, as well.
This worked, too:
<?php //Slide-in ad will show every x pages
$slide_ad_frequency=3;
session_start();
//increase the already-set counter by 1 or initiate the counter with a value of 1
if( isset( $_SESSION['counter'] ) )
{
$_SESSION['counter'] += 1;
}
else
{
$_SESSION['counter'] = 1;
}
//If counter equals the ad frequency setting
if($_SESSION['counter'] % $slide_ad_frequency == 0) : ?>
... Code to execute ...
<?php endif ?>
You can store the count of window loads on the sessionStorage so that data won't be lost on every reload. The data will be cleared when the tab is closed. If you want your data to not expire when the session ends, you should instead use localStorage; both have the same implementation.
window.onload = doSomething;
function doSomething() {
let count = sessionStorage.getItem('noOfPageLoads');
if( count ) { //if count is not null, increment it
count++;
sessionStorage.setItem('noOfPageLoads', count); //update the local storage
}
else { //if count is null, it's the first load, so put it in the local storage
count = 0;
sessionStorage.setItem('noOfPageLoads', count);
}
console.log('noOfPageLoads = '+ count)
if( count===0 || count===3 ) {
console.log('do something now');
//do what you want here
}
}
I'm making a webpage where user events are logged in.
To test the feature I made a small, independant webpage with a teaxtarea and a text input. The events logged are those performed on the input element.
I want to prevent the same event text to be shown multiple times in a row, but I can't seem to prevent them from showing up!
I also want to add a line to separate event groups 0.5 seconds after no other event happened, but the line seems to appear on every event trigger, evenif I use clearTimeout with the timeout ID.
Basically: I don't want any line to be repeated. If the last line is a separator line, then it must not add another one. Yet it doesn't see to work.
JSFiddle Demo
Here is my code:
JavaScript
var timerID = 0;
function addSeparateLine()
{
document.getElementById('listeEvenements').value += "--------------------\n";
}
function show(newEventText)
{
var eventListField = document.getElementById('listeEvenements');
var eventList = [];
if (eventListField.value.length > 0)
{
eventList = eventListField.value.split("\n");
}
var eventCounter = eventList.length;
if (eventList[eventCounter - 2] == newEventText)
{
clearTimeout(timerID);
newEventText = "";
}
timerID = setTimeout(addSeparateLine, 500);
if (newEventText !== "")
{
eventListField.value += newEventText + "\n";
}
return true;
}
HTML
<fieldset id="conteneurLogEvenements">
<legend>Events called from HTML attribute</legend>
<textarea id="listeEvenements" rows="25"></textarea>
<input id="controleEcoute" type="text" onBlur="show('Blur');" onchange="show('Change');" onclick="show('Click');" onfocus="show('Focus');" onMousedown="show('MouseDown');" onMousemove="show('MouseMove');" onMouseover="show('MouseOver');" onkeydown="show('KeyDown');"
onkeypress="show('KeyPress');" onkeyup="show('KeyUp');" />
</fieldset>
http://jsfiddle.net/z6kb4/2/
It sounds like what you want is a line that prints after 500 milliseconds of inactivity, but what your code currently says to do is "print a line 500 milliseconds after any action, unless it gets canceled". You can get better results by structuring the code more closely to your intended goal.
Specifically, instead of scheduling a new timeout every time an event occurs, simply start a loop when the first event occurs that checks the time that has elapsed since the most recent event received and then prints a line when the elapsed time exceeds the desired threshold (500 milliseconds). Something like:
function addSeparateLine() {
var elapsed = new Date().getTime() - lastEventTime;
if (elapsed >= 500) {
document.getElementById('listeEvenements').value += "--------------------\n";
clearInterval(timerID);
timerID = -1;
}
}
...and then you schedule it like:
if(newEventText !== "") {
lastEventTime = new Date().getTime();
eventListField.value += newEventText+"\n";
if (timerID == -1) {
timerID = setInterval(addSeparateLine,100);
}
}
Working example here: http://jsfiddle.net/z6kb4/4/
Because you are not actually stopping the show function in any way. The clearTimeout only applies to the separator add. I have updated your fiddle. You need to wrap your function with
if (+new Date() - lastfire < 500) return;
and
lastfire = +new Date();
(before the last return--see the updated fiddle). Also, make sure to stick the global definition var lastfire = -1; somewhere up top.
I have my code of timer that only alert when minutes and seconds are 0:
status = false;
hour_to_start = some_value; // THIS VALUE IS PUT FOR OTHER PERSON
min = 15; //THIS VALUE IS PUT FOR ANOTHER PERSON
seg = 60;
function timecamisa(){
if (seg > 0){
seg--;
}else{
if(seg==0){
min--;
seg=60;
}
}
if(min == 0 && seg==0){
// END - STOP ALL
min= 0;
seg = 0;
status = true;
}
var timer = min + ' minutos ' + seg + ' segundos';
document.getElementById("times-get").innerHTML = timer;
if(status != true){
setTimeout("timecamisa()",1000)//This reload this function (timecamisa())
}else{
alert("END!");
}
In my HTML i have a <span id="times-get"> where print the timer.
BUT, when i press F5 my timer return to the beginning and does not continue where you left off... So, How to do this? Anyone have a example?
My target is that my timer work with my variable 'hour_to_start' and 'min' where.. This timer displays the countdown from my variable 'hour_to_start' in 'x' 'min' (my other variable). And when the variable MIN is 0(ie, complete the mins).. Alert anything.
UPDATE!
OK, i do it with Jquery Plugin countdown Timer.. Is very useful for more than 1 timers.
Now, mi problem is.. when i change the time of my computer, this timer change too.
How to avoid changing my timer when you change the time, date and / or time of my machine?
You will need to get the time from either your server or from some remote server (e.g. via a javascript from someone else's server). If you get the time using javascript it will always depend on the clock of the user's machine.
I have been looking around and I cannot seem to figure out how to do this, although it seems like it would be very simple.(mobile development)
What I am trying to do is display a message (kind of like an alert, but not an alert, more like a dialog) while a calculation is being made. Simply like a Loading please wait. I want the message to appear and stay there while the calculation is being done and then be removed. I just cannot seem to find a proper way of doing this.
The submit button is pressed and first checks to make sure all the forms are filled out then it should show the message, it does the calculation, then hides the message.
Here is the Calculation function.
function scpdResults(form) {
//call all of the "choice" functions here
//otherwise, when the page is refreshed, the pulldown might not match the variable
//this shouldn't be a problem, but this is the defensive way to code it
choiceVoltage(form);
choiceMotorRatingVal(form);
getMotorRatingType();
getProduct();
getConnection();
getDisconnect();
getDisclaimer();
getMotorType();
//restore these fields to their default values every time submit is clicked
//this puts the results table into a known state
//it is also used in error checking in the populateResults function
document.getElementById('results').innerHTML = "Results:";
document.getElementById('fuse_cb_sel').innerHTML = "Fuse/CB 1:";
document.getElementById('fuse_cb_sel_2').innerHTML = "Fuse/CB 2:";
document.getElementById('fuse_cb_result').innerHTML = "(result1)";
document.getElementById('fuse_cb_res_2').innerHTML = "(result2)";
document.getElementById('sccr_2').innerHTML = "<b>Fault Rating:</b>";
document.getElementById('sccr_result').innerHTML = "(result)";
document.getElementById('sccr_result_2').innerHTML = "(result)";
document.getElementById('contactor_result').innerHTML = "(result)";
document.getElementById('controller_result').innerHTML = "(result)";
//Make sure something has been selected for each variable
if (product === "Choose an Option." || product === "") {
alert("You must select a value for every field. Select a Value for Product");
**************BLAH************
} else {
//valid entries, so jump to results table
document.location.href = '#results_a';
******This is where the message should start being displayed***********
document.getElementById('motor_result').innerHTML = motorRatingVal + " " + motorRatingType;
document.getElementById('voltage_res_2').innerHTML = voltage + " V";
document.getElementById('product_res_2').innerHTML = product;
document.getElementById('connection_res_2').innerHTML = connection;
document.getElementById('disconnect_res_2').innerHTML = disconnect;
if (BLAH) {
}
else {
}
populateResults();
document.getElementById('CalculatedResults').style.display = "block";
} //end massive else statement that ensures all fields have values
*****Close out of the Loading message********
} //scpd results
Thank you all for your time, it is greatly appreciated
It is a good idea to separate your display code from the calculation code. It should roughly look like this
displayDialog();
makeCalculation();
closeDialog();
If you are having trouble with any of those steps, please add it to your question.
Computers are fast. Really fast. Most modern computers can do several billion instructions per second. Therefore, I'm fairly certain you can rely on a a setTimeout function to fire around 1000ms to be sufficient to show a loading message.
if (product === "Choose an Option." || product === "") {
/* ... */
} else {
/* ... */
var loader = document.getElementById('loader');
loader.style.display = 'block';
window.setTimeout(function() {
loader.style.display = 'none';
document.getElementById('CalculatedResults').style.display = "block";
}, 1000);
}
<div id="loader" style="display: none;">Please wait while we calculate.</div>
You need to give the UI main thread a chance to render your message before starting your calculation.
This is often done like this:
showMessage();
setTimeout(function() {
doCalculation();
cleanUp()
}, 0);
Using the timer allows the code to fall through into the event loop, update the UI, and then start up the calculation.
You're already using a section to pop up a "results" page -- why not pop up a "calculating" page?
Really, there are 4,000,000 different ways of tackling this problem, but why not try writing a "displayCalculatingMessage" function and a "removeCalculatingMessage" function, if you don't want to get all object-oriented on such a simple thing.
function displayCalculatingMessage () {
var submit_button = getSubmitButton();
submit_button.disabled = true;
// optionally get all inputs and disable those, as well
// now, you can either do something like pop up another hidden div,
// that has the loading message in it...
// or you could do something like:
var loading_span = document.createElement("span");
loading_span.id = "loading-message";
loading_span.innerText = "working...";
submit_button.parentElement.replaceChild(loading_span, submit_button);
}
function removeCalculatingMessage () {
var submit_button = getSubmitButton(),
loading_span = document.getElementById("loading-message");
submit_button.disabled = false;
loading_span.parentElement.replaceChild(submit_button, loading_span);
// and then reenable any other disabled elements, et cetera.
// then bring up your results div...
// ...or bring up your results div and do this after
}
There are a billion ways of accomplishing this, it all comes down to how you want it to appear to the user -- WHAT you want to have happen.
I want to calculate the time between two clicks of an attribute with javascript but I don't know how.
For example;
click here
if the user clicks more than once -let's say in 5 seconds- I want to display an alert. I'm using jQuery if that helps. I don't know much about javascript but I've been coding a small project in my free time.
Something like this would do the trick. Keep a variable with the time of the last click and then compare it when the user clicks the link again. If the difference is < 5 seconds show the alert
<a id='testLink' href="#">click here</a>
<script type='text/javascript'>
var lastClick = 0;
$("#testLink").click(function() {
var d = new Date();
var t = d.getTime();
if(t - lastClick < 5000) {
alert("LESS THAN 5 SECONDS!!!");
}
lastClick = t;
});
</script>
The following may help you getting started:
var lastClicked = 0;
function onClickCheck() {
var timeNow = (new Date()).getTime();
if (timeNow > (lastClicked + 5000)) {
// Execute the link action
}
else {
alert('Please wait at least 5 seconds between clicks!');
}
lastClicked = timeNow;
}
HTML:
click here
Create a variable to hold the time of a click, say lastClick.
Set up a click handler for the element you want to track clicks on.
Inside the handler, check for a value in lastClick. If there is no value, set it to the current time. If there is a value, compare it against the current time. If the difference is within the range you're checking for, display the alert.
Start with
var lastClicked = (new Date()).getTime(); //not zero