0

こんにちは。HTML5/JQueryで注文/並べ替えのクイズを作成する際に役立つアドバイスを探しています。非常に単純に、ページ上にランダムな順序で配置された一連のステップを表示したいので、ユーザーはそれらを並べ替えて正しい順序にする必要があります。jqueryライブラリとjquery-ui-1.8.5.custom.min.jsファイルを使用し、ページで次のjavascriptを呼び出す「どこか」の例を見つけることができました。

    <script type="text/javascript" src="../scripts/jquery-1.4.3.min.js"></script> 
    <script type="text/javascript" src="../scripts/jquery-ui-1.8.5.custom.min.js"> </script>
  <script type="text/javascript">
    var correctOrder = new Array();
    var liItems = new Array();
    $(function() {
      $("#sortable").sortable({placeholder: 'ui-state-highlight'});
      $("#sortable").disableSelection();
      var ul = document.getElementById('sortable');
      var li = ul.getElementsByTagName("li");
      for(var i = 0; i < li.length; i++){
        correctOrder.push(li[i].innerHTML);
        liItems.push(li[i]);
      }
    });
    (function($){
      $.fn.shuffle = function() {
        return this.each(function(){
          var items = $(this).children();
          return (items.length)
            ? $(this).html($.shuffle(items))
            : this;
        });
      }
      $.shuffle = function(arr) {
        for(
          var j, x, i = arr.length; i;
          j = parseInt(Math.random() * i),
          x = arr[--i], arr[i] = arr[j], arr[j] = x
        );
        return arr;
      }
    })(jQuery);
    function resetForm(){
      $('#sortable').shuffle();
      for(var i = 0;i < liItems.length; i++){
        liItems[i].className = "";
      }
    }
    function checkForm(){
      var ul = document.getElementById('sortable');
      var li = ul.getElementsByTagName("li");
      for(var i = 0;i < li.length; i++){
        if(li[i].innerHTML != correctOrder[i]){
          li[i].className = "incorrect";
        }else{
          li[i].className = "correct";
        }
      }
    }
  </script>

このコードは正常に機能しているように見えますが、リストアイテムの順序は正常にランダム化されません（body htmlは、idが'sortable'の順序付けられていないクラスを持つdivです。リセット関数を初期化コードにスローしようとしましたが、それだけです。順序と回答をランダム化しますが、これは間違いなく私が望まないことです。ユーザーがページに移動して[送信]をクリックするだけで、リストアイテムがランダム化されなかったため、すべての回答が正しくなります。

これが理にかなっていることを願っています。私はJSに少し慣れていません。制限があるため、FlashとActionScriptから離れたいと思っています。

ありがとう

4

2 に答える 2

1

たぶん、forループでstatement2を変更すると、問題が解決するでしょう。

for(statement1;statement2;statement3){
   //loop
}
于 2013-01-24T07:31:58.710 に答える
0

これをシャッフルしてみてください：

デモ： http： //jsbin.com/ibebav/1/edit（ctrl + Enterキーを押して更新）

(function($) {

  function _range(min, max, rand) {
    var arr = (new Array(++max - min))
      .join('.').split('.')
      .map(function(v, i){ return min + i; });
    return rand ?
      arr.map(function(v) { return [Math.random(), v]; })
         .sort().map(function(v) { return v[1]; }) :
      arr;
  }

  $.fn.shuffle = function() {
    return this.each(function() {
      var $this = $(this)
        , children = $this.children()
        , rand = _range(0, children.length-1, true).map(function(el) {
            return children[el];
          });
      if (children.length) $(rand).appendTo($this);
    });
  };

}(jQuery));

これにより、目的に近づくことができます。また、jQueryを使用してから完全に使用する場合は、通常のDOMとjQueryを混在させないでください。混同しないでください。

于 2013-01-24T07:05:42.447 に答える