Как сделать так, чтобы ответы отображались в другом порядке?

Question

Я хочу, чтобы ответы казались беспорядочными вместе с вопросом, поэтому ответы не всегда выглядят одинаково, но ответы кажутся запутанными с вопросом.

пример в вопросе 1 Кто такой действительно повар? ответить: «Моника», «Чендлер», «Рэйчел», «Росс». Я хочу, чтобы эти ответы отображались случайным образом как «Чендлер», «Росс», «Рэйчел», «Моника» или «Моника», «Рэйчел», » Росс ',' Чендлер '

$(document).ready(function() {
  $("#remaining-time").hide();
  $("#start").on("click", trivia.startGame);
  $(document).on("click", ".option", trivia.guessChecker);
});

var trivia = {
    correct: 0,
    incorrect: 0,
    unanswered: 0,
    currentSet: 0,
    // "seen" property will keep track of the seen questions so we don't re-display them again
    seen: [],
    // Update: limit the number of question per game. Usong a property so you can change its value whenever you want to change the limit
    limit: 4,
    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"
    },
    // random number generator
    random: (min, max) => Math.floor(Math.random() * (max - min + 1)) + min,
    startGame: function() {
      trivia.currentSet = 0;
      // set "seen" to an empty array for a new game
      trivia.seen = [];
      trivia.correct = 0;
      trivia.incorrect = 0;
      trivia.unanswered = 0;
      clearInterval(trivia.timerId);
      $("#game").show();
      $("#results").html("");
      $("#timer").text(trivia.timer);
      $("#start").hide();
      $("#remaining-time").show();
      trivia.nextQuestion();
    },
    nextQuestion: function() {
      trivia.timer = 10;
      $("#timer").removeClass("last-seconds");
      $("#timer").text(trivia.timer);
      if (!trivia.timerOn) {
        trivia.timerId = setInterval(trivia.timerRunning, 1000);
      }
      // get all the questions
      const qts = Object.values(trivia.questions);
      // init the random number
      let rq = null;
      // firstly, if no more questions to show set rq to -1 to let us know later that the game has finished 
      // Update: checking if we reached the "limit"
      if (trivia.seen.length >= trivia.limit) rq = -1
      else {
        // otherwise generate a random number from 0 inclusive to the length of the questions - 1 (as array indexing starts from 0 in JS) also inclusive
        do {
          // generate a random number using the newly added "random" method
          rq = trivia.random(0, qts.length - 1);
        } while (trivia.seen.indexOf(rq) != -1); // if the question is already seen then genrate another number, do that till we get a non-seen question index
        // add that randomly generated index to the seen array so we know that we have already seen it
        trivia.seen.push(rq);
        // increment the counter
        trivia.counter++;
      }
      // current question index is the generated random number "rq"
      trivia.currentSet = rq;
      var questionContent = Object.values(trivia.questions)[rq];
      $("#question").text(questionContent);
      var questionOptions = Object.values(trivia.options)[trivia.currentSet];
      $.each(questionOptions, function(index, key) {
        $("#options").append(
          $('<button class="option btn btn-info btn-lg">' + key + "</button>")
        );
      });
    },
    timerRunning: function() {
      if (
        trivia.timer > -1 &&
        // all the questions have already been seen
        // Update: now we check against the limit property
        trivia.seen.length < trivia.limit
    ) {
      $("#timer").text(trivia.timer);
      trivia.timer--;
      if (trivia.timer === 4) {
        $("#timer").addClass("last-seconds");
      }
    } 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 the game ended as we know that -1 means no more questions to display
    else if (trivia.currentSet === -1) {
      $("#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>"
      );
      $("#game").hide();
      $("#start").show();
    }
  },
  guessChecker: function() {
    var resultId;
    var currentAnswer = Object.values(trivia.answers)[trivia.currentSet];
    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 {
      $(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>"
      );
    }
  },

  guessResult: function() {
    // no need to increment trivia.currentSet anymore
    $(".option").remove();
    $("#results h3").remove();
    trivia.nextQuestion();
  }
};

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 -->

Answer 1

Там, где вы начинаете добавлять ответы на страницу, попробуйте вместо этого следующий код:

$.each(Object.values(trivia.options)[trivia.currentSet].sort( () => { 
    return .5 - Math.random(); 
}), key => {
    $("#options").append(
        $('<button class="option btn btn-info btn-lg">' + key + "</button>")
    );
});

Это небезопасный или эффективный способ рандомизации массива, но он помогает примерно в этом. Он просто выбирает случайное число от 0 до 1 и вычитает его из 0,5, поэтому возвращаемое число находится в диапазоне от -0,5 до 0,5. Все остальное делает функция sort.

Все это находится в конце вашей функции trivia.nextQuestion.

Все это можно было бы сделать без jQuery. Если вы не используете его по какой-либо конкретной причине, возможно, стоит попробовать это в vanilla JavaScript. Для начала вот тот же фрагмент кода:

const options = document.getElementById("options");
Object.values(trivia.options)[trivia.currentSet].sort( () => { 
    return .5 - Math.random(); 
}).forEach(key => {
    options.innerHTML += `<button class="option btn btn-info btn-lg">${key}</button>';
});

И пока вы на нем, посмотрите, должны ли trivia.questions, trivia.options или trivia.answers быть объектами, или если бы массивы работали нормально. Но это принадлежит Мрое из Code Review ...