Drag and drop Avatar- using result later

Jul 22, 2016

Hi everyone. Firstly, excuse my english. It is not my first language. I want to create a drag and drop avatar. I want children to choose their own avatar from specific choices. After that I want to use their specific result later on as their profile picture in the course. I have the drag and drop working but I am missing something on the "result" page. I want to display the childs choice on the second page and later in the course where needed. I uploaded what I am busy with. Can one of the geniuses out there help me please. See my attachment.

31 Replies
Punam Parab

Hi Wessel,

From what I have understood is that you want the learners to choose an avatar and as the course progresses, you want the chosen avatar to appear at specific junctures.

This is one way you can do it:

  1. Assign a variable (true/false type) to each avatar. So for instance, say my first avatar is called Pic 1 and the second is Pic 2. Then I will create variables called Pic_1_Selected and Pic_2_Selected and set the value to 'False'
  2. Create a trigger to change the values of the variables to True when a particular avatar is selected. So if select Pic 1 as my avatar, then the value of Pic_1_Selected will become True
  3.  Include all the avatars on the page where you want the avatar to be displayed and change their state to Hidden. On the same slide where you have these avatars add a trigger which changes the state of an avatar to Normal if the value of the associated variable is True. So for example, if I have selected Pic 1 in the previous slide, then I will get to see Pic 1 on the current slide because its state has changed to normal.

I hope I make sense.


Brian Allen

If it's a case of build your own avatar, you can use Punam's advice but you're going to have to create a lot more variables to support this approach.

One variable for the hair, one for the nose, eyes, etc.

An approach I've used similar to Punam's suggestion is to create images for avatars with custom states: State0, State1, State2, etc.

When your learner selects an avatar, or in your case a custom avatar feature, I use a numeric variable and assign it based on the learner's selection, so for example: Hair1, Nose2, Eyes3, etc.

Then I can drop a single image on a slide and use an off-stage object to assign the image state based on the value of the variable. So my off-stage object will tell my hair image to set the image state to 1 if my hair variable is equal to 1.

In your case you'll want an image for the hair, with custom states for every type of hair that the learner can choose. One for the nose, with custom states for all the different noses a learner can select, etc.

I hope this makes sense.  Still a lot of work, but by using images with image states like this it does make some of the work more efficient.


Brian Allen

I've linked to a stripped down .story file from a recent project where we used a personalized avatar. Not as complex as Wessel's build your own but still pretty cool.

When the learner starts the course they select a personalized avatar which sets the value of a variable recording their choice.

Each screen afterwards where the customized avatar is used has one image with states for each avatar, and an off-stage object with triggers attached that read the avatar variable value and then set the avatar image to the appropriate state.

Very easy to copy/paste onto multiple slides.

Here's a demo - https://db.tt/FpqCkIBA

Screenshot below, and here's the .story file download in case it helps anyone - https://db.tt/VnaTF7sx


Wessel van Heerden

What makes mine more difficult than just one person, is that the one avatar is build up out of 10 different states, and all states must then be used later in the story as one avatar, for example, the 10 different eyes will be states, the 10 mouths, the 10 hair, and then the chosen states must make up the one avatar that will be used throughout the course.

Wessel van Heerden

Ai, Brian, I feel so stupid at the moment. I am sure it is not that difficult. I am struggling how to tell Articulate to keep the changes I have made in my clip where I am building the Avatar. On my page two it reverts back to the original Avatar, but I want the Avatar to look the same on page two as the student changed it on page one. How must my variable look like? I hope you can help me. I do not know exactly what to tell Articulate. See attached what I tried to do so far.

Brian Allen

Wessel, your build is definitely more ambitious than mine, so I wouldn't beat yourself up too bad.  Because your build is more complex there are some other small things that are different, such as your character variables won't work with True/False variables like I used.

Here's what I did (updated .story file attached) - 

1) I created numeric variables for each of your avatar features (skin, hair, clothes, etc.), each with a starting value of "1".

2) I set each button to adjust the value of the corresponding variable, and change the state of the corresponding feature on your avatar.

3) On the next slide where you present the customized avatar for the first time I added an off-stage object and attached triggers, starting with that objects timeline, to adjust the state of each avatar feature based on the value of the variable for that feature. So if the variable "Clothes_Avatar" is equal to "2", then change the state of the image "Clothing_Avatar" to "State2".

4) Finally, on the image states, I make it a best practice to ALWAYS duplicate whatever my "Normal" state is and call it "State1". Then subsequent options are "State2", "State3" and so on.

** I hope this helps, definitely post back here and let us know how it's going or if you have any other questions about this.  I love the concept that you're working on here, it takes course personalization to the next level, which is pretty cool.


Wessel van Heerden

Thank you so much. I will go through your example slowly to make sure I understand everything. I am doing this for a client and this is also something I did not do to this extend before, but if we can get it right, it can be fun to use in future courses.

Your example works great, untill you go back and make a change then the older choice - example eyes or nose - still shows. Is there a way to take that away? Otherwise I think this is nearly working. I just have to go and do this for the following "billion" eyes and mouths i have.


I wish I can send you a big nice chocolate for your help.

Brian Allen

Ah, good catch. I adjusted the slide properties for the second slide to "Reset to Initial State" when revisiting, which fixes the issue (updated .story file attached).

As far as your "billion" eyes, mouths, etc., I would suggest working thru it first in a minimal build like what we have been sharing here. Make sure all your triggers that set the custom states for your avatar are attached to the off-stage object.

THEN, when you have everything set the way you want, just copy and paste both the avatar images and the off-stage object onto any slides that you want to use them on and you'll avoid having to reprogram your triggers again for each slide.

This could work with a drag and drop instead of buttons, which was your original idea, but you'd have to put some work into the build your avatar slide to create that.

The difference would be instead of the button click adjusting the value of the variable for your different avatar features,  you'd set the value of the variable based on which object was dropped.

Again, good luck, this is a fun build!


Brian Allen

Also, you can get rid of the text I added to each slide anytime you want without affecting the way it works. I add those when I'm working thru a build like this to make sure I can see the variables changing and what the values are, then when I have things working the way I want I get rid of them.


This discussion is closed. You can start a new discussion or contact Articulate Support.