在输出前随机化 JSON 内容的内容答案

【问题标题】：Randomise Contents of JSON content before output在输出前随机化 JSON 内容的内容
【发布时间】：2020-03-05 12:06:03
【问题描述】：

公平的警告，您可能会对下面的代码感到畏缩，但我正在尽我所能。

我有一个包含几个问题的 JSON 文件，其内容如下：

{
    "questions": [
        {
            "id": 1,
            "question": "What is 2+2?",
            "answers": [
                {
                    "answer": "1"
                },
                {
                    "answer": "6"
                },
                {
                    "answer": "4"
                }
          ],
          "answer": 3
        },
        {
            "id": 2,
            "question": "What is a dog?",
            "answers": [
                {
                    "answer": "animal"
                },
                {
                    "answer": "object"
                }
          ],
          "answer": 1
        }
    ]
}

我正在获取此内容并将其显示为滑块中的测验。为此，我使用以下内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>title</title>
  <link rel="stylesheet" href="stylesheet.css" type="text/css">
  <link rel="stylesheet" href="slick/slick.css" type="text/css">
  <link rel="stylesheet" href="slick/slick-theme.css" type="text/css">
  <style type="text/css">
.answerCorrect {
    color:green;
}
.answerIncorrect {
    color:red;
}
  </style>
  </head>
  <body>

    <div id="quizPage">
        <div id="quizSlider"></div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="slick/slick.js" type="text/javascript"></script>

    <script>
            // Start the question slider


            $.getJSON("quiz.json", function(data) {
                var html = '';
                console.log(data.questions);
                $.each(data.questions, function(key, value){
                    correctAnswer = value.answer;
                    html += '<div id="'+value.id+'" class="quizItem">';
                    html += '<div class="quizQuestion">'+value.question+'</div>';

                    $.each(value.answers, function(index, question) {
                        answerIndex = index+1;
                        if(answerIndex == correctAnswer) { answerValidation = 'true'; } else { answerValidation = 'false'; }
                        html += '<div data-answerValidation="'+answerValidation+'" data-answerIndex="'+answerIndex+'" class="quizAnswer">'+question.answer+'</div>';
                    });
                    html += '</div>';
                });
                $('#quizSlider').html(html);
                $('#quizSlider').slick();
            });

            $("#quizSlider").on( 'click', '.quizAnswer', function () {
                validation = $( this ).attr( "data-answerValidation" );
                console.log(validation);
                if ($( this ).attr( "data-answerValidation" ) === 'true') {
                    $( this ).addClass('answerCorrect');
                } else {
                    $( this ).addClass('answerIncorrect');
                    $( this ).siblings('[data-answerValidation="true"]').addClass('answerCorrect');
                }
                setTimeout(function(){ $('#quizSlider').slick('slickNext'); }, 1000);

            });
    </script>
  </body>
</html>

我需要做的是随机化每次访问页面时向用户显示问题的顺序。我见过获取单个随机项目但不随机化整个列表的方法。

【问题讨论】：

标签： javascript jquery arrays json

【解决方案1】：

在运行each 循环之前：

$.each(data.questions, function(key, value){

您可以像这样随机排列 data.questions 数组：

function ShuffleQuestions(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

然后像这样使用它：

ShuffleQuestions(data.questions);
$.each(data.questions, function(key, value){

演示：

function ShuffleQuestions(array) {
  var currentIndex = array.length,
    temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

let questions = [
  { "id": 1, "question": "What is 2+2?" },
  { "id": 2, "question": "What is a dog?" },
  { "id": 3, "question": "What is 1+1?" },
];
ShuffleQuestions(questions);
console.log(questions);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：