输出前随机化 JSON 内容的内容

Question

Fair warning, you will probably cringe at the code below but I am making do with best of my knowledge.公平警告，您可能会对下面的代码感到畏缩，但我正在尽我所知。

I have a JSON file with several questions, the contents of which are below:我有一个带有几个问题的 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
        }
    ]
}

I am getting this content and displaying it as a quiz within a slider.我正在获取此内容并将其显示为滑块中的测验。 To do this, I am using the below:为此，我正在使用以下内容：

<!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>

What I need to be able to do is randomise the order that the questions are shown to the user each time they visit the page.我需要做的是随机化每次用户访问页面时向用户显示问题的顺序。 I've seen methods of getting a single random item but not randomising the entire list.我见过获取单个随机项目但不随机化整个列表的方法。

Answer 1

Before you run each loop:在运行each循环之前：

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

you can shuffle the data.questions array like:您可以将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;
}

and then use it like:然后像这样使用它：

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

DEMO:演示：

 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