Drag Drop Que Jquery

Question

Я использую приложение для викторины. Некоторые из них делают мою работу, но есть места, которые я хочу исправить.

HTML

<div class="quiz-wrapper">
<p class="question-description">Fill in the blanks by dragging the missing answer.</p>
<ul class="options">
    <li class="title">Options</li>
    <li class="option" data-target="carraway">Nick Carraway</li>
    <li class="option" data-target="fitz">F. Scott Fitzgerald</li>
    <li class="option" data-target="westegg">West Egg</li>
    <li class="option" data-target="buchanan">Tom Buchanan</li>
    <li class="option" data-target="daisy">Daisy</li>
    <li class="option" data-target="ashes">Valley of Ashes</li>
</ul>
<div class="answers">
<ol>
<li><span class="target" data-accept="fitz">&nbsp;</span>, a native of St Paul, Minnesota, and also a 
member of the "Lost Generation" finished four novels including "This Side of Paradise".</li>
<li><span class="target" data-accept="carraway">&nbsp;</span> attended Yale with the large and brooding<span class="target" data-accept="buchanan">&nbsp;</span>.</li>
    <li>George Wilson owns an unsuccessful garage in an area known as the <span class="target" data-accept="ashes">&nbsp;</span>, where Tom brings Nick for a party.</li>
    <li>Jay Gatsby, the Buchanans, and Nick himself all make<span class="target" data-accept="westegg">&nbsp;</span>their home.</li>
</ol>
</div>
<button type="submit" value="submit">Submit</button>
<div class="lightbox-bg"></div>
<div class="status confirm">
<p>All Answers Answered</p>
</div>
<div class="status deny">
<p>Answers Remain</p>
</div>
</div>

JS

$(document).ready( function() {
var answersLeft = [];
$('.quiz-wrapper').find('li.option').each( function(i) {
var $this = $(this);
var answerValue = $this.data('target');
var $target = $('.answers .target[data-accept="'+answerValue+'"]');
var labelText = $this.html();
$this.draggable( {
  revert: "invalid",
  containment: ".quiz-wrapper"
});

if ( $target.length > 0 ) {
$target.droppable( {
    accept: 'li.option[data-target="'+answerValue+'"]',
    drop: function( event, ui ) {
      $this.draggable('destroy');
      $target.droppable('destroy');
      $this.html(' ');
      $target.html(labelText);
      answersLeft.splice( answersLeft.indexOf( answerValue ), 1 );
    }
});
answersLeft.push(answerValue);
} else { }
});
$('.quiz-wrapper button[type="submit"]').click( function() {
   if ( answersLeft.length > 0 ) {
        $('.lightbox-bg').show();
  $('.status.deny').show();
  $('.lightbox-bg').click( function() {
          $('.lightbox-bg').hide();
    $('.status.deny').hide();
    $('.lightbox-bg').unbind('click');
  });
   } else {
        $('.lightbox-bg').show();
  $('.status.confirm').show();
   }
});
});

Проблема 1: Это Код принимает только данные цели ниже ul и поля приема данных ниже. Я хочу принять любой ответ. Не проверяйте во время перетаскивания.

Проблема 2: После того, как все поля заполнены, я хочу найти правильное и неправильное число в соответствии с полями data-target и data-accept.

Заранее спасибо за помощь.