JSFiddle - React, Tailwind, and code Playground

by MarkSchultheiss

HTML

<div id="QnA" align="center">
  <div id="Question_List" style="position:absolute; z-index=99; width:400px; height:100px; top:50px; left:100px; font-size:45px; font-family:'HelveticaNeue'; color:green;"></div>

  <img id="STBAnswer_01" alt="first" class="answers" style="z-index=99; position:absolute; top:100px; left:50px; border:0px;">
  <img id="STBAnswer_02" alt="secon" class="answers" style="z-index=99; position:absolute; top:200px; left:50px; border:0px;">
  <img id="STBAnswer_03" alt="third" class="answers" style="z-index=99; position:absolute; top:300px; left:50px; border:0px;">
</div>

<div id="GameOver" align="center" style="position:absolute; height:1920px; width:1080px; background-repeat: no-repeat; display: none; z-index=4; top:0px; left:0px; ">
  GAME OVER
</div>

JavaScript

console.clear();
var myquiz = myquiz || {
  questionOrder: ["Q1", "Q2", "Q3"],
  answerOrder: [
    ["Yes", "No"],
    ["Yes", "No", "Maybe"],
    ["Yes", "No"]
  ],
  CorrectAnswers: ["1", "2", "2"],
  numberCorrect: 0
};

var question, answerList, random_QuestionIndex;
//Temp Answer Variable
var AnswerIndex = "";
var slideDuration = 100;

function getRandom() {
  //To Set random Question
  random_QuestionIndex = Math.floor(Math.random() * myquiz.questionOrder.length);
  console.log("rqi" + random_QuestionIndex);
  //Assign Variable to generate random question for the quiz
  question = myquiz.questionOrder[random_QuestionIndex];
  answerList = myquiz.answerOrder[random_QuestionIndex];
  $('#Question_List').html(question);
  //Generate random answers in relation to the questions
  $('.answers').hide();
  for (var i = 0; i < answerList.length; i++) {
    $('.answers').eq(i).attr('src', answerList[i]).show();
  }
}


function selectSTBAnswer(index) {
  AnswerIndex = index + "";
  console.log(AnswerIndex);
  console.log(myquiz.CorrectAnswers[random_QuestionIndex]);
  //Conditional Answer Check; if answer is wrong, GameOver, else proceed to next Question
  if (myquiz.CorrectAnswers[random_QuestionIndex] != AnswerIndex) {
    console.log("IncorrectAnswer");
    $('#QnA').fadeOut({
      duration: slideDuration,
      queue: false
    });
    $('#GameOver').fadeIn({
      duration: slideDuration,
      queue: false
    });
  } else {

    console.log("CorrectAnswer");
    myquiz.numberCorrect++;
    getRandom();
    for (i = 0; i < 3; i++) {}
  }
}
$('.answers').on('click', function() {
  var index = $(this).index();
  selectSTBAnswer(index);
  if (myquiz.numberCorrect === 3) {
    alert("winner winner chicken dinner");
    myquiz.numberCorrect = 0;
  }
});
getRandom();