How to add "if no click" to a conditional statement

Question

UPDATED: I have a conditional statement that is dependant on the time a user clicks during a video playing. The result of their response is either too early, correct or too late and is displayed at the end of the video. How can I add in another result option for if the user doesn't click before the video ends? In this case, not clicking is a different response to clicking too late.

Currently I have working...

// get result based on time of click 
  $('#response').on('click', function() {
    var response-time = myVid.currentTime;
    var result;
if (response-time < 5) {
      result = "too early" ;
    } else if (response-time < 10) {
      result = "correct" ;
    } else {
      result = "too late" ;
  }

I tried adding console.log(result) to see if there is a null or undefined 'result' when there is no click before the video ends so I can maybe add another if statement based on the log response. But adding console.log interrupts the next on ended function because there is never a chance to log "result" if there is no click during the video.

I also tried an additional if statements using a variety of combinations for result being anything other than those listed above but with no success. This seems so logical to me but it doesn't work.

var finalResult
if (result != "too early" && result != "correct" && result != "too late") {
  finalResult = "you did not click"
}

I feel like I'm going round in circles with this one so any help is welcome

user_9515207 · Answer

Set a timeout that fires after 10 seconds that, if no click has occurred, runs the too late part and clears the click listener.

Also, when the click listener runs, clear the timeout:

$('#response').on('click', function() {
  var responseTime = myVid.currentTime;
  var result;
  if (responseTime < 5) {
    console.log("too early");
  } else {
    console.log("correct");
  }
  clearTimeout(timeoutId);
  console.log(result);
});
const timeoutId = setTimeout(() => {
  console.log('too late');
  $('#response').off('click');
}, 10000);

If you don't want a hard-coded value during which clicks are listened for, and always want too late to come right when the video ends, then add a listener for the ended event instead of setting a timeout:

$('#response').on('click', function() {
  var responseTime = myVid.currentTime;
  var result;
  if (responseTime < 5) {
    console.log("too early");
  } else {
    console.log("correct");
  }
});
$('#response').on('ended', () => {
  console.log('too late');
  $('#response').off('click');
});

If you also need to differentiate between clicking too late and not cicking at all, add another condition to your responseTime check. Live demo:

const myVid = $('video');
myVid[0].play();
let result;
$('#response').one('click', function() {
  var responseTime = myVid[0].currentTime;
  if (responseTime < 5) {
    result = "too early";
  } else if (responseTime < 8) {
    result = "correct";
  } else {
    result = 'too late';
  }
  myVid.off('ended');
  $('#response').prop('disabled', true);
});
myVid.one('ended', () => {
  console.log('no response');
  $('#response').off('click');
  $('#response').prop('disabled', true);
});

setTimeout(() => {
  console.log('End result:', result);
}, 12000);

How to add "if no click" to a conditional statement

1 Answers