This is script I have created for switching no.of questions after 1 minute
/script for generate one by one questions
var timer;
// go to next question
function gotoNextSlide()
{
timer && clearTimeout(timer);
goToSlide(getCurrentSlide().index() + 1);
timer = setTimeout(gotoNextSlide, 1000 * 60);
}
//show current question
function getCurrentSlide()
{
return $("#slides .slide:visible");
}
//showing next item or number in current question afer 3 second
function showNextItem()
{
$nextItem && clearTimeout($nextItem);
$nextItem = setTimeout(showNextItem, 3000);
var $nextItem = getCurrentSlide().find('.slide-item:not(.visible)').eq(0);
if ($nextItem.length)
{
$nextItem.addClass('visible');
return;
}
}
function init()
{
//timer for next item or number
$nextItem = setTimeout(showNextItem, 3000);
$(".goto-next-slide").click(gotoNextSlide);
//timer for next question slide
timer = setTimeout(gotoNextSlide, 1000 * 60);
goToSlide(0);
}
$(document).ready(init);
My Aim -
the first field is of duration , user can give any input to this field for ex he gave input of 4 then 4 minute timer should set.
then the no.of questions field , suppose user gave input of 2 the 4 minute timer should set with equal distribution of time to both the questions i.e 120seconds to each question
if user gave input of 3 for how many numbers he want in a question then that previous fields 120 seconds should split to adjust these 3 numbers i.e 40 seconds wil be set for each number
NOTE - This is for basically a math quiz in which the questions will be automatically slides(there is a slideshow in the output I am displaying each item in a questions one by one ) using timer along with the numbers inside the questions based on input.
Everything is working here but only the timer settings are not working , when I gave input to duration field then the timer is set properly for that input but not for each question , its setting for whole set of questions
I have set those 3000(3seconds) just to show for example
I tried some calculation but they are not helping , How can I aply the calculatins in my script ?
hey @Mittineague thanks for the suggestions , I think I got the way to fix , this issue.
the issue of countup timer is solved now and working perfectly fine.
BUT there is anothe small issue which is merged here in above comment about the time settting I am bit confused to adjust the time calculations , if possible , can you check that one ?
hey I have updated the code which is setting the time to each question by calculating with he help of input fields I have posted above cooment 6
updated script
//script for generate one by one questions
var timer;
// go to next question
function gotoNextSlide()
{
timer && clearTimeout(timer);
goToSlide(getCurrentSlide().index() + 1);
timer = setTimeout(gotoNextSlide, $duration * 60000 / $num_questions);
}
//showing next item afer calculated seconds from below
function showNextItem()
{
$nextItem && clearTimeout($nextItem);
$nextItem = setTimeout(showNextItem, timer / $num_operands);
var $nextItem = getCurrentSlide().find('.slide-item:not(.visible)').eq(0);
if ($nextItem.length)
{
$nextItem.addClass('visible');
return;
}
}
function init()
{
//timer for next element
$nextItem = setTimeout(showNextItem, timer / $num_operands);
$(".goto-next-slide").click(gotoNextSlide);
//timer for next question slide
timer = setTimeout(gotoNextSlide, $duration * 60000 / $num_questions);
$(".goto-prev-slide").click(gotoPrevSlide);
goToSlide(0);
}
$(document).ready(init);
I have created a formulae to calculate the time but its not working , where I am going wrong ?
I’m familiar with using && to represent AND for comparing conditions, but not on its own like this.
I am not that familiar with JS and mainly come in here to learn - I hadn’t realised that variable names starting with a $ were done in JS as well as PHP. It seems confusing to me, given that there is also some PHP code floating around.
I can’t see where your $duration and $num_questions JS variables are coming from, don’t you need to grab the values from the form somewhere?
my script.js file is included in a my home.php tag and in the tag of this home.php my form is exists.
my rest of the script is working fine but not the script for timer I have posted above
thats the main issue I am having. The time is not calculating by taking input value from form fields in a proper way it only setting timer for the time I specified there .
Where is the code for getting the input value from the form fields? I see you’ve got a formula using $duration and $num_questions, but I don’t see where you assign values to those variables.
here which uses variables with a similar name, but you don’t seem to define those variables anywhere that I can see. If you want to use the values from your PHP variables inside your JS code, then surely you’d need to use echo to output them in the JS code when the server draws the page, as you did here:
If you’re intending the JS code to run from a browser action rather than when initiated by the server re-drawing the page, you’ll need to get the values from the form in your JS code.
I may be out of my depth here, I’m sure someone will be along to comment if I’m made presumptions that aren’t correct. If those are JS variables, I think that while it might be correct to use variable names in JS that start with a $, it just adds confusion to the code.
Hey thanks for the suggegstions, I appreciate that. and I tried it but the still has not benn solved
I am posting my complete script.js file so that tere will not be any confusion
This is my script.js file
//script for generate one by one questions
var timer;
// go to next question
function gotoNextSlide()
{
timer && clearTimeout(timer);
goToSlide(getCurrentSlide().index() + 1);
timer = setTimeout(gotoNextSlide, 1000 * 60);
// timer = setTimeout(gotoNextSlide, "<?php echo $duration * 1000 * 60 /
$num_questions; ?>"); // the issue is here in this line
}
//go to previous question
function gotoPrevSlide()
{
goToSlide(getCurrentSlide().index() - 1);
}
//jquery for changing the questions using keyboard left and right key press
$(document).keydown(function(e) {
switch(e.which)
{
case 39: // left
gotoNextSlide();
break;
case 37: // left
gotoPrevSlide();
break;
default: return; // exit this handler for other keys
}
e.preventDefault(); //to prevent the action like scroll
});
//show current question
function getCurrentSlide()
{
return $("#slides .slide:visible");
}
//show next item or element of the current question
function gotoNextItem()
{
goToItem(getCurrentItem().index() + 1);
}
//show the previus item of the current question
function gotoPrevItem()
{
goToSlide(getCurrentItem().index() - 1);
}
//geting current item of the current question
function getCurrentItem()
{
return $("#out .dot:visible");
}
//creating dots or bullets equal to no.of questiions
function goToSlide(index)
{
var $slides = $("#slides .slide");
if (index >= 0 && index < $slides.length)
{
$slides
.removeClass("active")
.eq(index)
.addClass("active");
$(".dot")
.removeClass("active")
.eq(index)
.addClass("active");
}
}
// creating dots or buullet equal to items in an expression
function goToItem(element)
{
var $ele = $(".dotin");
if (element >= 0 && element < $ele.length)
{
$ele
.removeClass("active")
.eq(element)
.addClass("active");
$(".dots-cont")
.removeClass("active")
.eq(element)
.addClass("active");
}
}
//marking all checkboxes on clciking checkbox named All
function toggleCheckboxes(name)
{
var checked = $(this).prop("checked");
$('[name="' + name + '"]').prop("checked", checked);
}
//showing next item afer 3 second
function showNextItem()
{
$nextItem && clearTimeout($nextItem);
// $nextItem = setTimeout(showNextItem, timer / "<?php echo
$num_operands; ?>"); // the issue is here in this line
$nextItem = setTimeout(showNextItem, 3000);
var $nextItem = getCurrentSlide().find('.slide-item:not(.visible)').eq(0);
if ($nextItem.length)
{
$nextItem.addClass('visible');
return;
}
// show the answer
getCurrentSlide().find('.answer').toggleClass('visible');
}
//function for reset the form
function resetForm()
{
return confirm("Are you sure you want to reset your choices?");
}
function init()
{
$(".show-answer").click(showNextItem);
//timer for next element
// $nextItem = setTimeout(showNextItem, timer / "<?php echo
$num_operands; ?>");
$nextItem = setTimeout(showNextItem, 3000);
$(".goto-next-slide").click(gotoNextSlide);
//timer for next question slide
timer = setTimeout(gotoNextSlide, 1000 * 60);
// timer = setTimeout(gotoNextSlide, "<?php echo $duration * 1000 * 60 /
$num_questions; ?>");
$(".goto-prev-slide").click(gotoPrevSlide);
goToSlide(0);
}
$(document).ready(init);
//script for generate and play button
$(document).ready(function(){
$("input[name=submit]").click(function(){
$("#play").show();
$("#img").show();
$("#re").show();
$("#gen").hide();
});
});
//disable all inputs when click on generate
$("input[name=submit]").click(function(){
$("input[type=number],input[type=checkbox],select[name=num_operands],select[name=num_digits]").prop("disabled", true);
});
//enable all input when click on play
$("input[name=play]").click(function(){
$("input[type=number],input[type=checkbox],select[name=num_operands],select[name=num_digits]").prop("disabled", false);
});
//enable inputs after clicking on reset button
$("input[name=reset]").click(function(){
$("input[type=number],input[type=checkbox],select[name=num_operands],select[name=num_digits]").prop("disabled", false);
});
//for reset button
$(document).ready(function(){
$("#re").click(function(){
$("#gen").show();
$("#play").hide();
$("#re").hide();
});
});
//checked all checkboxes on clicking checkbox named All
$( '.col-75 .toggle-button' ).click( function () {
$( '.col-75 input[type="checkbox"]' ).prop('checked', this.checked)
});
// script for showing answer on clicking show answer button
$(".answer-content").hide();
$(".show-answer").click(function(){
$('.totl').hide();
$(".answer-content").show();
$(".answer-placeholder").hide();
});
//hide answer after going on next question and clicking next button
$(".goto-next-slide").click(function(){
$(".answer-content").hide();
});
//script for timer countdown
function secondPassed()
{
var minutes = Math.round((seconds - 30)/60),
remainingSeconds = seconds % 60;
if (remainingSeconds < 10)
{
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById("countdown").innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0)
{
clearInterval(countdownTimer);
window.location.href = 'http://localhost/copied/final_generate/slideshow.php';
}
else
{
seconds--;
}
}
var countdownTimer = setInterval('secondPassed()', 1000);
//adding count up timer after user select 0 as input value to duration field
var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
setInterval(setTime, 1000);
function setTime() {
++totalSeconds;
secondsLabel.innerHTML = pad(totalSeconds % 60);
minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
}
function pad(val) {
var valString = val + "";
if (valString.length < 2) {
return "0" + valString;
} else {
return valString;
}
}
I am unable to figur out where I am going wrong ,cna you please guide me ?