**I want to add a photo to the questions that when a question also the photo.**
each question can have a photo.
each question can have a photo.

and you can show it next to the question.
each question can have a photo.

```js
$(document).ready(function(){

  // event listeners
  $("#remaining-time").hide();
  $("#start").on('click', trivia.startGame);
  $(document).on('click' , '.option', trivia.guessChecker);

})

var trivia = {
  // trivia properties
  correct: 0,
  incorrect: 0,
  unanswered: 0,
  currentSet: 0,
  timer: 20,
  timerOn: false,
  timerId : '',
  // questions options and answers data
  questions: {
    q1: 'Who is actually a chef?',
    q2: 'What does Joey love to eat?',
    q3: 'How many times has Ross been divorced?',
    q4: 'How many types of towels does Monica have?',
    q5: "Who stole Monica's thunder after she got engaged?",
    q6: 'Who hates Thanksgiving?',
    q7: "Who thinks they're always the last to find out everything?"
  },
  options: {
    q1: ['Monica', 'Chandler', 'Rachel', 'Ross'],
    q2: ['Fish', 'Apples', 'Oranges', 'Sandwhiches'],
    q3: ['5', '2', '1', '3'],
    q4: ['3', '8', '11', '6'],
    q5: ['Rachel','Phoebe','Emily','Carol'],
    q6: ['Joey','Chandler','Rachel','Ross'],
    q7: ['Ross', 'Phoebe', 'Monica','Chandler']
  },
  answers: {
    q1: 'Monica',
    q2: 'Sandwhiches',
    q3: '3',
    q4: '11',
    q5: 'Rachel',
    q6: 'Chandler',
    q7: 'Phoebe'
  },
  // trivia methods
  // method to initialize game
  startGame: function(){
    // restarting game results
    trivia.currentSet = 0;
    trivia.correct = 0;
    trivia.incorrect = 0;
    trivia.unanswered = 0;
    clearInterval(trivia.timerId);

    // show game section
    $('#game').show();

    //  empty last results
    $('#results').html('');

    // show timer
    $('#timer').text(trivia.timer);

    // remove start button
    $('#start').hide();

    $('#remaining-time').show();

    // ask first question
    trivia.nextQuestion();

  },
  // method to loop through and display questions and options 
  nextQuestion : function(){

    // set timer to 20 seconds each question
    trivia.timer = 10;
     $('#timer').removeClass('last-seconds');
    $('#timer').text(trivia.timer);

    // to prevent timer speed up
    if(!trivia.timerOn){
      trivia.timerId = setInterval(trivia.timerRunning, 1000);
    }

    // gets all the questions then indexes the current questions
    var questionContent = Object.values(trivia.questions)[trivia.currentSet];
    $('#question').text(questionContent);

    // an array of all the user options for the current question
    var questionOptions = Object.values(trivia.options)[trivia.currentSet];

    // creates all the trivia guess options in the html
    $.each(questionOptions, function(index, key){
      $('#options').append($('<button class="option btn btn-info btn-lg">'+key+'</button>'));
    })

  },
  // method to decrement counter and count unanswered if timer runs out
  timerRunning : function(){
    // if timer still has time left and there are still questions left to ask
    if(trivia.timer > -1 && trivia.currentSet < Object.keys(trivia.questions).length){
      $('#timer').text(trivia.timer);
      trivia.timer--;
        if(trivia.timer === 4){
          $('#timer').addClass('last-seconds');
        }
    }
    // the time has run out and increment unanswered, run result
    else if(trivia.timer === -1){
      trivia.unanswered++;
      trivia.result = false;
      clearInterval(trivia.timerId);
      resultId = setTimeout(trivia.guessResult, 1000);
      $('#results').html('<h3>Out of time! The answer was '+ Object.values(trivia.answers)[trivia.currentSet] +'</h3>');
    }
    // if all the questions have been shown end the game, show results
    else if(trivia.currentSet === Object.keys(trivia.questions).length){

      // adds results of game (correct, incorrect, unanswered) to the page
      $('#results')
        .html('<h3>Thank you for playing!</h3>'+
        '<p>Correct: '+ trivia.correct +'</p>'+
        '<p>Incorrect: '+ trivia.incorrect +'</p>'+
        '<p>Unaswered: '+ trivia.unanswered +'</p>'+
        '<p>Please play again!</p>');

      // hide game sction
      $('#game').hide();

      // show start button to begin a new game
      $('#start').show();
    }

  },
  // method to evaluate the option clicked
  guessChecker : function() {

    // timer ID for gameResult setTimeout
    var resultId;

    // the answer to the current question being asked
    var currentAnswer = Object.values(trivia.answers)[trivia.currentSet];

    //''if the text of the option picked matches ''''the answer of the current question, increment correct
    if($(this).text() === currentAnswer){
      //turn button green for correct
      $(this).addClass('btn-success').removeClass('btn-info');

      trivia.correct++;
      clearInterval(trivia.timerId);
      resultId = setTimeout(trivia.guessResult, 1000);
      $('#results').html('<h3>Correct Answer!</h3>');
    }
    // else the user picked the wrong option, increment incorrect
    else{
      // turn button clicked red for incorrect
      $(this).addClass('btn-danger').removeClass('btn-info');

      trivia.incorrect++;
      clearInterval(trivia.timerId);
      resultId = setTimeout(trivia.guessResult, 1000);
      $('#results').html('<h3>Better luck next time! '+ currentAnswer +'</h3>');
    }

  },
  //method to remove previous question results and options
  guessResult : function(){

    // increment to next question set
    trivia.currentSet++;

    // remove the options and results
    $('.option').remove();
    $('#results h3').remove();

    // begin next question
    trivia.nextQuestion();

  }

}
```

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Trivia Game</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- <link rel="stylesheet" href="/Users/Jaymar/SMU_HW/week5/TriviaGame/assets/css/style.css"> -->
    <link rel="stylesheet" href="./assets/css/style.css">

    <link rel="icon" type="image/gif" href="./assets/images/IMG_3456.jpg"/>

    <!-- Custom styles for this template -->
<!--    <link href="jumbotron-narrow.css" rel="stylesheet">-->

  </head>

  <body>

    <audio controls loop>
      <source src="./assets/images/tumblr_lq9mbjMc3g1qas0n5o1.mp3" type="audio/mp3"/>
    </audio>

    <div class="container">
      <div class="header text-center clearfix">
        <h1 class="text-muted">Friends trivia game</h1>
      </div>
      <div class="jumbotron jumbotron-fluid">
        <div class="container">
        <div id="game">
          <h2>FRIENDS Trivia Game</h2>
          <p id="remaining-time" class="lead">Remaining Time: <span id="timer"></span></p>
          <p id="question" class="lead"></p>
        </div>
        <div id="results">
        </div>
      </div>

      <div class="row">
        <div id="choices" class="text-center">
          <button id="start" class="btn btn-info btn-lg">Start Game</button>
          <div id="options">

          </div>

        </div>
      </div>

    </div> <!-- /container -->

    <!-- jQuery CDN-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Bootstrap CDN -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!-- TRIVIA APP JS -->
    <script src="./assets/js/app.js"></script>  

  </body>
</html>
```

**this is the html code to show the questions and answers, I hope it can be done randomly**

thanks