JSFiddle - React, Tailwind, and code Playground

by SwampFall

HTML

<div style="margin-top: 60pt; text-align: center;">
<div id="question" style="display: inline-block;">

</div>
<div style="display: inline-block;">
  <input id="answer"/>
</div>
<div id="feedback">

</div>
</div>

JavaScript

let balls = [];

function init() {
	document.getElementById("answer").addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
      submit();
    }
  });
  next();
  balls.push(new Ball(random(window.innerWidth), random(window.innerHeight), random(1,5), random(1,5)));
  setInterval(function() { for (let i = 0; i < balls.length; i++) { balls[i].move();} }, 20);
}

let num_types = 6;

function next() {
	let q = document.getElementById("question");
  let type = random(num_types);
  q.innerHTML = createQuestion(type);
}

var answer = "";

function createQuestion(type) {
	switch (type) {
  	case 0:
    	var base = random(2, 6);
      answer = random(5);
      var x = Math.pow(base, answer);
      return "<sup>" + base + "</sup>log(" + x + ") = ";
    case 1: 
    	base = random(6, 11);
      answer = random(4);
      x = Math.pow(base, answer);
      return "<sup>" + base + "</sup>log(" + x + ") = ";
    case 2:
      base = random(2, 6);
      answer = random(1, 5);
      x = Math.pow(base, answer);
      answer = -answer;
      return "<sup>" + base + "</sup>log(<sup>1</sup>&frasl;<sub>" + x + "</sub>) = ";
    case 3:
      base = random(6, 11);
      answer = random(1, 4);
      x = Math.pow(base, answer);
      answer = -answer;
      return "<sup>" + base + "</sup>log(<sup>1</sup>&frasl;<sub>" + x + "</sub>) = ";
    case 4: 
    	base = random(2, 6);
      let a1 = random(1, 4);
      let a2 = random(2, 4);
      while (a1 == a2) {
      	a2 = random(2, 4);
      }
      x = Math.pow(base, a1);
      base = Math.pow(base, a2);
      answer = a1 + "/" + a2;
      return "<sup>" + base + "</sup>log(" + x + ") = ";
    case 5:
    	base = random(2, 6);
      let r = random(2,4);
      answer = random(1,4);
      x = Math.pow(base, answer);
      answer *= r;
      if (r == 3)
      	return "<sup><sup><sup>" + r + "</sup></sup>√" + base + "</sup>log(" + x + ") = ";
      else
      	return "<sup>√" + base + "</sup>log(" + x + ") = ";
   ...