JSFiddle - React, Tailwind, and code Playground

by Kalashnikov

HTML

<form id="clozeTest">
  <p class="level" id="level0">Today, I went to the
    <input id="mart" class="challenge" />and bought some milk and eggs. I knew it was going to rain, but I forgot
    to take my
    <input id="umbrella" class="challenge" />, and ended up getting wet on the way
    <input id="home" class="challenge"
    />.</p>
  <p class="level" id="level1">I saw a man lay his jacket on a puddle for a woman crossing the street.
    I thought that was very
    <input id="adj" class="challenge" />.</p>
  <div id="controls">
    <button id="check" type="submit">Check</button>
    <button id="nextLevel">Next Level</button>
  </div>
</form>

CSS

#clozeTest {
  margin: 10px;
  font-family: Deja vu sans, sans-serif;
}
#controls {
  margin: 10px;
  float: right;
}
.level {
  display: none;
}
.level.current {
  display: block;
}
.challenge {
  width: 100px;
  border: none;
  border-bottom: 1px solid black;
}
.challenge.correct {
  box-shadow: 0 0 5px green;
}
.challenge.wrong {
  box-shadow: 0 0 5px red;
}

JavaScript

var Acceptable = 7 / 10;
var Challenges = [{
  //"identifier": ["answer", "another answer"],
  "mart": ["mart", "shop", "supermarket"],
    "umbrella": ["umbrella", "coat"],
    "home": ["back", "home"],
  }, {
  "adj": ["romantic", "chivalrous", "gallant", "foolish", "cheesy"],
  },
];
var CurrentLevel = -1;

var form = document.getElementById("clozeTest");
var nextButton = document.querySelector("button#nextLevel");
nextButton.disabled = true;

function check() {
  var guesses = form.getElementById("level"+CurrentLevel).getElementsByClassName("challenge");
  var total = guesses.length;
  var correct = 0;
  for (var i = 0; i < total; i++) {
    guesses[i].classList.remove("correct");
    guesses[i].classList.remove("wrong");
    var answers = Challenges[CurrentLevel][guesses[i].id];
    if (-1 != answers.indexOf(guesses[i].value.toLowerCase())) {
      guesses[i].classList.add("correct");
      correct++;
    } 
    else 
      guesses[i].classList.add("wrong");
  }
  console.log(correct, "out of", total);
  if (correct / total >= Acceptable) 
    nextButton.disabled = false;
}

function nextLevel() {
  CurrentLevel++;
  var levels = form.getElementsByClassName("level");
  for (var i = 0; i < levels.length; i++)
  levels[i].classList.remove("current");
  form.getElementById("level" + CurrentLevel).classList.add("current");
}

nextButton.addEventListener("click", function (e) { nextLevel(); e.preventDefault(); });
form.addEventListener("submit", function (e) { check(); e.preventDefault(); });

nextLevel();