LEARN JQUERY EFFECTS: Trivia Card

Hi Guys,

I spent a long time on this lesson. Mostly because I completed all 3 of the stretch goals. I learned a ton by, sitting here and just forcing my way through it. Make sure you right mouse button on the html window and select “view frame source” as that shows you some of the other classes that you will reference that may not be mentioned in the lesson.

Anyway, try it on your own and if you get stuck see how I did it below.

$(document).ready(() =>{
	$('.hint-box').on('click', () => {
		$('.hint').slideToggle(500)
  })
  $('.wrong-answer-one').on('click', () => {
    $('.wrong-text-one').fadeOut('slow')
    $('.frown').show()
  })
  $('.wrong-answer-two').on('click', () => {
    $('.wrong-text-two').fadeOut('slow')
    $('.frown').show()
  })
  $('.wrong-answer-three').on('click', () => {
    $('.wrong-text-three').fadeOut('slow')
    $('.frown').show()
  })
  $('.correct-answer').on('click', () => {
    $('.frown').hide()
    $('.smiley').show()
    $('.wrong-text-one').fadeOut('slow')
    $('.wrong-text-two').fadeOut('slow')
    $('.wrong-text-three').fadeOut('slow')
    const nextQ = $('<input type="button" value="Next Question"/>');
    $(".question-text").append(nextQ);
  })
  let i = 0;
  /* QUESTIONS PULLED FROM ARRAY */
  $('.question-text').on('click', () => {
    $('.smiley').hide()
    //console.log(`Before pulling from array i = ${i}`)
    if(i > questions.length -1){
      //console.log(`entered the if with i = ${i}`)
      $(".answer-text").hide()
      $(".question-text").html('Finished!!!')
    } else {
      $('.question-text').html(questions[i].q)
      $('.hint').hide()
      $(".wrong-text-one").html(questions[i].a)
      $(".wrong-text-two").html(questions[i].b)
      $(".wrong-text-three").html(questions[i].c)
      $(".correct-answer-text").html(questions[i].d)
      $(".answer-text").fadeIn("fast")
      /* You have to go outside of this function to increment i.
      if you try to use a for loop, it will just run through
      the entire array and you'll only see the last entry in
      the array.  Did some reading and had to implement a
      call back function in order to get it to pause after each
      update from the array. */
      i = increment(i)
      console.log(`After the else i = ${i}`)
		}
  })
	const increment = (val) =>{
    val=val+1
    return val
  }
});

const questions = [
	{
    'q': 'What is the capital of Maine?',
    'a': 'Boonville',
    'b': 'Townshipton',
    'c': 'Woodsvale',
    'd': 'Homeland'
  },
  {
    'q': 'What is the capital of NH?',
    'a': 'Boonville',
    'b': 'Townshipton',
    'c': 'Woodsvale',
    'd': 'Homeland'
  },
  {
    'q': 'What is the capital of California?',
    'a': 'Boonville',
    'b': 'Townshipton',
    'c': 'Woodsvale',
    'd': 'Homeland'
  },
  {
    'q': 'What is the capital of Vermont?',
    'a': 'Boonville',
    'b': 'Townshipton',
    'c': 'Woodsvale',
    'd': 'Homeland'
  }
];