Drag and Drop Free Form

Hi Diana! Would you mind sharing your .story file with us here so we can take a look at what you have set up so far? Just use the Add Attachment button at the bottom of the reply window.

So I've tried this several different ways. This course has 5 questions, 10 answers available for each question and 4 possible drop targets. The object is for them to drop the petal on the correct loan type. This course will be used for employees to practice for their mortgage NMLS SAFE exam. All 5 questions are in Scene 1.

First I made it so the state of each petal would change to green or red depending on if it was dropped on the correct target. This was based on a variable. So if the object is dropped on the correct target it changes the variable to "true" and then when the timeline starts on the review layer it changes to red or green based on if the variable was false or true. The issue with that was that if the user dropped the petal on the correct drop target, but then moved that petal to an incorrect drop target before submitting the answer, the variable was still set as true. The only way to fix that issue is to add a lot more triggers so that it changes the variable to false if it's dropped on any of the other targets. This is extremely time consuming, requiring probably another 150 triggers. You can look at Scene 2 for just 1 sample question or look at all of the questions in Scene 1.

So then I tried adding in drop correct and drop incorrect states (red and green) for the petals. The issue with that is that as soon as the user drops the shape the state of it changes to drop correct or drop incorrect so the user gets immediate feedback if it's correct or not. I don't want them to get the feedback when they review their answers.

My next solution was to make it so that the drop correct and drop incorrect states had no recoloring. Then I added a trigger that the state of the object changed to "correct" or incorrect (the states that I built) based on whether the object was in the drop correct or drop incorrect state when the timeline starts on the review layer. This is really weird. It will adjust the state to correct or incorrect if the only changes is that the petal has a green or red glow on it, but it won't adjust the state if the petal is completely recolored to green or red for correct or incorrect. It's almost like the "correct" or "incorrect" state is going over the "drop correct" or "drop incorrect" state. This is all in Scene 3. I think this might be my best option. I just need to redo the other 4 questions to match this. I just wish the state would actually change to green or red, rather than just the green or red glow.

Any thoughts on what the best method would be for this? Thanks for your help.

Hi Diana! Trying to catch up here. Thanks for sharing your file.

So, looking at your Scene 3 - this looks like what you were wanting to accomplish. What were you still having difficulty with or were you just looking for some community feedback/best practices here?

HI Leslie,

When I go to the review layer, the shape will only show a red or green glow. It will not change the color of the shape to red or green.

Gotcha. I'll take another look.

Hi Diana! It looks like the built in states of drop correct and drop incorrect are what is causing the issue. It's not that the 'glow' is the only thing happening. You have two different states trying to display.

Yes, I know. I don't want the user to get feedback until they review. Unfortunately, with the drop correct and drop incorrect states the object changes as soon as it's dropped. So I made the drag and drop states stay neutral and then set a trigger that if the state is drop correct or drop incorrect when the timeline starts on the review layer then it would change to the states of correct or incorrect that I built. Do you have any other suggestions for getting the state of the petal to change to green or red only when the review layer appears?

Hi Diana! I will defer to the community on this to assist with your custom design set-up. 

Hey Diana,

Just to make sure that I'm following you—is the Review layer the feedback for the question, or is it something different with the feedback occurring later on, and not on the question itself?

If the review layer is the feedback for the question, I think we can get this working for you in a way that uses the default capabilities for the free-form Drag & Drop interaction.

Yeah...I was thinking if you had feedback layers, you could use a change state of trigger on the base layer to change to the correct/incorrect state only after the user clicks submit...? Alternatively, you could remove the drop states, and then when the user gets to the review slide, you could show the drops with the correct state colour.

I'm a bit unclear as to what exactly you're wanting to do.

The review layer will only show up when the user goes to review after they get their results. They do not get feedback after each question. Only at the end when they review their results.

I'm trying to have the petals change to either red or green when the user goes to review their results after doing all 5 questions.  I'm not sure what trigger I could use for the base layer to get it to change the state of the petal when I click submit. I tried using variables so that if an object is dropped on the correct object it changes the variable to true. The problem is that if the user drops the petal on the correct object and then decides to move it to an incorrect drop target before hitting submit the variable will already be set as true so it will show as correct when they go to review even though it's now on an incorrect drop target.

So, I took a look at your file and answered my own question—the review layer is the feedback for the question. Good news is we can make this work with default settings for the freeform interaction.

First, we'll change the settings that control when the drop states change:

1. Go to the slide view of the question.
2. In the design tab, click on Drag & Drop Options.
3. Select the Feedback option "Delay item drop states until interaction is submitted." and click OK. This will prevent the items from changing states until the learner clicks the submit button.

Next, we'll adjust the Drop Correct & Drop Incorrect states to have the formatting from your custom Correct/Incorrect states:

1. Copy the formatting from each petal's Correct state and apply it to the default Drop Correct state—the format painter will help to make quick work of this.
2. Repeat for the Incorrect and Drop Incorrect States.

Finally, we'll want to adjust your review layers to use the default Incorrect/Correct feedback layers with the same content with the "Blank" feedback master layout:

1. Copy everything from your Review layer timeline.
2. In the design tab, set the feedback to "By Question."
3. Go to the Correct layer, and change the layout to "Blank"—this changes the Feedback Master layout, not the layout for the slide.
4. Paste the items from the Review layer to the Correct layer.
5. Repeat steps 3–5 for the Incorrect layer.

Now, when the learner drops a petal on the target, it shouldn't change states until they submit the question (be sure that each base layer has the "Submit Interaction when user clicks the Submit Button" trigger). Both feedback layers will show your review content, without the Correct or Incorrect message.

Let me know if you have any questions or need further clarification about anything that I've outlined, above. Looking forward to hearing if that works out for you!

Sorry, Diana—I didn't get your message about the Review layer and not getting feedback after each question, but only seeing the review when reviewing their results.

Disregard the part about adjusting the review layers to using the default Incorrect/Correct feedback layers.

I don't think you can use the default Review Quiz button on the results slide and have it display the dropped states of the slides—you'll need to recreate it using a custom button and variables/triggers on each slide. I believe the issue is that the state needs to change on the slide after the submit button submits the interaction, and before it goes to the next slide—you'll likely need some sort of layer to display for the change to happen before it moves on to the next question.

Also, you'll want to change the triggers on the review layers that are currently setting petals to the "Correct" or "Incorrect" states—change those to set them to the Drop Correct or Drop Incorrect state depending on your T/F variables.

Another thing to check is having the petals as a group may be messing up the state changes—perhaps embedding the text boxes inside the state of the petal image will work better.

Hi Diana. One of the issues your experiencing is due to the grouping of your objects. It's causing the states to be a tad wonky because they don't play well with groups. When I ungrouped your Petals (Jumbo Mortgage for example) I was able to drag and drop, submit, then review with the colored state change happening in the review stage (where you wanted it to). I'll attach what I put together while experimenting. You may want to create the petal graphics as text and image all in one. This will eliminate the grouping and clean up your timeline a little as well. I have attached the file I was experimenting with. I adjusted the Jumbo Mortgage interaction only so just the one petal in scene three. I changed the image to trigger the state of no color drp correct or drop incorrect, then added a few triggers so it would do what I think your asking it to do. I am sure there is a more streamlined way of triggering these events, it would just take a little more time and planning to get them there. Good luck.

Thank you all soooooo much! It was just as simple as ungrouping the petals and text and embedding the text into the states of the petal. So the text is embedded into the normal, correct, incorrect, drop correct, and drop incorrect states for each petal. I didn't have to even change any triggers. Thank you again!

Wow. Nothing I can add here but I'll certainly be bookmarking this page.

Well done Diana;

I have often had issues with grouped objects and states,  I seem to struggle with it each time until I remember that they dont work that way.

Tim