new-fade-functions.js

function startWineQuiz() {
  //This function will start the quiz when user clicks
  //start button
  
  console.log('`startWineQuiz` ran')
  $('#start-button').on('click', function () {
    fader('.quiz-body', 'fade-out', function () {
      console.log('do stuff')
    })
  })
}

function fader (classNameOne, classNameTwo, cb) {
  $(classNameOne).addClass(classNameTwo)
  setTimeout(function () {
    $(classNameOne).remove()
      return cb()
  }, 800)
}

wine-quiz.css

* {
  box-sizing: border-box;
  font-family: 'Lora', serif;
}

img {
  max-width: 400px;
}
.quiz-container {
  height: 400px;
  outline: 1px solid red;
}
.image-body {
  height: 270px;
}
.animate {
  transition: all 300ms;
}
.fade-out {
  opacity: 0;
}

wine-quiz.js

'use strict'

const STORE = {
  questions: [//1
    {
      question: 'Which country consumes the largest volume of wine per capita?',
      answers: [
        'Croatia',
        'Italy',
        'Argentina',
        'Andora'
      ],
      correctAnswer: 'Andora'
    },
    //2
    {
      question: 'Which U.S. state claims the southernmost winery? ',
      answers: [
        'Florida',
        'Hawaii',
        'Texas',
        'California'
      ],
      correctAnswer: 'Hawaii'
    },
    //3
    {
      question: 'What are tannins?',
      answers: [
        'Tannins are the substance in red wine that give it an astringent, mouth-coating feel.',
        'Tannins describe the combination of factors including soil, climate, and elevation that give wine grapes their distinctive character.',
        'Tannins are what we call the juice that is gathered from wine grapes.',
        'Tannins describe the aroma combinations in aged wines.'
      ],
      correctAnswer: 'Tannins are the substance in red wine that give it an astringent, mouth-coating feel.'
    },
    //4
    {
      question: 'All of the below is true of fortified wines except:',
      answers: [
        'Wine fortification originated as a way to preserve wines in warm climates.',
        'Due to high sugar content, fortified wines are always sweet.',
        'Fortified wines have a high alcohol content.',
        'Fortified wines are wines with distilled spirits added during the winemaking process.'
      ],
      correctAnswer: 'Due to high sugar content, fortified wines are always sweet.'
    },
    //5
    {
      question: 'What’s the name of the bottle shape that holds 1.5L of wine?',
      answers: [
        'Imperial',
        'Double',
        'Magnum',
        'Jeroboam'
      ],
      correctAnswer: 'Magnum'
    },
    //6
    {
      question: 'What is the most widely planted wine grape worldwide?',
      answers: [
        'Cabernet Sauvignon',
        'Merlot',
        'Chardonnay',
        'Sauvignon Blanc'
      ],
      correctAnswer: 'Cabernet Sauvignon'
    },
    //7
    {
      question: 'What’s the name for the condition when someone is afraid of wine?',
      answers: [
        'Novinophobia',
        'Cenosillicaphobia',
        'Krasiophobia',
        'Oenophobia'
      ],
      correctAnswer: 'Oenophobia'
    },
    //8
    {
      question: 'What’s the correct definition of orange wine?',
      answers: [
        'Orange wine is a cocktail made with both red and white wines to give it an orange color.',
        'Orange wine describes any wines made from orange fruits.',
        'Orange wines are white wines made in the style of reds, where the grapes ferment with the grape skins to give it an orange color.',
        'Orange wines are not a type of wine. This is a trick question!'
      ],
      correctAnswer: 'Orange wines are white wines made in the style of reds, where the grapes ferment with the grape skins to give it an orange color.'
    }
    ],
};

//sets variables to zero
let currentQuestion = 0
let score = 0

function mainComponent (buttonText) {
  return `<main class='quiz-container'>
      <section class='quiz-body animate'>
        <h1>How much do you really know about wine?</h1>
        <section class='image-body'>
          <img class='banner-image' src="https://i.imgur.com/wHo2o5F.jpg?1" alt="shelf with wine bottles">
        </section>
        <button type="button" name="start" id="start-button">${buttonText}</button>
      </section>
    </main>`
} 



function loadApp() {
  //This function will create and load the main page for my
  //wine quiz in the DOM.
  console.log('`loadApp` ran')
  $('#wineApp').append(mainComponent('Click to Start'))
}

function startWineQuiz() {
  //This function will start the quiz when user clicks
  //start button
  
  console.log('`startWineQuiz` ran')
  $('#start-button').on('click', function () {
    fader(function () {
      console.log('do stuff')
    })
  })
}

function fader (cb) {
  $('.quiz-body').addClass('fade-out')
  setTimeout(function () {
    $('.quiz-body').remove()
      return cb()
  }, 800)
}

// function appender (className, HTMLstring) {
//   $(className).append(HTMLstring)
// }

function renderQuestion() {
  //This function will render the first question
  console.log('`renderQuestion` ran')
  if (currentQuestion < STORE.length) {
    //I want to add a div with class questionAnswerForm but I don't want all the elements created in loadApp to be in the DOM. 
  }
}

function renderAnswers() {
  //This function will render the answer options for the
  //current question
  console.log('`renderAnswers` ran')
}

function updateQuestion() {
  //This function updates the question number
  console.log('`updateQuestion` ran')
}

function updateScore() {
  //This function updates the score; It will increment the
  //score based on user response
  console.log('`updateScore` ran')
}

function submitAnswer() {
  //This function submits a selected answer and checks it against
  //the correct answer. It then runs answer functions accordingly.
  console.log('`submitAnswer` ran')
}

function correctAnswer() {
  //This function will show feedback if the user selects the
  //correct answer
  console.log('`correctAnswer` ran')
}

function wrongAnswer() {
  //This function will show feedback if the users selects the
  //wrong answer
  console.log('`wrongAnswer` ran')
}

//is this a necessary function? Can I reuse renderQuestion?
function nextQuestion() {
  //This function will render the next question
  console.log('`nextQuestion` ran')
}

function finalScore() {
  //This function will deplay user's final score and give
  //feedback based on how many answers they got correct
  console.log('`finalScore` ran')
}

function restartQuiz() {
  //This function will take user back to main page
  //so they can restart the quiz
  console.log('`restartQuiz` ran')
}

function makeQuiz() {
  loadApp()
  startWineQuiz()
  renderQuestion()
  renderAnswers()
  nextQuestion() //do I need this or can I reuse renderQuestion?
  finalScore()
  restartQuiz()
}

$(makeQuiz)