JSFiddle - React, Tailwind, and code Playground

by John Doe

JavaScript

// instructions:
//define max
var max = 10
// if you know the answer by heart, press ok, if not, press abort
// if you want to abort the experiment, enter something into the prompt

var a = []
for(var i=1; i<=max; i++){
  for(var j=1; j<=i; j++){
  	a.push({x:j, y:i, byheart:null, time:Infinity})
}}
a = a.sort(() => Math.random() - 0.5)
try{
  a.forEach(function(c){
    var time_ms = Date.now()
    var answer = prompt(c.x + " * "+c.y)
    if(answer != "" && answer != null){throw BreakException}
    console.log(answer)
    c.time = Date.now() - time_ms
    c.byheart = answer == ""
  })
}

// print results
var table = document.createElement('table')
for(var i=0; i<=max; i++){
  var row = document.createElement('tr')
  table.appendChild(row)
  var col = document.createElement('td')
  col.innerHTML = i
  row.appendChild(col)
  if(i ==  0){ //header
  	for(j=1; j<=max; j++){
      var col = document.createElement('td')
      col.innerHTML = j
      row.appendChild(col)
    }
  } else { // actual content
    for(var j=1; j<=max; j++){
      var col = document.createElement('td')
      col.innerHTML = i + "*" + j
      row.appendChild(col)
      var trial = a.find(c => c.x == i && c.y == j)
      if(trial == undefined){
        col.innerHTML = ""
        col.style.border = 'solid white 1px'
      } else {
        if(trial.byheart){
          col.style.backgroundColor = 'black'
        } else {
          col.style.backgroundColor = 'red'
        }

      }
    }
  }
}
document.body.appendChild(table)

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = 'td {border:solid black 1px;}';
document.getElementsByTagName('head')[0].appendChild(style);
alert('done')