輸出前隨機化 JSON 內容的內容

Question

公平警告，您可能會對下面的代碼感到畏縮，但我正在盡我所知。

我有一個帶有幾個問題的 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>

我需要做的是隨機化每次用戶訪問頁面時向用戶顯示問題的順序。 我見過獲取單個隨機項目但不隨機化整個列表的方法。

Answer 1

在運行each循環之前：

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

您可以將data.questions數組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; }

輸出前隨機化 JSON 內容的內容

問題描述

1 個解決方案

解決方案1
1 已采納 2020-03-05 12:11:03

輸出前隨機化 JSON 內容的內容

問題描述

1 個解決方案

解決方案1 1 已采納 2020-03-05 12:11:03

解決方案1
1 已采納 2020-03-05 12:11:03