入力データとそのシーケンスをMySQLでチェックする

Question

ドラッグアンドドロップの質問とそのオプションをmysqlテーブルから取得し、すべてのオプションを正しい順序で作成します。私のシーケンスをテーブルの正しいシーケンスにチェックする方法。私はこのドラッグアンドドロップコードを持っています。

---

この例では、正しいシーケンスは1,2,3,4,5,6,7です。正しい順序ですべてをドラッグして提出すれば、提出された順序と正しい順序が自動的にどのように一致するかを示します。これは教育テストゲームの一種です。

---

<style> 
    body { 
    font-family: arial; 
    background: rgb(242, 244, 246); 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    } 

    h3 { 
    color: rgb(199, 204, 209); 
    font-size: 28px; 
    text-align: center; 
    } 

    #elements-container { 
    text-align: center; 
    } 

    .draggable-element { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
    background: white; 
    border: 1px solid rgb(196, 196, 196); 
    line-height: 200px; 
    text-align: center; 
    margin: 10px; 
    color: rgb(51, 51, 51); 
    font-size: 30px; 
    cursor: move; 
    } 

    .drag-list { 
    width: 400px; 
    margin: 0 auto; 
    } 

    .drag-list > li { 
    list-style: none; 
    background: rgb(255, 255, 255); 
    border: 1px solid rgb(196, 196, 196); 
    margin: 5px 0; 
    font-size: 24px; 
    } 

    .drag-list .title { 
    display: inline-block; 
    width: 130px; 
    padding: 6px 6px 6px 12px; 
    vertical-align: top; 
    } 

    .drag-list .drag-area { 
    display: inline-block; 
    background: rgb(158, 211, 179); 
    width: 60px; 
    height: 40px; 
    vertical-align: top; 
    float: right; 
    cursor: move; 
    } 

    .code { 
    background: rgb(255, 255, 255); 
    border: 1px solid rgb(196, 196, 196); 
    width: 600px; 
    margin: 22px auto; 
    position: relative; 
    } 

    .code::before { 
    content: 'Code'; 
    background: rgb(80, 80, 80); 
    width: 96%; 
    position: absolute; 
    padding: 8px 2%; 
    color: rgb(255, 255, 255); 
    } 

    .code pre { 
    margin-top: 50px; 
    padding: 0 13px; 
    font-size: 1em; 
    } 

</style> 

---

<section class="showcase showcase-2"> 
     <h3>Example 2</h3> 
     <ul class="drag-list"> 
     <li><span class="title">list 6</span><span class="drag-area"></span></li> 
     <li><span class="title">list 4</span><span class="drag-area"></span></li> 
     <li><span class="title">list 5</span><span class="drag-area"></span></li> 
     <li><span class="title">list 1</span><span class="drag-area"></span></li> 
     <li><span class="title">list 3</span><span class="drag-area"></span></li> 
     <li><span class="title">list 2</span><span class="drag-area"></span></li> 
     <li><span class="title">list 7</span><span class="drag-area"></span></li> 
     </ul> 
    </section> 

    <section class="code"> 
     <pre> 
$('li').arrangeable({dragSelector: '.drag-area'}); 
     </pre> 
    </section> 


    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script type="text/javascript" src="drag-arrange.js"></script> 

    <script type="text/javascript"> 
     $(function() { 
      $('.draggable-element').arrangeable(); 
      $('li').arrangeable({dragSelector: '.drag-area'}); 
     }); 
    </script> 

Answer 1

次のようなJavaScriptを使用してそれを行うことができます。

まず、あなたはどこかに疑問のidの参照を取る必要があります。簡単にするには、<li>タグのid属性に割り当てます。

var sort_order = []; 

jQuery('.drag-list li').each(function(index){ 
    sort_order[index] = this.id; 
}); 

ここでsort_orderには質問IDとそのシーケンスが記載されます。

あなたは論理を得ることを望みます。これで、必要に応じて調整することができます。

Answer 2

私はこれを働かせました。データベースから自動的にフェッチする複数の質問に対してこれを適用する方法。

---

<script> 
    $(function() { 
$("#sortable").sortable(); 
$("#sortable").disableSelection(); 
$("#savebutton").click(function() { LISTOBJ.saveList(); }); 
}); 

var LISTOBJ = { 
    saveList: function() { 
     var listCSV = ""; 
     $("#sortable li").each(function() { 
      if (listCSV === "") { 
       listCSV = $(this).val(); 
      } else { 
       listCSV += "," + $(this).val(); 
      } 
      $("#output").text(listCSV); 
      $("#hiddenListInput").val(listCSV); 
      //$("#listsaveform").submit(); 
     }); 
    } 
} 

---

<ul id="sortable"> 
    <li value="1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
    <li value="2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 
    <li value="3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> 

</ul> 
<input type="button" id="savebutton" value="save"/> 
<div id="output"></div> 
<form id="listsaveform" method="POST" action="script.php"> 
    <input type="hidden" name="list" id="hiddenListInput" /> 
</form>