Making an object disapper or greyed out after it's been dragged

Dec 28, 2012

Would anyone be able to explain how I can make an object disappear or greyed out after it's been selected?

Thanks

Vin

9 Replies
David Anderson

Hey Vincent-

There are a few ways you can go about that.

Visited states

This is the fastest option since it uses Storyline's default states. Create a new state > Visited and customize the appearance of the object in the visited state. The object is still active, but the appearance is modified.

Disabled states

Unlike the other states, disabled states won't respond to clicks or hovers. You can customize the appearance of an object's disabled state, but the object is inactive until changed to a new state

Hidden

Another default state that completely hides the object. There's no way to customize the appearance of a hidden object - it's hidden!

Here's  a quick overview of those three options:

David Anderson

Vincent -

Were you asking about graying out objects for your WhoToCall project? If you are, let me know where you are in the project and I'll put something together for you.

Your post title says "dragged" but the message says "selected" so I wasn't sure where you were going with the question. The dragging option is still possible, but it would help to know more about the activity.

Diana Myers

@David - thank you for the Screenr - that was really helpful, but it brought up another question for me.  My apologies in advance if the answer is obvious, but I'm curious as to the advantages or disadvantages of choosing Disabled over Hidden and vice versa. 

I've created a 3 topic Winter Trivia game for my son's classroom, with a total of 23 different questions, and wanted to prevent them from selecting the same question more than onece, so this was the one thing I wasn't sure how to do.

Thanks in advance for any clarification or additional detail you can provide!!! 

David Anderson

Diana that's a great question and really gets to the heart of interaction design and usability.

Hidden states are absolute: you can't partially hide an object. It's either hidden or it's not hidden. 

Disabled states can be customized a lot of different ways. You can use transparency (like the example above) or checkmarks or colors or size or any number of visual techniques to indicate an object's disabled state.

Example: In Tyus' demo he used drag-drop actions to reveal a picture. Depending on how you layout your quiz, it's possible to include a hidden picture or phrase below your questions. By answering each question and changing their states to hidden, your learners can slowly reveal the hidden images. Nice and simple way to add an element of gaming and collecting to a quiz. Here's a much more extreme version of reveals

I tend to prefer the disabled state rather than hiding for quizzes and activities. I like the idea of the visual progress provided by graying out or fading a completed question rather than completely removing it. But ultimately it depends on the interaction objectives for the activity.

Hidden states are a great way to hide feedback, clues and other info until the user is ready for it.

Do you have a mockup or screenshot of the quiz you're working on? I'm sure folks would have some great insights for ways to work with hidden and disabled states in the context of the activity.

Diana Myers

@David - thanks for the extras on Disabled and Hidden states.  I originally just wanted to gray-out the questions as they were selected, and I don't want the students to select the same question more than once, so Disabled sounds like the way I want to go for this. 

I went ahead and added the state and the trigger, but it seems the states are resetting when the students return the the list of questions to select another.  I copied this Winter Triva game into my Public Dropbox folder, so hopefully you can view the .story file.  I also pasted some screen shots into the attached PPT to help explain. 

The biggest thing I was trying to accomplish was complete free choice for the students as they go through the questions.  They may not have time to view/answer every question on every topic, so I've tried to give them the option to change topic, or quit, at anytime.

I'm open to any an all suggestions, and I appreciate any all all addtional help on making this work!    THANKS!

David Anderson

Hi Diana,

Thanks for sharing your .story file and the really awesome storyboard. It's amazing how helpful storyboard docs with intended functionality really help us (okay, they help me!) figure out what's working and what's not working

Super easy fix for getting the disabled states to remain after the learner answers each question.

First, trigger order. You have the correct triggers: jump to slide and change state to disabled when user clicks. The only thing is that the second trigger (change to disabled state) never fires because the first trigger sends the learner to the quiz question slide. Trigger order matters so you should reverse the triggers for each button.

Finally, resume saved state. To ensure the states remain persistent across the interaction, you should change the slide properties for the main question slide to "Resume saved state."

Here's a quick demo of the changes I made:

Diana Myers

Bless you David!!!!!!!! 

I'd guesed it had something to do with the order of the triggers, but I changed one and it didn't seem to make a difference, so I figured I'd hold out until I heard back from you.  It was the slide properties that I was missing!  I'll post the finished project in a new thread - and welcome any additional suggestions or feedback.

I can't thank you enough for all your help - and the speed with which it was delivered.  YOU. ARE. AMAZING!  I think my New Year's Resolution is to become 1/100th the Storyline Professional you are!

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