在页面中随机化列表项的顺序时缺少元素

时间:2016-06-27 10:56:06

标签: javascript jquery html random

我正在尝试为一个教育网站开发一个小测试,我想随机化问题和练习的顺序,然后用一组单选按钮将每个问题下的答案顺序排成一行。我尝试过在两个不同的问题上找到的代码(即this onethis one),尽管两个答案实际上都是一样的。我正在使用的代码在某种程度上做了我想要的,但有时我的测试部分缺失(大多数时候我得到5个问题和2-3个练习而不是6个和4个)。我该如何纠正?这个JSFiddle中的完整代码示例(来自后端的一些不相关的东西,忽略它们 - 内容是占位符以使调试更容易),以及下面的javascript / jQuery代码:

$(document).ready(function () {
        var questions = $('.question');
        for (var i = 0; i < questions.length; i++) {
            var target = Math.floor(Math.random() * questions.length - 1) + 1;
            var target2 = Math.floor(Math.random() * questions.length - 1) + 1;
            questions.eq(target).before(questions.eq(target2));
        }

        var exercises = $(".exercise");
        for (var j = 0; j < exercises.length; j++) {
            var target = Math.floor(Math.random() * exercises.length - 1) + 1;
            var target2 = Math.floor(Math.random() * exercises.length - 1) + 1;
            exercises.eq(target).before(exercises.eq(target2));
        }
    });

P.S。 #1:该网站的后端是使用Asp.Net和C#构建的,如果这与问题有关。

P.S。 #2:运行小提琴四到五次并计算问题和练习的数量以重现问题。

2 个答案:

答案 0 :(得分:2)

我更改了您的代码,因此targettarget2不同:

的JavaScript

var questions = $('.question');
for (var i = 0; i < questions.length; i++) {
  var target = Math.floor(Math.random() * questions.length - 1) + 1;
  var target2 = target;
  while(target2 === target) {
    target2 = Math.floor(Math.random() * questions.length - 1) + 1;
  }
  questions.eq(target).before(questions.eq(target2));
}

var exercises = $(".exercise");
for (var j = 0; j < exercises.length; j++) {
  var target = Math.floor(Math.random() * exercises.length - 1) + 1;
  var target2 = target;
  while(target2 === target) {
    target2 = Math.floor(Math.random() * exercises.length - 1) + 1;
  }
  exercises.eq(target).before(exercises.eq(target2));
}

fiddle

答案 1 :(得分:1)

我将假设所有render() { let FirstTabStyles = Object.assign( defaultTabStyles, (isFirstSelected && selectedStyles || {}) ) let SecondTabStyle = Object.assign( defaultTabStyles, (isSecondSelected && selectedStyles || {}) ) return ( <View> <FirstTab style={FirstTabStyle} /> <SecondTab style={SecondTabStyle} /> </View> ) } / .question元素都在同一个父元素中。

我接近它的方式是:

  1. 将问题/练习作为一个数组抓取并分离出来

  2. any of serveral ways addressed in this question's answers

  3. 中随机化数组
  4. 追加他们

  5. 例如:

    .exercise
    function randomize(selector) {
      // Get the elements and their parent
      var elements = $(selector);
      var parent = elements.eq(1).parent();
      
      // Detach, get array
      elements = elements.detach().get();
      
      // Shuffle it
      shuffle(elements);
      
      // Attach
      parent.append(elements);
    }
    
    // From https://stackoverflow.com/a/2450976/157247
    function shuffle(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;
    }
    
    randomize(".question");
    randomize(".exercise");