Проблема в перетаскивании II

Question

Мне нужно уточнить по перетаскиванию (модуль типа викторины). Уже задавал тот же вопрос, но на этот раз с импровизированной версией.

Я использую jqueryUI для создания вопросов типа викторины. Когда я перетаскиваю правильный ответ (третий) в область опускания и нажимаю кнопку «Проверить», он должен стать зеленым и показать символ галочки. Остальные варианты, он должен стать красным и показать неправильный символ. Сейчас это работает частично. Может ли кто-нибудь помочь мне в этом?

мой код - https://codepen.io/vimalraj86/pen/zYGoPag

Мой логин c:

JQUERY UI: if {перетащите c в область, которую можно опустить. добавить класс для области сброса ".correct" else {добавить класс для области сброса как ".wrong"}}

JQUERY: , если #droppable hasClass () правильный, то показать # поставить галочку. еще показать # неправильно.

$(function() {

  $("div[id^='draggable']").draggable();
  $("#droppable").droppable({
    drop: function(event, ui) {
      if (ui.draggable.text().trim() == "C") {
        $(this).addClass("ui-state-green")

      } else {
        $(this).addClass("ui-state-red")
      }
    }
  });
});

$(document).ready(function(){
  $("check").click(function(){
    $(this).show();
  });
});

Answer 1

Рассмотрим следующий код.

$(function() {
  function checkAnswer(e) {
    var a = $(".answered .ui-widget-content");
    if (a.length == 1 && a.text().trim() == "C") {
      $(".answered").removeClass("ui-state-red").addClass("ui-state-green");
    } else {
      $(".answered").removeClass("ui-state-green").addClass("ui-state-red");
    }
  }

  function resetQuestion() {
    $(".ui-widget-header").removeClass("answered ui-state-red ui-state-green");
    $(".ui-widget-header .ui-widget-content").each(function(i, el) {
      var i = parseInt($(el).attr("id").slice(-1));
      var me = $(el).detach();
      console.log(i, me);
      if (i == 0) {
        me.prependTo($(".answers"));
      } else {
        me.insertAfter($(".answers").children().eq((i - 1)));
      }
    });
  }

  $("[id^='draggable']").draggable({
    revert: "invalid"
  });
  $("#droppable").droppable({
    drop: function(event, ui) {
      ui.draggable.detach().css({
        left: "",
        top: ""
      }).appendTo($(this));
      $(this).addClass("answered");
      $(".buttons").show();
    }
  });

  $("#check").click(checkAnswer);
  $("#reset").click(resetQuestion);
});

#draggable-0,
#draggable-1,
#draggable-2,
#draggable-3 {
  width: 100px;
  height: 100px;
  padding: 0.5em;
  margin: 10px 10px 10px 0;
  border: 1px solid #ccc;
  background: #fff;
  float: left;
}

hr {
  float: left;
  width: 100%;
  background: #ccc;
}

#droppable {
  width: 400px;
  height: 150px;
  padding: 0.5em;
  float: left;
  margin: 10px;
  border: 1px solid #ccc;
  background: #fff;
}

#droppable.ui-state-green {
  background: green;
}

#droppable.ui-state-red {
  background: #ff0000;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<div class="ui-widget">
  <div id="droppable" class="ui-widget-header"></div>
  <hr/>
  <div class="answers">
    <div id="draggable-0" class="ui-widget-content">
      <p>A</p>
    </div>
    <div id="draggable-1" class="ui-widget-content">
      <p>B</p>
    </div>
    <div id="draggable-2" class="ui-widget-content">
      <p>C</p>
    </div>
    <div id="draggable-3" class="ui-widget-content">
      <p>D</p>
    </div>
  </div>
  <div class="buttons" style="display: none;">
    <button id="reset" href="">reset</button>
    <button id="check" href="">check</button>
  </div>
</div>

Вот логин c за этим кодом:

• Пользователь Перетаскивает плитку из Ответов в поле
• Появляются кнопки Reset & Check
• Пользователь может нажать Reset или Click
  • Reset очистит любые цвета и переместит плитки обратно в порядке
  • Проверка покажет, если плитка в поле правильная или нет

Лучше всего попытаться переместить повторяющийся скрипт в функции, чтобы их можно было часто использовать.

Для Droppable, в drop вам нужно будет выполнить еще несколько шагов, чтобы гарантировать, что перетаскиваемый объект теперь является дочерним для выпадающего.