0

Как сделать так,чтобы когда на всех вопросах стояло правильно ,то высвечивалась информация в alert со словами - "вы выиграли".

Вот мой код:

$(function() {
  $("#draggable").draggable();
  $("#droppable").droppable({
    accept: "#draggable",
    classes: {
      "ui-droppable-hover": "ui-state-hover"
    },
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Правильно!");
    }
  });



  $("#draggable2").draggable();
  $("#droppable2").droppable({
    accept: "#draggable2",
    classes: {
      "ui-droppable-active": "ui-state-default"
    },
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Правильно!");
    }

  });


  $("#draggable4").draggable();
  $("#droppable4").droppable({
    accept: "#draggable4",
    classes: {
      "ui-droppable-active": "ui-state-default"
    },
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Правильно!");
    }

  });


  $("#draggable5").draggable();
  $("#droppable5").droppable({
    accept: "#draggable5",
    classes: {
      "ui-droppable-active": "ui-state-default"
    },
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Правильно!");
    }

  });



  $("#draggable3").draggable();
  $("#droppable3").droppable({
    accept: "#draggable3",
    classes: {
      "ui-droppable-active": "ui-state-default"
    },
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Правильно!");
    }

  });
});
#draggable,
#draggable2,
#draggable3,
#draggable4,
#draggable5 {
  width: 90px;
  height: 90px;
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px 0;
  background: grey;
  border: 2px solid;
}

#droppable,
#droppable2,
#droppable3,
#droppable4,
#droppable5 {
  width: 120px;
  height: 120px;
  padding: 0.5em;
  float: left;
  margin: 10px;
  background: grey;
  border: 2px solid;
}

h3 {
  clear: left;
}
<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 id="draggable" class="ui-widget-content">
  <p>1 + 1</p>
</div>
<div id="droppable2" class="ui-widget-header">
  <p>10</p>
</div>
<div id="draggable4" class="ui-widget-content">
  <p>2+3</p>
</div>
<div id="droppable" class="ui-widget-header">
  <p>2</p>
</div>
<div id="draggable2" class="ui-widget-content">
  <p>5+5</p>
</div>
<div id="droppable3" class="ui-widget-header">
  <p>3</p>
</div>
<div id="draggable3" class="ui-widget-content">
  <p>1+2</p>
</div>
<div id="droppable4" class="ui-widget-header">
  <p>5</p>
</div>

1
  • приведите код в порядок, что бы можно было вам помочь. 11 окт 2018 в 20:01

1 ответ 1

1

Конкретно в Вашем случае, можно написать что-то подобное(см. ниже).

Но данный вариант плох тем, что это всего лишь костыль, хоть он и работает.

Если хотите более грамотно организовать код, то можно самим div элементам добавить атрибут, например data-completed, ставить им 1 или 0 при успехе и фейле соответственно, и по ним определять успешность решения.

$( function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      accept: "#draggable",
      classes: {
        "ui-droppable-hover": "ui-state-hover"
      },
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Правильно!" );
        checkResult();
      }
    });

    $( "#draggable2" ).draggable();
    $( "#droppable2" ).droppable({
      accept: "#draggable2",
      classes: {
        "ui-droppable-active": "ui-state-default"
      },
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Правильно!" );
        checkResult();
      }
    });

    $( "#draggable4" ).draggable();
    $( "#droppable4" ).droppable({
      accept: "#draggable4",
      classes: {
        "ui-droppable-active": "ui-state-default"
      },
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Правильно!" );
        checkResult();
      }
    });

    $( "#draggable5" ).draggable();
    $( "#droppable5" ).droppable({
      accept: "#draggable5",
      classes: {
        "ui-droppable-active": "ui-state-default"
      },
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Правильно!" );
        checkResult();
      }
    });

    $( "#draggable3" ).draggable();
    $( "#droppable3" ).droppable({
      accept: "#draggable3",
      classes: {
        "ui-droppable-active": "ui-state-default"
      },
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Правильно!" );
        checkResult();
      }
    });
 });
 
  var checkResult = function() {
    if($('.ui-widget-header p').text().split('!').length == 5) {
      alert('Вы выиграли!');
    }
  };
  #draggable, #draggable2, #draggable3, #draggable4, #draggable5 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; background: grey; border:2px solid; }
  #droppable, #droppable2, #droppable3 , #droppable4, #droppable5  { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; background: grey; border:2px solid; }
<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 id="draggable" class="ui-widget-content">
  <p>1 + 1</p>
</div>

<div id="droppable2" class="ui-widget-header">
  <p>10</p>
</div>


<div id="draggable4" class="ui-widget-content">
  <p>2+3</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>2</p>
</div>




<div id="draggable2" class="ui-widget-content">
  <p>5+5</p>
</div>

<div id="droppable3" class="ui-widget-header">
  <p>3</p>
</div>

<div id="draggable3" class="ui-widget-content">
  <p>1+2</p>
</div>

<div id="droppable4" class="ui-widget-header">
  <p>5</p>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.