JSFiddle - React, Tailwind, and code Playground

by adelura

HTML

<p><label>Number of words in a list <input name="words" type="number" value="20" /></label></p>
<p><label>Correct swipes <input name="correct" type="number" value="8"/></label></p>
<p><label>Total swipes <input name="swipes" type="number" value="10" /></label></p>

<p>Maximum known factor <span name="maximum"></span></p>

JavaScript

document.querySelectorAll('input[type="number"]').forEach(function (elem) {
	console.log(elem);
  
  elem.addEventListened('change', function () {
  	let swipes = [
    	...[].fill.call({length: 10}, {known: true}),
      ...[].fill.call({length: 2}, {known: false})
    ];
  });
});

function calculateMaximumKnownFactor(numberOfWords) {
  return knownFactor(numberOfWords) * 10;
}

// This should rather calculate based on when last time word was swiped
// If someone swiped seven days ago last time and this time swiped that know word
// it means that he know word.
function calculateKnownFactor(guesses) {
  guesses = guesses.slice(0, 10);

  let factor = 0;

  guesses = guesses.filter(guess => typeof guess.numberOfWords === 'number');

  guesses.forEach(function (guess) {
    if (guess.known) {
      factor += knownFactor(guess.numberOfWords);
    } else {
      factor += unknownFactor(guess.numberOfWords) * -1;
    }
  });

  return factor;
}

function knownFactor(numberOfWords) {
  return 1 - unknownFactor(numberOfWords);
}

function unknownFactor(numberOfWords) {
  return (1 / Math.pow(numberOfWords, 0.2));
}