We Keep Coding

Timer for individual <div>

I'm currently trying to set a timer for each div created, whereby each div has a background color of green or red depending on if there are detections in the webRTC video. Is there a way to assign a timer to the divs individually? Or maybe to only check for my own video? I've tried something like below, but it does not work when there are more than 1 people in the call, as "time" will be a global variable. I've also tried something like time = Math.ceil((time+1)/checkerBox.length) , but it does not seem to work too. Any pointers will be helpful
function checker(){
var time =0;
var timer = setInterval(function (){
for(var i=0;i<checkerBox.length;i++){
if(checkerBox[i].style.backgroundColor=="red"){
time = time + 1;
console.log("Box" + videoNum[i].innerHTML + " is not present for : " + checkerBox[i].innerHTML + " seconds");
}else{
time = 0;
}
//Exceed time
if(checkerBox[i].innerHTML == 30){
setTimeout(function(){
takeScreenshot(videoNum[i-1]);
}, 100);
time = 0;
}
checkerBox[i].innerHTML = time;
}
},1000)
}
Update : I ended up using arrays
var takenFrom;
var d = new Date();
let timeKeep = new Array(0,0,0,0,0,0,0,0,0,0,0);
let screenShots = new Array(0,0,0,0,0,0,0,0,0,0,0);
function checker(){
timer = setInterval(function (){
for(var i=0;i<=(checkerBox.length)-1;i++){
tableRow[i+1].cells[2].innerHTML = timeKeep[i]
tableRow[i+1].cells[3].innerHTML = screenShots[i]
if(flag[i].innerHTML=="0"){
checkerBoxFalse(checkerBox[i]);
timeKeep[i] = timeKeep[i] + 1;
console.log("Box" + videoNum[i].innerHTML + " is not present for : " + tableRow[i+1].cells[2].innerHTML + " seconds");
if(tableRow[i+1].cells[2].innerHTML == 10 ){
takenFrom = "Box" + videoNum[i].innerHTML + "minute" + d.getMinutes() + " room" + ROOM_ID
takeScreenshot(videoNum[i],takenFrom);
screenShots[i] = screenShots[i] + 1;
timeKeep[i] = 0;
}
} else if(flag[i].innerHTML== "1"){
checkerBoxTrue(checkerBox[i]);
timeKeep[i] = 0;
}
}
},1000)
}

Yes:
for (let div of divs) {
setInterval(function() {
//do something with div
}, 1000);
}
let is block scoped, so each setInterval will have its own div.

Jquery/Javascript: Countdown Timer acting erratically

I am trying to make a simple quiz using javascript with timed questions. Each question lasts for 10 seconds before moving on to the next. The countdown timer does well for the first question, after which it starts to speed up or display random numbers for following questions. Here is my code,
P.S. I apologize for the inefficient and hectic code, I'm still new to javascript and I will make the code more streamlined once I fix this issue.
var questionList = [
{
q:"What is a dog?",
a:["fish","mammal","plant","prokaryote"],
answer: 1
},
{
q:"What is a cat?",
a:["mammal","fish","plant","amphibian"],
answer: 0
},
{
q:"What is a tree?",
a:["plant","fish","mammal","none"],
answer: 0
},
{
q:"What do cars run on?",
a:["gasoline","water","ethanol","liquid oxygen"],
answer: 0
},
{
q:"What is 4 x 4?",
a:["8","16","4","160"],
answer: 1
},
{
q:"What is the capital of Australia?",
a:["Brisbane","GoldCoast","Perth","Canberra","Melbourne"],
answer: 3
},
{
q:"What is the national flower of Canada?",
a:["sunflower","daisy","trillium","rose","lotus"],
answer: 2
}
];
//--------------------------------------
var picked;
var qcount = 0;
var output = [];
var timer;
var timer2;
var timeLeft = 10;
var correctQ = 0;
var wrongQ = 0;
//var randomQ = Math.floor(Math.random()*7);
var x = questionList[qcount];
var j = x.answer;
// var cAns = x.a[j];
//console.log(cAns);
console.log(j);
//new Q w/ options
function qGen(){
timer = setInterval(time, 1000)
$('#question').text(x.q);
for (var i=0; i < (x.a).length; i++){
var newLi = $('<button>');
newLi.attr('data-id', i);
newLi.addClass("answer").text(x.a[i]);
$('#list').append(newLi);
}
}
qGen();
// correct answer
function clickChoice(){
$('#list').on("click",'button', function(){
picked = parseInt($(this).attr("data-id"));
console.log(picked + " click");
if (picked === j){
console.log(j + " if");
qcount++;
x = questionList[qcount];
j = x.answer;
qGen();
correct();
}else{
qcount++;
incorrect();
x = questionList[qcount];
j = x.answer;
qGen();
}
})
}
clickChoice();
//timer
function time(){
timeLeft--;
$('#time').text(timeLeft);
if(timeLeft===0){
$('#score').text('TIME UP');
timer2 = setInterval(timeUp, 2000);
}
}
//time up
function timeUp(){
clearInterval(timer);
wrongQ++;
qcount++;
x = questionList[qcount];
j = x.answer;
clearInterval(timer2);
nextQ();
}
//correct
function correct(){
clearInterval(timer);
clearInterval(timer2);
$("#list").text("");
correctQ++;
nextQ();
}
//incorrect
function incorrect(){
clearInterval(timer);
clearInterval(timer2);
$("#list").text("");
wrongQ++;
nextQ();
}
//next question gen
function nextQ(){
timeLeft= 10;
$('#score').text("");
$('#ca').text("");
$('#question').text(x.q);
//$("#time").text(timeLeft);
$("#list").text("");
qGen();
}

Below is a modified version of your code, which should solve your issues.
Notes
I have made some simple assumptions about your HTML and CSS
I have not implemented score updating, but that should be straight forward given the below
const questionList = [
{
q: 'What is a dog?',
a: ['fish', 'mammal', 'plant', 'prokaryote'],
answer: 1
},
{
q: 'What is a cat?',
a: ['mammal', 'fish', 'plant', 'amphibian'],
answer: 0
},
{
q: 'What is a tree?',
a: ['plant', 'fish', 'mammal', 'none'],
answer: 0
},
{
q: 'What do cars run on?',
a: ['gasoline', 'water', 'ethanol', 'liquid oxygen'],
answer: 0
},
{
q: 'What is 4 x 4?',
a: ['8', '16', '4', '160'],
answer: 1
},
{
q: 'What is the capital of Australia?',
a: ['Brisbane', 'GoldCoast', 'Perth', 'Canberra', 'Melbourne'],
answer: 3
},
{
q: 'What is the national flower of Canada?',
a: ['sunflower', 'daisy', 'trillium', 'rose', 'lotus'],
answer: 2
}
];
//--------------------------------------
let picked;
let qcount = 0;
const output = [];
let timer;
const startingTime = 10;
let timeLeft;
let correctQ = 0;
let wrongQ = 0;
// var randomQ = Math.floor(Math.random()*7);
// let x = questionList[qcount];
// let j = x.answer;
// var cAns = x.a[j];
// console.log(cAns);
// console.log(j);
// next question gen
function nextQ() {
timeLeft = 10;
document.querySelector('#score').textContent = '';
// document.querySelector('#ca').textContent = '';
document.querySelector('#question').textContent = questionList[qcount].q;
// $("#time").text(timeLeft);
document.querySelector('#list').textContent = '';
qGen();
}
// time up
function timeUp() {
clearInterval(timer);
wrongQ += 1;
qcount += 1;
nextQ();
}
// correct
function correct() {
clearInterval(timer);
correctQ += 1;
nextQ();
}
// incorrect
function incorrect() {
clearInterval(timer);
wrongQ += 1;
nextQ();
}
// timer
function time() {
timeLeft -= 1;
document.querySelector('#time').textContent = timeLeft;
if (timeLeft === 0) {
document.querySelector('#score').textContent = 'TIME UP';
timeUp();
}
}
// Add EventListener to each button
function addEL(el) {
el.addEventListener('click', event => {
picked = parseInt(event.currentTarget.getAttribute('data-id'), 10);
console.log(`${picked} click`);
const correctAnswer = questionList[qcount].answer;
qcount += 1;
if (picked === correctAnswer) {
console.log(`${correctAnswer} if`);
correct();
} else {
incorrect();
}
});
}
// new Q w/ options
function qGen() {
const x = questionList[qcount];
timeLeft = startingTime;
document.querySelector('#time').textContent = startingTime;
document.querySelector('#question').textContent = x.q;
for (let i = 0; i < x.a.length; i += 1) {
const newLi = document.createElement('li');
const answer = document.createElement('button');
answer.setAttribute('data-id', i);
answer.classList.add('answer');
answer.textContent = x.a[i];
addEL(answer);
newLi.appendChild(answer);
document.querySelector('#list').appendChild(newLi);
}
timer = setInterval(time, 1000);
}
document.addEventListener('DOMContentLoaded', () => {
qGen();
});
.answer {
background-color: yellow;
}
<div>
Question:
<span id="question">XXX</span>
</div>
<div>
Time:
<span id="time">XXX</span>
</div>
<div>
Score:
<span id="score">XXX</span>
</div>
<div>
<ul id="list">
</ul>
</div>
Below are the changes I made, including some tips on good practices in JavaScript.
Code Logic
You are calling qGen twice, effectively spinning up two new intervals on each click
The event listener must be added to all the buttons
No need for the second timer
Only <li> elements are permitted inside <ul> / <ol>
It is perfectly fine to place other elements, like your buttons, inside those <li>s.
You can also format them differently, if you prefer (e.g. on one line)
Avoid operating on the DOM, before the DOM tree has finished loading
See the added DOMContentLoaded event listener
output, correctQ, wrongQ: These assigned values are never used in your code
Good Practices
Avoid unary operators ++ and --
Automatic semi-colon insertion could break your code
Define functions before calling them
Don't use jQuery (or other abstractions) before you are completely comfortable with vanilla JavaScript
Prefer arrow functions over anonymous functions
Use event.currentTarget instead of this inside event listener

Looping gifs is crashing my html page

I have a loop that creates 4 divs that is generating random numbers. those divs are also assigned gifs. I have another loop that is fading in and fading out those images. After clicking the gifs a few times to generate the random number guesses the whole page freezes up, how do i fix this? does it have to do with the cache? I am looping the the fadeIn and fadeOut after the on click function.
here is my code:
var startGame = function () {
$(".crystals").empty();
var images = [
'https://thumbs.gfycat.com/WeightyAgreeableDanishswedishfarmdog-max-1mb.gif',
'http://31.media.tumblr.com/224595f52671895de1608de69012d1d6/tumblr_nfk2itPn1tqou9go1_500.gif',
'http://pictures.willowsgraphics.com/compybackup/pics/animatedicons/shootingstar.gif',
'https://media.giphy.com/media/yfoeIMBjzVw52/giphy.gif',
];
randomNumber = Math.floor(Math.random() * 101) + 19;
$("#result").html('Catch this many stars: ' + randomNumber);
for (var i = 0; i < 4; i++) {
var cardRandom = Math.floor(Math.random() * 11) + 1;
var crystal = $("<div>");
crystal.attr({
"class": 'crystal',
"data-random": cardRandom
});
crystal.css({
"background-image": "url('" + images[i] + "')",
"background-size": "cover",
"background-position": "center"
});
$(".crystals").append(crystal);
$("#previous").html("Total Score: " + previousNumber);
}
}
startGame();
$(document).on("click", '.crystal', function () {
var num = parseInt($(this).attr('data-random'));
var loopImages = function () {
$('.crystal').fadeIn(1500, function () {
$('.crystal').fadeOut(1500, loopImages);
});
}
loopImages();
previousNumber += num;
$("#previous").html("Total Score: " + previousNumber);
if (previousNumber > randomNumber) {
losses++;
$("#losses").html("Your Losses: " + losses);
previousNumber = 0;
startGame();
}
else if (previousNumber === randomNumber) {
wins++;
$("#wins").html("Your Wins: " + wins);
previousNumber = 0;
startGame();
}
});

I figured it out, i was trying to loop the fades for the wrong div :)

Comparing values of 2 dimensional array to single dimensional array

I am creating a trivia game for a class and I am struggling to compare all of the values of a single index of a 2-dimensional array to a single value of a single index of another array. From my limited experience, I am using and if statement to compare these values. I must be missing a step but I am unsure how to solve it. The line of code for which I think the mistake lies is $(".choice").on('click', function() {});
Thank you for any help in advanced.
JS:
window.onload = function() {
$('#start').html('<div class="text-center"><button type="button" class="btn btn-default">Start</button></div>');
};
var questionArray = ["This bands second album went platinum 5 times in the UK and double Platinum in the US.", "This band was formed in Australia and their first album, which had you Walking On A Dream, has sold over 3 million copies."];
var optionArray = [["Radio Head", "Gorillaz", "Coldplay", "Arctic Monkeys"], ["Empire Of The Sun", "M83", "MGMT", "Two Door Cinema Club"]];
var answerArray= ["Gorillaz", "Empire Of The Sun"];
var imageArray= ["http://cdn3.pitchfork.com/artists/1767/m.65d9c64d.jpg", "http://crowningmusic.com/storage/rA7GUFFoBCtT8Jg4L1tv.png", "", "", ""];
var count = 0;
var question = 0;
$("#start").on('click', function() {
$(this).css("display","none");
timer(
30000,
function(timeleft) {
$('#timer').html(timeleft);
},
function() {
// What happens after //
}
);
$("#question").html(questionArray[question]);
for (var j = 0; j < 4; j++) {
$("#options").append('<button class="choice">' + optionArray[question][j] + "</button>" + "<br>");
}
$(".choice").on('click', function() {
console.log('click');
console.log(answerArray[question])
if (optionArray[question] == answerArray[question]) {
console.log("Working");
}
});
// $("#holder").html("<img src=" + questionArray[count] + ">");
});
function nextQuestion() {
count++;
}
// Timer Function //
function timer(time,update,complete) {
var start = new Date().getTime();
var interval = setInterval(function() {
var now = time-(new Date().getTime()-start);
if( now <= 0) {
clearInterval(interval);
complete();
}
else update(Math.floor(now/1000));
},100); // the smaller this number, the more accurate the timer will be
}

When you are comparing the answers to the question with the correct answer, you need to include the index of the user selected choice. Try something like this:
$("#question").html(questionArray[question]);
for (var j = 0; j < 4; j++) {
// Include an ID in the choice button
$("#options").append('<button class="choice" id="choice_' + j + '">' + optionArray[question][j] + "</button>" + "<br>");
}
$(".choice").on('click', function() {
console.log('click');
console.log(answerArray[question]);
// Get the index of the selected answer through the ID attribute
var selectedAnswerIndex = $(this).attr('id').substring("choice_".length);
if (optionArray[question][selectedAnswerIndex] === answerArray[question]) {
console.log("Working");
}
});

Another options that doesn't deal with answer index might look like this:
$(".choice").on('click', function() {
console.log('click');
console.log(answerArray[question])
// Use the text content of the button to check the answer
if ($(this).text() === answerArray[question]) {
console.log("Working");
}
});
Note: This relies on the fact that the button only contains the possible answer value between the tags. If you put anything else inside the button, this solution would not work.

This Javascript function keeps looping, how can i make it run once?

The code is meant to animated some text in a typing fashion. I want it to run once, but it keeps looping through the area of sentences. How would i go about stopping it looping through. The top of the code gathers the value of a input and puts into the array, this all works fine. It is just the looping i am having issues with.
var yourWord = document.getElementById("myText").value;
var yourtext = "I took the word " + yourWord + "...";
var infomation = [yourtext,
'I looked at the most relevant news article relating to it...',
'And created this piece of art from the words in the article! '
],
part,
i = 0,
offset = 0,
pollyLen = Polly.length,
forwards = true,
skip_count = 0,
skip_delay = 5,
speed = 100;
var wordflick = function () {
setInterval(function () {
if (forwards) {
if (offset >= infomation[i].length) {
++skip_count;
if (skip_count == skip_delay) {
forwards = false;
skip_count = 0;
}
}
} else {
if (offset == 0) {
forwards = true;
i++;
offset = 0;
if (i >= pollyLen) {
i = 0;
}
}
}
part = infomation[i].substr(0, offset);
if (skip_count == 0) {
if (forwards) {
offset++;
} else {
offset--;
}
}
$('#pollyInfo').text(part);
}, speed);
};
$(document).ready(function () {
wordflick();
});

Modify the line:
setInterval(function () {
into:
var interval = setInterval(function () {
and then clear the interval where you are setting i=0;
if (i >= pollyLen) {
i = 0;
}
to:
if (i >= pollyLen) {
i = 0;
clearInterval(interval);
}
This should do the job!