JSFiddle - React, Tailwind, and code Playground

by reporter

HTML

<body>

    <div id="wordZone"></div>
    
    <ul id="choices">
      <li></li>
      <li></li>
      <li></li>
    </ul>

    <a href="#" id="next" class="translate">Next Word</a>
    
    <div class="win">
      You've Won!
    </div>
    <div class="lose">
      You've Lost!
    </div>
  </body>

JavaScript

let score = 0;
let matrixcounter= 0;

const dict = {
  officeSpeak: ["Hi there!", "Regards", "Per my last email"],
  counter: 0,
};

const matrix = [
  ["Hi there!", "Sup dude", "Salutations"],
  ["Regards", "Hasta luego", "Byebye"],
  ["Per my last email","oopsie!","some other option here, you're writing this game"],
];

const wordZone = $("#wordZone");
const choiceButtons = $("#choices li");


function buildOptions(counti) {
  let turnChoices = matrix[counti];

  //hide next word button - DONE

  $("#next").hide();

  for (let i = 0, ii = turnChoices.length; i < ii; i++) {
    let choiceWord = turnChoices[i];
    let choiceButton = $(choiceButtons[i]);
    let btnClass = "incorrect";

    choiceButton.text(choiceWord);

    if (dict.officeSpeak.indexOf(choiceWord) != -1) {
      btnClass = "correct";
    }

    choiceButton.addClass(btnClass);
  }
}

buildOptions(matrixcounter);

function onClickWord(e) {
  console.log($(this));
  $("#choices li").addClass("active");

  $(".correct").css("color", "green");
  $(".incorrect").css("color", "red");

  if ($(this).hasClass("correct")) {
    score++;
    console.log(score);
  }

  $("#next").show();

   let turnChoices = matrix[+1];
}

$("#choices li").click(onClickWord);

//$("#next").click(buildOptions);
$("#next").click(function() {
    matrixcounter++;
    buildOptions(matrixcounter);
});

function finalScore() {
  $("#wordZone").show(score);

  if (finalScore >= 2) {
    $("#wordZone").addClass("win");
    $("#win").show();
  } else {
    $("#wordZone").addClass("lose");
    $("#lose").show();
  }
}

finalScore();

//final score - HELP