Drag and Drop - How do I make messages appear?

Hello, I am trying to get this page to implement drag and drop functionality and to display a message if the user drags and drops the messages into the correct boxes. So far I have managed to get the draggable icons to fit into the boxes (see file attached) in order to complete the sentences. However, I want messages to appear either above or beneath to state whether they have put in the correct answers or not. Would someone please be able to guide on what to do here? Thanks.

For reference, the correct answers are:

Box 1: SUGAR, STARCHES AND FIBRE

Box 2: MILK PRODUCTS

and I want a message to pop up if they have put them into the correct boxes or if they have dragged in the incorrect answers as well as allow them to proceed on to the next page with a button if they have been entered correctly.

Drag and Drop functionality.rp (190.3 KB)

If you just want a pop-up message, I do this:
Message Box.rp (47.6 KB)

So essentially, I am wanting the page in my file to pop up with a message stating “This is correct! Press ‘Okay’ (the button) to proceed on to the next page” when they move both the correct draggable items into the boxes. Otherwise, I want a message to state that “One/Both of these answers is incorrect! Please try again” or something similar to that.

Yeah Axure doesn’t have the standard programming concept of

  button-pressed = ShowMessage( "BlahBlah" )

So instead you have to do:

 Show MyNicePanelWithMessage

And then hardwire the buttons on that panel to first of all hide the panel itself, then launch the next page or whatever follow-on-actions you want such buttons to do.

The best (correct?) way to implement such a ‘dialog’ style message, is to make it a Master, and have the action buttons call Raise Event. That way you can hardwire different actions into each instance where the message needs to pop up.

If you like, I can create an example of this for you.

Would that be okay? I think in order to understand it I will need to see an example (I’m quite new to Axure) - would you be able to use it around the template that I put in my original post or is this not possible?

I’m not able to include the correct/wrong detection logic as your example has… erm… gotten a bit out-of-control? (no offence intended - it happens all-too-easily with Axure) but here is a version with little trigger buttons that launch the message, and the button on the message triggers a change in text on the trigger button that launched it (so that’s where you’d put your next page code / reset question code).

Drag and Drop functionality (1).rp (207.7 KB)

Once you get the hang of how Axure works, you’ll probably want to go back and refactor (simplify) your code so its a bit less tangled. We’ve all been there (and continue to be so at regular times during prototype development)

1 Like

Forgot to say, if you’re wondering where the button text and message come from, they are set not in the code but in the Style Pane of each master instance. Masters have a special style pane that allow you to override the text on such items, and that’s what’s happening here.

Hope that helps,
Jeremy.

1 Like

Also forgot to say there’s a bug in your project at present. You can tell which are the correct answers because the placeholder box does not get a highlight when you drag the wrong answer over it.

Yeah I managed to fix that part, thank you for your help!