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.
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:
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'
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
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.
Thanks for your help so far. It would've been easier if I want to use prebuild avatars, but I want the learner as on my sample, build their own avatar. Choose hair, nose, eyes etc. After they build their own, I want to recall that specific one later in the programme.
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.
Looks like you are getting some assistance here Wessel - I just wanted to link another thread as well for anyone following along and in case a solution pops up there :)
Thanks Brian. I think I am going to try your approach. I decided to stop the drag and drop idea, but want to create icons on which the student can click, then the different states change on the board example the eyes, skin colour, hair etc. I will try that.
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.
Thank you, I will certainly go through your example. I am still suffering to get my states working. I believe it is something small I am overlooking. Thank you very much for your help. I appreciate it a lot.
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.
Agreed... I think I would probably approach this by using an image for eyes, with a state for each eye color. Another image for mouth with all the different states for the various mouths, etc.
Definitely much more complicated, more variables, but it's probably do-able.
Lastly, I will go through your build and see how close I can come to figuring everything out, but if I suffer, I will appreciate if you can just check what I am doing wrong. Thanks again for your help.
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.
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.
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.
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.
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.
Thanks Brian, Yes I will methodically work through your example. At least I will be wiser after this project. I will send you the final build when I am finished. Will take me a day or two to finish.
@David Anderson, or someone who actively participates in the weekly eLearning Challenges, I wonder if we've done one like this where you do a customizable avatar.
Wessel's idea here could make for an interesting challenge if not.
31 Replies
I just want to attach the file I am using as example, and it is working there.
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:
I hope I make sense.
Thanks for your help so far. It would've been easier if I want to use prebuild avatars, but I want the learner as on my sample, build their own avatar. Choose hair, nose, eyes etc. After they build their own, I want to recall that specific one later in the programme.
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
Looks like you are getting some assistance here Wessel - I just wanted to link another thread as well for anyone following along and in case a solution pops up there :)
Thanks Brian. I think I am going to try your approach. I decided to stop the drag and drop idea, but want to create icons on which the student can click, then the different states change on the board example the eyes, skin colour, hair etc. I will try that.
The use of States is a good idea, Brian. I will definitely give it a try.
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
Thank you, I will certainly go through your example. I am still suffering to get my states working. I believe it is something small I am overlooking. Thank you very much for your help. I appreciate it a lot.
Feel free to share a sample of what you're having trouble with and we might be able to help you troubleshoot it.
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.
Agreed... I think I would probably approach this by using an image for eyes, with a state for each eye color. Another image for mouth with all the different states for the various mouths, etc.
Definitely much more complicated, more variables, but it's probably do-able.
Lastly, I will go through your build and see how close I can come to figuring everything out, but if I suffer, I will appreciate if you can just check what I am doing wrong. Thanks again for your help.
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.
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.
Brian
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.
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!
B
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.
B
Thanks Brian, Yes I will methodically work through your example. At least I will be wiser after this project. I will send you the final build when I am finished. Will take me a day or two to finish.
Again - thank you for your help.
@David Anderson, or someone who actively participates in the weekly eLearning Challenges, I wonder if we've done one like this where you do a customizable avatar.
Wessel's idea here could make for an interesting challenge if not.
I'll ping David for you Brian :)
Thanks! :D
This post was removed by the author
Ashley, thank you! Happy Tuesday
Leslie beat me to it cause I forgot to refresh the page - so I removed it. :)
But we'll make sure David knows!
This discussion is closed. You can start a new discussion or contact Articulate Support.