count number of clicks/spacebar in given time javascript

Question

Basically, I wanna make a game which counts number of space bar presses/button clicks in 10 seconds. I made a countdown timer, and counter both are working fine

I could not find a way to stop counting key-press (after timer stops) so i have used "disable' button but suggest me if any better options.

this is all i did but i want 10 trials of the same game and after each trial it should save the number of clicks in the variable trials/in the table.

var trials = {
  left:{
    trial_1:0,
    trial_2:0,
    trial_3:0,
    trial_4:0,
    trial_5:0
  },
    right:{
    trial_1:0,
    trial_2:0,
    trial_3:0,
    trial_4:0,
    trial_5:0
  }
}
var count_clicks= 0;
function myInterval(i) {
  var interval = setInterval(function(){startInterval()}, 1000);
  function startInterval(){
    if(i <= 0){
      clearInterval(interval);
       $("#btn").prop('disabled', true);
    } else{
      i--;
      $("#timer").text(i);
     
    }
  }
}

  $("#btn").on("click",function(){
    count_clicks++
    $("#result").text(count_clicks);
    if(count_clicks == 1){
    myInterval(10);
    }
  
  });
   

 
document.body.onkeyup = function(e){
  if (e.keyCode == 32){
     $("#btn").click();
      return false;
     }
}

#btn{
  height:30px;
  width:100px;
}
tr, th, td{
  border:1px solid black;
  padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="timer"></span> seconds<br>
<input id="btn" type="submit" value="Click Me">
<span id="result"></span><br>
<br>
<table>
  <tr>
    <th>hand</th>
    <th>trial 1</th>
    <th>trial 2</th>
    <th>trial 3</th>
    <th>trial 4</th>
    <th>trial 5</th>
  </tr>
  <tr>
    <th>left</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th>right</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

How to reset all values on a click of a button (without Refresh). like disable button should enable again, reset the counter, and reset the timer. — Amit Soni, Jan 11 '18 at 04:42

score 2 · Answer 1 · answered Jan 10 '18 at 11:50

I've added a var disabled = false and added it to if (e.keyCode == 32 && !disabled){

We set it to true after

clearInterval(interval);
disabled = true;

demo

var trials = {
  left:{
    trial_1:0,
    trial_2:0,
    trial_3:0,
    trial_4:0,
    trial_5:0
  },
    right:{
    trial_1:0,
    trial_2:0,
    trial_3:0,
    trial_4:0,
    trial_5:0
  }
}
var count_clicks= 0;
var disabled = false;
function myInterval(i) {
  var interval = setInterval(function(){startInterval()}, 1000);
  function startInterval(){
    if(i <= 0){
      clearInterval(interval);
      disabled = true;
       $("#btn").prop('disabled', true);
    } else{
      i--;
      $("#timer").text(i);
     
    }
  }
}

  $("#btn").on("click",function(){
    count_clicks++
    $("#result").text(count_clicks);
    if(count_clicks == 1){
    myInterval(10);
    }
  
  });
   

 
document.body.onkeyup = function(e){
  if (e.keyCode == 32 && !disabled){
     $("#btn").click();
      return false;
     }
}

#btn{
  height:30px;
  width:100px;
}
tr, th, td{
  border:1px solid black;
  padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="timer"></span> seconds<br>
<input id="btn" type="submit" value="Click Me">
<span id="result"></span><br>
<br>
<table>
  <tr>
    <th>hand</th>
    <th>trial 1</th>
    <th>trial 2</th>
    <th>trial 3</th>
    <th>trial 4</th>
    <th>trial 5</th>
  </tr>
  <tr>
    <th>left</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th>right</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

thanks this code is working fine, but please suggest me what should it do to save these number of clicks to variables. like in trials.left.trail_1/2/3. actually i want to run the same process 10 times, and want to save the result. — Amit Soni, Jan 10 '18 at 12:42
@AmitSoni I've tried to address how to store left and right clicks in my answer below. If it works can you please accept it, if not can you tell me what still needs to change? — , Jan 10 '18 at 13:06

score 0 · Answer 2 · 2018-01-10T14:09:35.230

I would suggest adding a variable that is true for the ten seconds, and false after it. I've also added the code needed to make the table work and store the left and right clicks:

var can_click = true; 
var left_right = "left";
var trial_no = 0;
var trials = {
  left:[0,0,0,0,0],
  right:[0,0,0,0,0],
}
var count_clicks= 0;
function myInterval(i) {
  var interval = setInterval(function(){startInterval()}, 1000);
  function startInterval(){
    if(i <= 0){
      clearInterval(interval);
      can_click = false;      
      trial_no++;
      if(trial_no < 10){
        if((trial_no % 2) == 1){ //odd or even check
          left_right = "right";
          $("#left_or_right_trial").html("right");
        } else {
          left_right = "left";
          $("#left_or_right_trial").html("left");
        }
        myInterval(10)  
      }      
      //$("#btn").prop('disabled', true); //delete this line
    } else{
      can_click = true;
      i--;
      $("#timer").text(i);
     
    }
  }
}

function space_pressed(){
  
  
  if(can_click == true){ 
    count_clicks++
  }
  console.dir("hello");
  console.dir(left_right);
  $("#result").text(count_clicks);
  if(count_clicks == 1){
    myInterval(10);
  }
  
  var this_id = left_right+"_"+trial_no;
  
  trials[left_right][trial_no]++;
  $("#"+this_id).html(trials[left_right][trial_no]);
  
};



 
document.body.onkeyup = function(e){
  if (e.keyCode == 32){
     space_pressed();
     
     $("#btn").click();
      return false;
     }
     
}

#btn{
  height:30px;
  width:100px;
}
tr, th, td{
  border:1px solid black;
  padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="timer"></span> seconds<br>

<span id="result_left"></span><br>
<span id="result_right"></span><br>
<br>
<table>
  <tr>
    <td id="left_or_right_trial" colspan="6">Left
    </td>
  </tr>
  <tr>
    <th>hand</th>
    <th>trial 1</th>
    <th>trial 2</th>
    <th>trial 3</th>
    <th>trial 4</th>
    <th>trial 5</th>
  </tr>
  <tr>
    <th>left</th>
    <td id="left_0"></td>
    <td id="left_2"></td>
    <td id="left_4"></td>
    <td id="left_5"></td>
    <td id="left_8"></td>
  </tr>
  <tr>
    <th>right</th>
    <td id="right_1"></td>
    <td id="right_3"></td>
    <td id="right_4"></td>
    <td id="right_5"></td>
    <td id="right_7"></td>
  </tr>
</table>

Anthony, I am making digital version on The finger tapping test (Neuropsychological Test). basically i counts number of space bar pressed with left hand and right hand.(nothing to do with left/right button) and we give rest of some time between each trial. than subject can start when he is ready by pressing space bar. I think this will clarify my question. — Amit Soni, Jan 10 '18 at 13:16
I'm not sure I understand - would the number of keypresses of different buttons help? For example the "Z" and "M" key? If so, I think I can make a solution work — , Jan 10 '18 at 13:22
btw, I'm a psychology researcher too! You might want to use Collector - you can e-mail me about it on my profile address. — , Jan 10 '18 at 13:35
sorry @anthony but different buttons will not work for me (we assess the left hand 5 trials first and then right hand 5 trial NOT with both hands at the same time). can we add some button to save those "results" in tables/variables? thnks man i will try collector it might help me !! — Amit Soni, Jan 10 '18 at 13:49
Ah ok - give me a min to write a solution. Do drop me an e-mail before starting Collector - the documentation isn't ready yet. — , Jan 10 '18 at 13:52
Just updated it to instruct which hand the particpiant should be using — , Jan 10 '18 at 14:10

count number of clicks/spacebar in given time javascript

2 Answers2