JSFiddle - React, Tailwind, and code Playground

by frncsdrk

HTML

<section class="question-container" id="question-container">
  <h2 class="question-number"><!--Question 1--></h2>
  <h3 class="question" id="question"><!--Who is the most successful manager of Manchester United?--></h3>
  <ul class="answers-container" id="answers-container">
    <li class="options" id="pic1"><!--Sir Matt Busby--></li>
    <li class="options" id="pic2"><!--Louis Van Gaal--></li>
    <li class="options" id="pic3"><!--Ryan Giggs--></li>
    <li class="options" id="pic4"><!--Sir Alex Ferguson--></li>
  </ul>
</section>
<button id="go" class="">
  Start
</button>

JavaScript

var i = 0;
var j = 0;
var allQuestions = [{
      questionNumber: 1,
      question: 'Who is the most successful manager of Manchester United?',
      options: ['Sir Matt Busby', 'Louis Van Gaal', 'Ryan Giggs', 'Sir Alex Ferguson'],
      answer: 3,
      info: 'Sir Alex Ferguson was the manager of Manchester United for 26 years between 1986 and 2013. During that time he amassed 38 trophies including 13 Premier League titles, five FA Cups and two UEFA Champions League titles. His win rate was nearly 60 per cent, the highest of any manager in the history of the club.'
    }];

    //start quiz and generate first question//
    $('#go').on('click', function() {
      $('.start').hide();
      generateQuestions();

    });

    function generateQuestions() {
      $('.question-container').fadeIn(1000);
      $('.submit').fadeIn(1000);
      var firstQuestion = allQuestions[0].question;
      $('.question').html(firstQuestion);
      console.log(firstQuestion);
      var firstNumber = allQuestions[i].questionNumber;
      $('.question-number').html("Question" + " " + firstNumber);
      console.log(firstNumber);
      /*var firstOptions = allQuestions[i].options;
          $('li').html(firstOptions);
          console.log(firstOptions);*/
      $(".options").each(function(idx, elem) {
      	// console.log(elem);
      	$(elem).text(allQuestions[0].options[idx]);
      });
    };

    //submit answer and show answer modal//
    $('.submit').on('click', function() {
      $('.answer-overlay').show();
      submitAnswer();
    });

    function submitAnswer() {
      $('.answer-overlay').show();
      var currentAnswer = allQuestions[i].answer;
      $('.answer').html(currentAnswer);
      console.log(currentAnswer);
      var currentInfo = allQuestions[i].info;
      $('.answer-info').html(currentInfo);
      console.log(currentInfo);
    };

    //hide answer modal and show next question//
    $('.next-question').on('click', function() {
      nextQuestion();
   ...