如何在創建數組之前創建Randomize選項

在我的UI中，我創建了一個選擇和重新排序幫助jquery，HTML，CSS之後，我需要創建一個正確的序列1,2,3並在序列顯示正確的按鈕時是正確的，並且在序列錯誤時顯示錯誤的按鈕。如何在創建數組之前創建Randomize選項

這裏是我的jQuery代碼：

$(function() { 
 
    $("#sortable").sortable({ 
 
    revert: true 
 
    }); 
 
    $("#draggable").draggable({ 
 
    connectToSortable: "#sortable", 
 
    helper: "clone", 
 
    revert: "invalid" 
 
    }); 
 
    $("ul, li").disableSelection(); 
 
});

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-bottom: 10px; 
 
} 
 

 
.ui_color { 
 
    margin: 5px; 
 
    padding: 5px; 
 
    width: 570px; 
 
    height: 47px; 
 
    background-color: #46B8DA; 
 
    border: 1px solid #c5c5c5; 
 
    font-weight: normal; 
 
    color: #454545; 
 
} 
 

 
.header { 
 
    border: 1px solid black; 
 
    width: 569px; 
 
    height: 37px; 
 
    padding: 17px 0 0 11px; 
 
    margin-left: 6px; 
 
} 
 

 
.bottom { 
 
    display: inline; 
 
    float: left; 
 
    border-right: 1px solid; 
 
    padding: 0px 6px 1px 6px; 
 
    margin-right: 7px; 
 
} 
 

 
.tablelike { 
 
    height: 450px; 
 
} 
 

 
.full_border { 
 
    border: 1px solid #800080; 
 
    width: 592px; 
 
}

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Draggable + Sortable</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="jq.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <script src="jq_assingment.js"></script> 
 
</head> 
 

 
<body> 
 
    <form name="drag_drop" id="drag_drop" class="full_border"> 
 
    <div class="header"> 
 
     <span id="draggable" class="border">Choose & Re-order</span> 
 
    </div> 
 
    <div> 
 
     <ul id="sortable" class="tablelike"> 
 
     <li class="ui_color" value="1" correct_seq="">1.Typically a sentence contain a subject and practice.</li> 
 
     <li class="ui_color" value="2">2.Although it may make little sense taken in isolation out of context.</li> 
 
     <li class="ui_color" value="3">3.A sentence is a set of words that in principle tells a complete thought,</li> 
 
     </ul> 
 
    </div> 
 
    <div class=""> 
 
     <ul> 
 
     <li class="bottom">Review</li> 
 
     <li>Correct answer</li> 
 
     </ul> 
 
    </div> 
 
    </form> 
 
</body> 
 

 
</html>

來源

2017-07-25 punit saharawat

'選擇和重新order'可拖動？ –

在sortable使用update方法檢查序列的順序。

例如，

 $("#sortable").sortable({ 
      revert: true, 

      update: function(event, ui){ 
      var currentOrder = '1,2,3'; 
      var sortOrder = []; 
      $(event.target).find('li').each(function(){ 
       sortOrder.push($(this).attr('value')); 
      }) 
      if(sortOrder.join(',') === currentOrder){ 
       alert('correct Answer'); 
      }else{ 
       alert('wrong Answer'); 
      } 

      } 
     });

來源

2017-07-25 07:47:02

如何在創建數組之前創建Randomize選項

回答

相關問題