Как сделать так,чтобы когда на всех вопросах стояло правильно ,то высвечивалась информация в 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>