Question

我有下面的单选按钮列表是基于多项选择题，列表中的信息将由非技术用户添加，我想知道是否有一种方法可以使用，所以列表每次加载页面时都可以加载

<fieldset id="question1">
        <div id="scenario">
            QUESTION
        </div>
        <br/><br/>
        <div>
            Please select the correct answer: 
        </div>
        <label>
            <input type="radio" name="q1" value="correct"> ANSWER ONE</input>
        </label>
        <br/>
        <label>
            <input type="radio" name="q1" value="wrong"> ANSWER TWO</input>
        </label>
        <br/>
        <label>
            <input type="radio" name="q1" value="wrong"> ANSWER THREE</input>
        </label>
        <br/>
        <br/>
        <div id="result"></div>
        <br/><br/>
        <button type="button" id="answer" class="check" onclick="mark();" >Submit</button>
    </fieldset>

Answer 1

试试这个......

您需要在一个div下添加所有标签。

 <div class="list">
     <label>
          <input type="radio" name="q1" value="correct"> ANSWER ONE </input>
           <br />
      </label>
      <label> <input type="radio" name="q1" value="wrong"> ANSWER TWO </input>
       <br />
      </label>        

     <label>
      <input type="radio" name="q1" value="wrong"> ANSWER THREE </input>
      <br/>
    </label>
</div>

在新的shuffle.js文件中添加以下代码

  (function($){

   $.fn.shuffle = function() {

    var allElems = this.get(),
        getRandom = function(max) {
            return Math.floor(Math.random() * max);
        },
        shuffled = $.map(allElems, function(){
            var random = getRandom(allElems.length),
                randEl = $(allElems[random]).clone(true)[0];
            allElems.splice(random, 1);
            return randEl;
       });

    this.each(function(i){
        $(this).replaceWith($(shuffled[i]));
    });

    return $(shuffled);

}; 
  })(jQuery);

调用shuffle.js文件在脚本标记中添加以下代码行以随机播放

 <script>
 $(document).ready(function(){
    $( '.list label' ).shuffle();
  });
 </script>

Answer 2

如果答案在数组中，您可以使用此方法

function Shuffle(o) {
       for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
       return o;
};

然后你可以像这样打电话

var testArray = [1,2,3,4,5];
Shuffle(testArray);

有关详细信息，请访问此link

Answer 3

您需要做的是：

将所有答案标签包裹在div元素中，例如<div id="answers"></div>
在标签之间处理<br />元素，而是指定样式label {display: block;};
应用以下Javascript代码

（使用jQuery）：

jQuery(function($){
    var answers = $("#answers");

    answers.html(
        answers.find("label").sort(function(){
            return Math.round(Math.random())-0.5;
        })
    );    
});

你很高兴。

此处JSFiddle

重新排序单选按钮列表

3 个答案: