-1

I have three droppables. these droppables build a 3 letter word. When the last letter has been dropped, i want to give the user the option to build another word. However, currently i have all the droppables dynamically dropping not in any particular order: 

   $(".droppable0").droppable({
                    revert: false,
                    accept: '#0',
                    drop: function (event, ui) {
                        $(this).droppable('disable');
                        ui.helper.data('dropped', false);

                        correctResult.fadeIn(1000);
                        correctResult.prepend(Correctd())

                        correctResult.html("You're doing great!");

                        $(".speech").show();

                        correctResult.fadeIn(1000);
                        correctResult.fadeOut(10000)

                    }
                });


                $(".droppable1").droppable({
                    revert: false,
                    accept: '#1',
                    drop: function (event, ui) {
                        $(this).droppable('disable');
                        ui.helper.data('dropped', false);

                        correctResult.fadeIn(1000);
                        correctResult.prepend(Correctd())

                        correctResult.html("You're doing great!");

                        $(".speech").show();

                        correctResult.fadeIn(1000);
                        correctResult.fadeOut(10000)
                    }
                });

                $(".droppable2").droppable({
                    revert: false,
                    accept: '#2',
                    drop: function (event, ui) {
                        $(this).droppable('disable');
                        ui.helper.data('dropped', false);

                        correctResult.fadeIn(1000);
                        correctResult.prepend(Correctd())

                        correctResult.html("Well done! You built the word.");

                        $(".speech").show();

                        correctResult.fadeIn(1000);
                        correctResult.fadeOut(10000)
                        $(".nextButton").show();

                    }
                });

Basically, on the last droppabble $(".droppable2") i want to notify the user that the word has been successfully completed. Then advise them to build another word.

How can i check if the other droppables are successful before the last one is activated? Thank you in advance.

Lulutho Mgwali
  • 823
  • 1
  • 11
  • 33
  • Have a variable that counts the number of successful drops. On each drop increment the variable. For each drop do a check of this variable if it is equal to the number of drops needed to complete the word then advise them to build another word. – ductiletoaster Sep 18 '15 at 21:57
  • Can the drops be done in any order? – ductiletoaster Sep 18 '15 at 22:37
  • Thanks a lot bro, you suggestion helped. The drops can be done in any order. You can give you suggestion in an answer form and ill accept it. – Lulutho Mgwali Sep 19 '15 at 00:55

1 Answers1

0

Have a variable that counts the number of successful drops. On each drop increment the variable. For each drop do a check of this variable if it is equal to the number of drops needed to complete the word then advise them to build another word.

Re-post of comment. If you still need help feel free to post back!

ductiletoaster
  • 483
  • 2
  • 9