Drag and drop problem

Hello,

I hope you can help me to solve my little problem with the drag and drop function.

I will like to teach small kids to count the numbers to ten. For example show them 10 circles and ask them to drag 5 circles to the square.

I have tried to play around for a few hours but I can't find a good way to do this. Any suggestions or ideas?

For example; is it possible to set the container (in this case the blue square) only to 'accept' 5 circles?

Thanks a lot

Lars

50 Replies
Rebecca Fleisch Cordeiro

Hey Lars,

Oh my goodnes. This totally got my old primary school teacher's attention (a former life at least a gazillion years ago). There's SO much you can do with this!

I didn't limit the number of objects the rectangle can accept because I went down a whole other road. There are so many things you could teach with this. Here are some of the thoughts that were running around in my head. But a caveat: does the score need to get handed off to an LMS? Or is this something the kiddos and a teacher would be doing together? If the latter, here are some of the ideas I had:

  • counting
  • number recognition
  • color recognition
  • grouping (pairs, groups of three, groups of four, etc. etc.)
  • shape recognition
  • math-relate terms: groups, pairs, sets

I've attached a story similar to yours with ten different shapes and five different colors (including the "container").

  • I've added a variable called count.
  • I've inserted a reference to the variable to the right of the container.
  • And, I've set up the variable so each time a shape is dropped on the container the numbered reference counts up.

You could say to the kids:

  • Drag 3 squares
  • Drag 1 circle
  • Drag 3 triangles
  • drag 2 red, 1 purple, 1 green
  • Drag so that you have a pair of objects (a pair is 2)
  • Drag to make a group of 4
  • Drag to make a set of 3

The counter automatically shows as each object is dropped: number recognition along with counting. I've also removed the submit button and inserted a reset button.

This button has 2 triggers:

  • one to set the count to 0 (for trying something else)
  • one to jump to the slide (same slide)  to set the object back to their original location for trying something else

And the slide is set to reset to its initial state.

If you have questions about all the settings and you're interested in this approach, just holler! It's really not what you asked, but I had fun playing, anyway.

Lars Louring

Hi Rebecca,

Thanks you so much for your input and the attached file.

I know my example is very traditional and 'old school' but I'm aware of the possibilities to add more interesting functions like you mention. But for a start - Storyline is very new to me - I have chosen a simple task, just to learn about the functions in Storyline.

To answer your question: Yes the score need to get handed off to an LMS. 

A little more explanation of what I would like to do in Storyline:

The children drag the amount they think is correct (for example 5 circles) to the square and after hitting 'submit' the system will tell them if it's right or wrong.

If they drag 7 circles the system will show: 'Sorry wrong answer'

If they drag 5  circles the system will show: Yes correct answer'

It should be simple to do that but still after your great example I don't know to do that exact thing.

In the example you provided the system do the counting every time the child drag an element. I want the children to drag what they think  is the correct amount. And after submitting the answer the systen will tell if it correct or not.

I really appreciate your help and I hope you can help me with the last step.

Thanks

Lars

Rebecca Fleisch Cordeiro

OK Lars,

Got it. Sorry, my enthusiasm overtook me and I apologize for not answering your original question.

So, I'm attaching the story again. I've left the original slide there in case you want to play with it at some point. It's now the 2nd slide. The first slide does want you want. I used all my shapes just to save time, but of course you can use your original 10 circles. The way to do this is by creating a Freeform Pick Many quiz. Then place all the objects on that new slide (I copied and pasted them from  my original slide).

Again, I used the count variable and added 1 each time a shape is dropped on the target.

Also, you add an incorrect button and a correct button offstage.

You click the Edit Pick Many button in the Question panel, and choose the correct button as the correct choice

Finally, you add two triggers

  • Add a trigger to the correct button that says to change its state to selected when the user clicks the submit button if the count is equal to 5.
  • Add a trigger to the incorrect button that says to change its state to selected when the user clicks the submit button if the count is NOT equal to 5.

I think those are all the instructions.

You've said that Storyline is new to you, so if those instructions are too barebones, please say so and I'll post step-by-step here.

And let us know how it's working for you! Oh, and welcome to Articulate and Storyline

Lars Louring

Rebecca thank you so much! Just what I was looking for.

I only have two small issues:

- I had to copy your 'Correct' and 'Incorrect' button to make it work. When I tried to make my own buttons it was not working. Is it some kind of special buttons you use? Or can a normal shape be used?

- After finishing the first slide and it was working perfect I copy/pasted the slide so I had two identical slides. The strange part is that only slide number one was working probably. Slide number two showed 'incorrect' after dragging the four circles.

I have attached the story.

I'm really happy that you take the time to help.

Rebecca Fleisch Cordeiro

Hi Lars,

So, answer your last question first: the reason the 2nd slide wasn't working is because the count has already reached 4 on the first slide. In order to use that same count variable again (and that's perfectly legitimate) you need to add a trigger to the 2nd slide that changes the variable count back to 0 when the timeline starts on that slide. You'll see it when you open up the story, which I've attached.

And no, you don't HAVE to use pre-designed buttons for the correct and incorrect buttons, but it can make life easier. I created the buttons by clicking on Insert, and then on the Interactive Objects group, click the button drop-down.

As you can see by the screenshot (below) the built-in buttons already have a number of states, including the selected state that is used in our project.

Shapes, by default don't have any states, but you can add them. You can see (in the screenshot) that I added a selected state to a shape. And, I've included these 3 buttons on a new slide, 1.3, in the attached story so you can get a better look at them.

I think it's all working now. Time for supper!

Give a shout out with any more questions.

Rebecca Fleisch Cordeiro

Ok...done!

Couple of changes from "our" original, Lars.

  • You can use either a Pick One or Pick Many freeform. I used Pick one here.
  • Because this file was created from scratch, the "Drag Over" state had to be added to the objects that were being dragged.

Tx for the inspiration!

Nick Reichel

Hi Rebecca,

I'm having a similar, yet different issue that also resides in your example. I'm also using drag and drops of shapes to get a count.

In my situation, we have 10 different employees, but a bonus can only go to 4(or less) of the employees. I have 6 different monetary values the bonus can be. I am only keeping a count of the number of people who would receive "no bonus," as this number would have to be 6 or greater for the person to continue on.

I have the variable made and i have the count working for "no bonus". I feel people will be indecisive about who they pick and will drag and drop many different times. I have this mostly solved, except i noticed if they drag and drop to the same box, the count will increase again, meaning the "no bonus" may only have 5 people, but the count will be 6.

Is there anyway to manipuate the states of either item to ensure the count will only increase when it changes boxes? (I'm guessing conditional statements would be usefull here, but am out of ideas on how to approach it)

Thanks,

Nick

Nick Reichel

It might help to explain that there are no wrong answers, so long as no more than 4 people get the "bonus".

To see the issue, drag "agatha" to no bonus. The account will increase to one. Cool, that's what it's suppose to do. Now drag "agatha" to the $1-$5000 bonus. The count for no bonus goes to zero. great again. Now drag it back to "no bonus". The count again increases to 1. Still good. No drag "agatha" to a slightly different area on "no bonus". the count goes up to 2, but only one name is in the "no bonus"

Lars Louring

Hi Rebecca,

I'm back with a question. Here is the senarion:

1) The child drag for example five circles to the square

2) Then the child change his/her mind a drag one circle away again from the square.

3) The child hit submt

4) Then the system has counted five circles and gives a ' wrong answer'

So the problem occurs when dragging a circle away again from the square.

I hope you understand what I mean

All the best

Lars

Nick Reichel

Lars,

You can solve that issue using the sample code i put in my above response, but if the child was to drop the item in the box and pick the same item and move it within the box, it will count it again, ending with the same result (there may only be 4 circles, but the count will be 5).

I've been playing around with adding additional variables and conditions, but have yet to end up with the correct methodology.

Regards,

Nick

Nick Reichel

Is there any way to have a variable be the summation of other varibles? If there is, i think i have a solution, but i cannot find a way to create a variable to get the sum of other variables.

example:

VariableTotal=Variable1+Variable2+Variable3+......

I set the parameters so the value of variable 1 can only be one or zero and so on for all of the other variables in the series. a 1 would mean it is within the shape. a 0 means it's outside the shape. The variable total would then keep a track of all of the variables, and you could set other triggers to respond to that variable.

Rebecca Fleisch Cordeiro

Hi Nick,

Just now seeing your first question.Yes, you actually don't have to move Agatha onto one of the bonus rectangles. You can just drag her around on the No Bonus rectangle, and one is continually added because Storyline thinks that's what we want to have happend.

I'm uploading your file, where I've begun to make a few changes. I think perhaps if you continue on the path I've begun, this may do the trick.

I've removed all the correct choices from the Drag and Drop Question. As you said, there is no "correct" answer.

I removed all your triggers and began a different approach. I've only worked with Agatha and Brian so far. I've added a T/F variable for each of them.

One is added when the name is dropped on bonus depending on the T/F variable setting.

One is subtracted when the name is dropped on any of the other targets depending on the T/F setting.

I think you'll see what I'm getting act when you download the file. You should be able to apply these same settings for Charlie through Jane. Let us know!

Rebecca Fleisch Cordeiro

Hi Lars,

Pasting your question here and answering (I think!) below.

Lars Louring said:

Hi Rebecca,

I'm back with a question. Here is the senarion:

1) The child drag for example five circles to the square

2) Then the child change his/her mind a drag one circle away again from the square.

3) The child hit submt

4) Then the system has counted five circles and gives a ' wrong answer'

So the problem occurs when dragging a circle away again from the square.

I hope you understand what I mean

All the

Yes, I do understand what you mean. Here's what I did, and it's working.:

I inserted a large hot spot (click the Insert tab and select Hotspot - it's on the Interactive Objects group). It's the size of the slide.

Then, right-click it and send it to the back (or, if you prefer working with the timeline, drag it to the bottom of the timeline).

Add a trigger to each of the ovals that adjusts the variable so that one is subtracted when the oval is dragged off the rectangle. For example:

Action: Adjust variable

Variable: count

Operator: -subtract

Value: Value 1

When: Object dropped on

Object: Oval 4

Dropped on: Hotspot 1

If that's not clear, please let me know.

Lars Louring

Thanks again. 

It's working but I still have a little problem after using the hot spot

After adding the hot spot the child don't have to actually drag the circle to the squre. If the child just move the circle a little bit the circle will automatically jump to the center og the square and it's not possible to drag it out from the square again.

Nick Reichel

Rebecca Fleisch Cordeiro said:

Hi Nick,

Just now seeing your first question.Yes, you actually don't have to move Agatha onto one of the bonus rectangles. You can just drag her around on the No Bonus rectangle, and one is continually added because Storyline thinks that's what we want to have happend.

I'm uploading your file, where I've begun to make a few changes. I think perhaps if you continue on the path I've begun, this may do the trick.

I've removed all the correct choices from the Drag and Drop Question. As you said, there is no "correct" answer.

I removed all your triggers and began a different approach. I've only worked with Agatha and Brian so far. I've added a T/F variable for each of them.

One is added when the name is dropped on bonus depending on the T/F variable setting.

One is subtracted when the name is dropped on any of the other targets depending on the T/F setting.

I think you'll see what I'm getting act when you download the file. You should be able to apply these same settings for Charlie through Jane. Let us know!

Thanks Rebecca! This will definately work. I wouldn't have thought to approach it in the manner you did. Definately adding to  my knowledge of triggers!

Rebecca Fleisch Cordeiro

Lars Louring said:

Thanks again. 

It's working but I still have a little problem after using the hot spot

After adding the hot spot the child don't have to actually drag the circle to the squre. If the child just move the circle a little bit the circle will automatically jump to the center og the square and it's not possible to drag it out from the square again.



Hi Lars,

Ah. I see what you mean. Geesh! Can you see if this works for you? I'm attaching your story again, but I've changed slide 1 to try to accommodate your needs. I'm a bit short of time, so I've placed only 5 ovals on the slide.

Instead of using a hot spot, I used a regular rectangular shape and sent it to the back. What you'd want to do is to make the shape transparent with no lines. I left it semi-transparent and left a line around it, just so you could see it and have a better sense of what I did.

I also added a T/F variable for each oval, similarly to what I did for Nick's question. So the triggers for each oval are like this, using Oval1 as the example:

Add 1 to the COUNT variable when Oval 1 is dropped on rectangle 1 (blue rectangle) if variable OVAL1 equals False

Set OVAL1 variable to true when Oval 1 is dropped on rectangle 1.

Subtract 1 to the COUNT variable when Oval 1 is dropped on rectangle 2 if variable OVAL1 is equal to true

Set OVAL1 variable to false when Oval 1 is dropped on rectangle 2

The goal is to track the count, but only add or subtract 1 time for each oval that is dragged.

I've placed numbers inside the ovals ONLY for production purposes, to track them as triggers are added. I would remove them afterward.

Let us know how this works for you and if you need more detailed explanations. I'll try to keep an eye out!

Lars Louring

Thanks Rebecca,

After playing around with the variables for some time it's now working! Thank you!!

Now there is only one issue left:

A) The task is: "drag 4 circles to the square".

B) The child drag 2 circles and hit "Submit".

C) The popup box says something like "Sorry try again".

D) the child drags two more circles to the square so the total is now 4 circles and hit submit.

E) The popup shows '"Incorrect".

How do I fix this?

Best

Lars

Rebecca Fleisch Cordeiro

Hi Lars,

It's been a while since I've looked at this, so I simply started from scratch. The attached has 1 "try again" option. I've cut back on the number of circles for the sake of time. So, there are 5 circle, and there need to be 3 dragged into the rectangle in order to get the correct response.

I've tested it with different circles and in two different ways:

I drag in "less than" 3, hit submit, try again, and drag in the right amount

I drag in "more than" 3, hit submit, try again, and drag out until the correct amoutn.

In both cases, I get a correct response.

Perhaps you can look at this one, compare it to yours, and see what's wrong? Or, you could perhaps upload yours here and I or someone could take a look.

Rebecca Fleisch Cordeiro

HI Lars,

For some reason I can't download the files on this page at this moment (I'm getting error messages).

The reason I started from scratch is because it's been a while, and we've done so many iterations, that sometimes it's best to start from scratch. So, two things;

One: the Try again layer is automatically added by Storyline if you click the Edit Pick One button in the right panel

and then choose the number of attempts from the drop-down

If you'd like, and you can upload your real working file here, I can take a look - or someone else can. Maybe later I'll be able to download from there. Or, if you email me within the community, perhaps we can go from there.