flashcard.js

const infoText = document.querySelector("#info-text");

function next() {
  infoText.textContent = "";

  const candiates = [...window.ITEMS];

  const nextRandomItem = () => {
    const idx = Math.floor(Math.random() * candiates.length);
    const result = candiates[idx];
    candiates.splice(idx, 1);
    return result;
  };

  const item = nextRandomItem();

  const mangle = Math.random() > 0.5;

  const question = `What is the ${mangle ? "" : "de"}mangled form of this?`;

  const children = card.querySelectorAll("#card > *");
  children[0].textContent = question;
  children[1].textContent = mangle ? item.means : item.mangle;

  const options = [
    nextRandomItem(item),
    nextRandomItem(item),
    nextRandomItem(item),
    nextRandomItem(item),
  ];
  const correctIdx = Math.floor(Math.random() * options.length);
  options[correctIdx] = item;

  children[2].replaceChildren(
    ...options.map((opt, i) => {
      const isCorrect = i === correctIdx;

      const text = document.createElement("li");
      text.classList.add("flashcard-option");
      text.textContent = mangle ? opt.mangle : opt.means;
      text.tabIndex = "0";
      text.addEventListener("click", () => {
        if (isCorrect) {
          infoText.classList.remove("flashcard-error");
          next();
        } else {
          infoText.classList.add("flashcard-error");
          infoText.textContent = "Incorrect.";
        }
      });
      return text;
    })
  );
}

next();