14 Replies Latest reply on May 13, 2008 4:53 AM by andyulrika_is_back

    Drag N Drop Behaviour Needed

    andyulrika_is_back Level 1
      Hello

      I am struggling with this very much. I've found various examples from other members but none which can do the following.

      Here is what I'm trying to achieve - not easy for a novice like myself:

      I have 10 answer boxes and 10 answers, I want the user to drag the correct answer to the correct answer box.
      When the answer is released over the answer box it stays there.
      If it's correct the answer a 'correct 'graphic displays.
      If it's the wrong answer a 'wrong' graphic displays.

      I've been looking everywhere but can't find any behaviour to do this.

      Any help much appreciated.

      Andy


        • 2. Re: Drag N Drop Behaviour Needed
          andyulrika_is_back Level 1
          Hi, thanks for posting the URL. I visited this site earlier today but couldn't find anything that matches my requirements unless there is a specific page you were wanting me to look at.

          Regards

          Andy
          • 3. Re: Drag N Drop Behaviour Needed
            multiduck Level 1
            In general you are not likely to find an example that exactly does what you need, you'll have to pick the parts you need from several examples.

            As far as where to look from what I linked, it's easy to find if you look. You should be able to use code from all examples under the drag and drop section, and the matching game example seems to match pretty much all your criteria.
            • 4. Re: Drag N Drop Behaviour Needed
              Level 7
              Try this out. It is important that the "box" sprites (the ones that the
              answers are dropped onto) are in a lower numbered sprite channel than
              the answer sprites which are draggable.

              Put this behaviour onto each of them, and in the GPDL popup dialog, tell
              them which ones they are. Each pair gets a unique number. There should
              never be 2 boxes with the same number or 2 answers with the same number,
              and for each number used, there needs to be one answer and one box.

              The "answer"s will be made draggable by the script, and when they are
              dropped, it will alert you if they were dropped in the right place or
              not. To make a graphic happen on correct or incorrect, simply replace
              lines 21 and 23 (the ones with the alerts) with whatever code you want
              for correct or incorrect graphics.

              Be careful of inadvertent line breaks added by the newsgroup. This
              script should have exactly 39 lines in it.

              -------------------------
              property pType,pNumber,pBoxRect

              on beginSprite me
              if pType="Answer" then
              sprite(me.spriteNum).moveableSprite=1
              else
              sprite(me.spriteNum).moveableSprite=0
              end if
              pBoxRect=sendAllSprites(#getBoxRect,pNumber)
              nothing
              end

              on mouseUp me
              sendAllSprites(#isCorrect,pNumber)
              end

              on isCorrect me,vNumber
              if vNumber=pNumber and pType="answer" then
              myRect=sprite(me.spriteNum).rect
              if myRect.intersect(pBoxRect)>rect(0,0,0,0) then
              alert "correct"
              else
              alert "incorrect"
              end if
              end if
              end

              on getBoxRect me,vNumber
              if vNumber=pNumber and pType="Box" then
              return sprite(me.spriteNum).rect
              end if
              end

              on getPropertyDescriptionList me
              p = [:]
              p[#pType] = [#format : #string, #comment : "Answer or Box?",
              #range:["Answer","Box"],#default :"Answer"]
              p[#pNumber] = [#format : #integer, #comment : "number", #default : 1]
              return p
              end

              ------------------
              • 5. Re: Drag N Drop Behaviour Needed
                Level 7
                I posted this code a week ago, it applies here as well:

                property my, homeLoc, selected
                on beginSprite me
                my = sprite(me.spriteNum)
                homeLoc = my.loc
                selected = 0
                end
                on mouseDown me
                selected = 1
                end
                on exitFrame me
                if selected then my.loc = the mouseLoc
                end
                on mouseUp me
                selected = 0
                if <I'm in the correct location - you'll have to code this> then
                alert("Correct!")
                <Whatever else you want it to do when you get a right answer>
                else
                my.loc = homeLoc --Bounce back
                alert("Sorry, try again.")
                end if
                end


                I find this superior to using the moveableSprite property as in Mike's
                example for several reasons. First, it only responds to a left-click, not a
                right-click, so you won't end up with your sprite stuck in the wrong
                location because you did funky things with the mouse buttons. Second, I
                find that it runs more quickly than the moveableSprite, and finally, using
                moveableSprite can cause weird glitches in the code if you leave it on and
                move to another frame or something. (You might want to combine my code with
                some of his, I didn't write anything for how it checks the correct answers,
                etc.)


                • 6. Re: Drag N Drop Behaviour Needed
                  andyulrika_is_back Level 1
                  Hi Mike

                  Thanks for the code. This is almost what I need - I just need to tweak it a little so it does the following things - not sure how to go about it though.

                  Is there a way in which the draggable answer sprite can snap directly on top of the answer box if the sprite is placed close to the box so that centred registration points match and if not close to the box return to their original location?

                  Also, I don't want the "incorrect answer" to appear if the sprite is repositioned to the original location.

                  I know it's something to do with the loc property but just can't get it.

                  Regards

                  Andy

                  • 7. Re: Drag N Drop Behaviour Needed
                    Level 7
                    Try this version (again, watch for line breaks - this should be exactly
                    50 lines of code). I took into consideration Darrel's issue of the
                    sprites retainning moveability after then are done, by changing that
                    property on endSprite. I also set the answer sprite to jump to the
                    location of the box's registration point when the answer is correct and
                    jump back to it's own home location if the answer is incorrect.


                    --------
                    property pType,pNumber,pBoxRect, pOrigLoc

                    on beginSprite me
                    if pType="Answer" then
                    sprite(me.spriteNum).moveableSprite=1
                    else
                    sprite(me.spriteNum).moveableSprite=0
                    end if
                    pBoxRect=sendAllSprites(#getBoxRect,pNumber)
                    pOrigLoc=sprite(me.spriteNum).loc
                    end

                    on endSprite me
                    sprite(me.spriteNum).moveableSprite=0
                    end

                    on mouseUp me
                    sendAllSprites(#isCorrect,pNumber)
                    end

                    on isCorrect me,vNumber
                    if vNumber=pNumber and pType="answer" then
                    myRect=sprite(me.spriteNum).rect
                    if myRect.intersect(pBoxRect)>rect(0,0,0,0) then
                    sprite(me.spriteNum).loc=sendAllSprites(#getBoxLoc,pNumber)
                    alert "correct"
                    else
                    sprite(me.spriteNum).loc=pOrigLoc
                    end if
                    end if
                    end

                    on getBoxLoc me,vNumber
                    if vNumber=pNumber and pType="Answer" then
                    return sprite(me.spriteNum).loc
                    end if
                    end

                    on getBoxRect me,vNumber
                    if vNumber=pNumber and pType="Box" then
                    return sprite(me.spriteNum).rect
                    end if
                    end

                    on getPropertyDescriptionList me
                    p = [:]
                    p[#pType] = [#format : #string, #comment : "Answer or Box?",
                    #range:["Answer","Box"],#default :"Answer"]
                    p[#pNumber] = [#format : #integer, #comment : "number", #default : 1]
                    return p
                    end
                    • 8. Re: Drag N Drop Behaviour Needed
                      Level 7
                      Small bug in the code I posted... this will make the snapping work
                      better if the answer is correct:

                      -----------------
                      property pType,pNumber,pBoxRect, pOrigLoc

                      on beginSprite me
                      if pType="Answer" then
                      sprite(me.spriteNum).moveableSprite=1
                      else
                      sprite(me.spriteNum).moveableSprite=0
                      end if
                      pBoxRect=sendAllSprites(#getBoxRect,pNumber)
                      pOrigLoc=sprite(me.spriteNum).loc
                      end

                      on endSprite me
                      sprite(me.spriteNum).moveableSprite=0
                      end

                      on mouseUp me
                      sendAllSprites(#isCorrect,pNumber)
                      end

                      on isCorrect me,vNumber
                      if vNumber=pNumber and pType="answer" then
                      myRect=sprite(me.spriteNum).rect
                      if myRect.intersect(pBoxRect)>rect(0,0,0,0) then
                      sprite(me.spriteNum).loc=sendAllSprites(#getBoxLoc,pNumber)
                      alert "correct"
                      else
                      sprite(me.spriteNum).loc=pOrigLoc
                      end if
                      end if
                      end

                      on getBoxLoc me,vNumber
                      if vNumber=pNumber and pType="Box" then
                      return sprite(me.spriteNum).loc
                      end if
                      end

                      on getBoxRect me,vNumber
                      if vNumber=pNumber and pType="Box" then
                      return sprite(me.spriteNum).rect
                      end if
                      end

                      on getPropertyDescriptionList me
                      p = [:]
                      p[#pType] = [#format : #string, #comment : "Answer or Box?",
                      #range:["Answer","Box"],#default :"Answer"]
                      p[#pNumber] = [#format : #integer, #comment : "number", #default : 1]
                      return p
                      end
                      • 9. Re: Drag N Drop Behaviour Needed
                        multiduck Level 1
                        quote:

                        Originally posted by: Newsgroup User
                        Try this version (again, watch for line breaks - this should be exactly
                        50 lines of code)


                        The Attach Code button should work for you to correctly maintain code formating when posting

                        • 10. Re: Drag N Drop Behaviour Needed
                          Level 7
                          multiduck wrote:
                          > The Attach Code button should work for you to correctly maintain code
                          > formating when posting

                          I am not using the web forum. I am using Thunderbird over NNTP. It will
                          sometimes kill my code formatting. I think it works fine for others who
                          use the same method, but the web version looks wrong sometimes... and
                          vie versa, when folks on the webforum use formatting, then ti looks
                          wrong to the folks using NNTP.

                          But then, I have just grown used to ignoring the bold formatting
                          commands and I can deal with out seeing everyone's silly smileys... ;)


                          • 11. Re: Drag N Drop Behaviour Needed
                            andyulrika_is_back Level 1
                            Hello

                            After much pain and head scratching I'm totally buggered if I can find out how to complete the code that Mike kindly wrote out for me.

                            From the multiple questions and multiple answers - if a wrong answer is dragged over an answer box instead of snapping back to its original location it should snap directly over the box and display an alert "wrong answer". The same as a correct answer should.

                            If anyone can help it would be greatly appreciated.

                            Thanks

                            Andy
                            • 12. Re: Drag N Drop Behaviour Needed
                              Level 7
                              Ask and receive (should be 86 lines of code... watch for breaks...)

                              -------------------------
                              global gWrongRects
                              property pType,pNumber,pBoxRect, pOrigLoc,pWrongRects

                              on beginSprite me
                              --make sure the answer type sprites can be dragged
                              if pType="Answer" then
                              sprite(me.spriteNum).moveableSprite=TRUE
                              else
                              sprite(me.spriteNum).moveableSprite=FALSE
                              end if
                              --this will find out the rect of the box with the same 'pNumber' as
                              it (i.e. the "correct" box)
                              pBoxRect=sendAllSprites(#getBoxRect,pNumber)
                              --this is the loc to snap back to if the answer is dropped outside of
                              the boxes
                              pOrigLoc=sprite(me.spriteNum).loc
                              --ask all the box sprites to build a list of their loc and rects
                              sendAllSprites(#getWrongRects,pNumber)
                              --set a property to store these values
                              pWrongRects=gWrongRects
                              -- reset the list in case it is needed for another srite
                              gWrongRects=void
                              end

                              on endSprite me
                              sprite(me.spriteNum).moveableSprite=0
                              end

                              on mouseUp me
                              sendAllSprites(#isCorrect,pNumber)
                              end

                              --test to see if the answer was dropped on the right box
                              on isCorrect me,vNumber
                              if vNumber=pNumber and pType="answer" then
                              myRect=sprite(me.spriteNum).rect
                              --see if it is in the correct box
                              if myRect.intersect(pBoxRect)>rect(0,0,0,0) then
                              sprite(me.spriteNum).loc=sendAllSprites(#getBoxLoc,pNumber)
                              alert "correct"
                              else
                              --check if it is in one of the wrong rects
                              wrongRect=0
                              repeat with iRect=1 to pWrongRects.count
                              if myRect.intersect(pWrongRects[iRect][#rect])>rect(0,0,0,0) then
                              wrongRect=pWrongRects[iRect]
                              exit repeat
                              end if
                              end repeat

                              if wrongRect<>0 then
                              sprite(me.spriteNum).loc=pWrongRects[iRect][#loc]
                              else
                              --answer must have been dropped outside the bounds of any of
                              the boxes
                              sprite(me.spriteNum).loc=pOrigLoc
                              end if
                              end if
                              end if
                              end

                              --builds a global list of the loc's and rect's of each incorrect box
                              on getWrongRects me,vNumber
                              if vNumber<>pNumber and pType="Box" then
                              if voidP(gWrongRects) then gWrongRects=[]

                              gWrongRects.append([#loc:sprite(me.spriteNum).loc,#rect:sprite(me.spriteNum).rect])
                              end if
                              end

                              --returns the loc of the box associated with the answer
                              on getBoxLoc me,vNumber
                              if vNumber=pNumber and pType="Box" then
                              return sprite(me.spriteNum).loc
                              end if
                              end

                              --returns the rect of the box associated with the answer
                              on getBoxRect me,vNumber
                              if vNumber=pNumber and pType="Box" then
                              return sprite(me.spriteNum).rect
                              end if
                              end

                              on getPropertyDescriptionList me
                              p = [:]
                              p[#pType] = [#format : #string, #comment : "Answer or Box?",
                              #range:["Answer","Box"],#default :"Answer"]
                              p[#pNumber] = [#format : #integer, #comment : "number", #default : 1]
                              return p
                              end
                              • 13. Re: Drag N Drop Behaviour Needed
                                andyulrika_is_back Level 1
                                Mike

                                Brilliant. Thanks a lot for your patience and your time.

                                Kind regards

                                Andy

                                • 14. Re: Drag N Drop Behaviour Needed
                                  andyulrika_is_back Level 1
                                  Mike

                                  Brilliant. Thanks a lot for your patience and your time.

                                  Kind regards

                                  Andy