JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="master">
<div class="container">
<div id="1" class="box"></div>
<div id="2" class="box"></div>
<div id="3" class="box"></div>
</div>
<div class="container">
<div id="4" class="box"></div>
<div id="5" class="box"></div>
<div id="6" class="box"></div>
</div>
<div class="container">
<div id="7" class="box"></div>
<div id="8" class="box"></div>
<div id="9" class="box"></div>
</div>
</div>
</body>
CSS
.box{
border: 1px dotted black;
height: 15vh;
margin-bottom: 2%;
width: 15vh;
}
.container{
display: inline-block;
vertical-align: top;
}
.master{
width: 30%;
height: 30%;
margin:-15% 0 0 -15%;
position:absolute;
left: 50%;
top: 50%;
}
JavaScript
var n = prompt("n?");
var m = 9;
var x = prompt("how many times should it go on for?");
var y = prompt("time between?");
var randomNumber;
var choice = 0;
var nBack;
var historyLength;
var secondsStart;
var seconds;
var correct = [];
var incorrect = [];
var history = [];
$(document).ready(function(){
//for loop to run for each repetition.
for(i=0; i<x; i++){
randomNumber = Math.floor( Math.random() * (m+1) );
while(randomNumber === history[i-1]){
randomNumber = Math.floor( Math.random() * (m+1) );
}
$("." + randomNumber).css({ "background-color": "#ffe"});
history[i] = randomNumber;
nBack = history[i - n];
//alert("preset");
setTimeout(function(){
if(e.which == 13){
choice = 1;
} else {
choice = 0;
}
if(nBack == randomNumber){
if(choice == 1){
correct.push(0);
} else if(choice == 0){
incorrect.push(0);
}
} else {
if(choice == 0){
correct.push(0);
} else if(choice == 1){
incorrect.push(0);
}
}
}, 1000 * i * y)();
choice = 0;
}
//announcing percentage accuracy
alert("you got " + Math.floor(100*(correct.length / x)) + "%");
});