Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by jdh
jdh
12,334 Points

jQuery Drag & Drop Game

Andrew Chalkley or anyone else - I've gone through your courses on JS and jQuery and found them extremely helpful and I'm trying to test myself by making a drag and drop matching game.

I've got the function to allow the object to drag and then only be accepted on specific spots and if placed incorrectly, it get reverted back to its original position.

I am now trying to add more functionality by making a conditional statement where if all of them are correct, a Bootstrap modal window fades in.

Can you help nudge me in the right direction for this? The modal currently "shows" whenever one of the items is placed correctly and not when both of them are.

I've gone through the Bootstrap JS documentation and found that to show a modal window I should call this:

$('#myModal').modal('show')

<div class="row">
         <div id="cardPile"> 
                  <div id="element_1">                            
                      <li>One</li>                               
                  </div>
                  <div id="element_2">
               <li>Two</li>
                  </div>
        </div>
</div>

    $(init);

            function init() {

                $('#element_1').data( 'number', 1 ).attr( 'id', 'card'+1 ).draggable( {
                  containment: '#content',
                  stack: '#cardPile div',
                  cursor: 'move',
                  revert: true
                } );

                    $('#element_2').data( 'number', 2 ).attr( 'id', 'card'+2 ).draggable( {
                  containment: '#content',
                  stack: '#cardPile div',
                  cursor: 'move',
                  revert: true
                } );

$('#slot_1').data( 'number', 1 ).droppable( {
                  accept: '#cardPile div',
                  hoverClass: 'hovered',
                  drop: handleCardDrop
                } );

                    $('#slot_2').data( 'number', 2 ).droppable( {
                  accept: '#cardPile div',
                  hoverClass: 'hovered',
                  drop: handleCardDrop
                } );

            }

        function handleCardDrop( event, ui ) {
              var slotNumber = $(this).data( 'number' );
              var cardNumber = ui.draggable.data( 'number' );

              if ( slotNumber == cardNumber ) {
                  $('#myModal').modal('show')
                ui.draggable.addClass( 'correct' );
                ui.draggable.draggable( 'disable' );
                $(this).droppable( 'disable' );
                ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
                ui.draggable.draggable( 'option', 'revert', false );
              } 
            }
jdh
jdh
12,334 Points

re-adding the html

            <div class="row">
         <div id="cardPile"> 
                  <div id="element_1">                            
                      <li>One</li>                               
                  </div>
                  <div id="element_2">
                     <li>Two</li>
                  </div>
          </div>
           </div>
           <div id="cardSlots">
                    <div id="slot_1"></div>
                    <div id="slot_2"></div>
                </div>

3 Answers

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi jdh,

Try adding a couple of variables, one to store the total number of cards and the other to store how many have been matched.

var totalCards = $('#cardPile').children().length;
var totalMatches = 0;

Then inside your if block that checks for a correct match you would increment the totalMatches variable instead of showing the modal. Then you can check if the total matches equals the total cards and show the modal if true.

if ( slotNumber == cardNumber ) {
                totalMatches++;
                ui.draggable.addClass( 'correct' );
                ui.draggable.draggable( 'disable' );
                $(this).droppable( 'disable' );
                ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
                ui.draggable.draggable( 'option', 'revert', false );
}

if (totalMatches == totalCards) {
    $('#myModal').modal('show');
}

This is untested, hopefully the logic is right. Let me know if it's not working.

jdh
jdh
12,334 Points
jdh
jdh
12,334 Points

Hey thanks for the idea but unfortunately it didnt work.

I tried this on my local file and the drag-and-drop works but the modal doesn't show when they're all matched.

I see what you're saying with the variables though and think it's a good idea. I was trying to make the conditional statement like

if ( (slot_1 == element_1) && (slot_2 == element_2) etc ) but that didn't work.

I've made a fiddle for this: http://jsfiddle.net/6haMV/45/

Any thoughts?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I forked your fiddle and it seems to be working now. http://jsfiddle.net/u0a7m5L6/

I first added in several console.log statements to make sure the variables were working as intended and everything there seems right.

Then i checked the modal code and I think that you had the id wrong. It was #textModal Once I changed that it started coming up.

I don't know why it's not working locally for you since you said you already had the modal coming up properly.

I would add in those log statements to your local code and open up your console to make sure everything has the right value. Then look at the modal code.

At least put this log statement in:

if (totalMatches == totalCards) {
                console.log("show the modal!");
                $('#textModal').modal('show');
            }

If you see that statement come up in the console when you've matched the final card then you know all the new code is working and there's a problem with the modal code.

jdh
jdh
12,334 Points
jdh
jdh
12,334 Points

Thanks for the awesome explanation, Jason. I went back and the modal code and reviewed it w the Bootstrap documentation and I think there was a few issues.

Appreciate the help.