Increase or decrease a thermometer-like graphic based on variables?

The learner will be working through scenarios to earn points with the total reflected on a thermometer-like graphic on the right side of the screen. How can I simulate that thermometer changing based on a variable?

I see other threads using a variable to display different graphics but those are using just 5 or 10 numbers. I need it to be finer increments than that because we're not showing the number right/wrong but a value in millions to the company's bottom line. "Here's how your choices impact the company's bottom line."

Ideas please?

17 Replies
Carrie Eaton

So this worked perfectly, Tom! The bar changes size depending on the learner's responses to scenarios!

But.....question 2.  Our design has a semi-transparent bar across the bottom. This slider displays along the right side of the screen. Because it has to appear from the bottom, off the screen, it's showing through that bottom bar. Any bright work-arounds for this that I'm not seeing? Any kind of layering or masking I can think of still shows through that bar. Ideas?


Carrie Eaton

Hey, Tom, I’m at the airport heading out and will be back in the office on Monday, but I think I attached a screen shot to my post about this?

I think the problem will be that anything I put on, over, or around the slider running off the bottom of the screen will show through the semi-transparent shape across the bottom of the screen that holds our navigation icons, etc.

But maybe I’m missing something? It wouldn’t be the first time! 😜

Thanks for your help working on this!

Get Outlook for iOS

Crystal Horn

Thanks for sharing that image, Carrie! It seems like Tom's scrolling panel idea could do the trick for you, as it would create this invisible boundary around your slider that prevents learners from seeing a portion of it. In your case, the boundary would occur at the semi-transparent shape.

I hope that helps spark some ideas!

Carrie Eaton

So I've looked at Tom's video multiple times and see how it should work....but I'm not getting it done. I'm quite certain that it has to do with whether I have the slider truly inside the scrolling panel. The few times it seemed to be there, there was a scroll bar along the right edge which I didn't want. Now the scroll bar isn't there, but the slider is showing in the footer so probably isn't in the scrolling panel.

Rather than the buttons, our plan was to have scenarios and the right/wrong answers changed the variable for the slider....increasing or decreasing a business value. Because there was some question about the values we were talking about, ie how we calculated the number, etc., the client has decided against using this particular interaction.

So this isn't a show-stopper, but I'm curious what I'm doing wrong!? Seems like this could be useful in other situations and perhaps for others. So I've attached a file if anyone would like to venture an opinion?


Lauren Connelly

Hi Carrie!

Thank you for sharing your file! It looks like the scrolling panel and slider were separated somehow!

No worries, I created a short tutorial to show you how to attach the slider and scrolling panel, and move the scrolling panel so the scroll bar is hidden!

Let me know if you have any questions!

Carrie Eaton

Cool! I knew that they got separated somehow! So one thing I may have missed is putting the scrolling panel on the top layer. Also, I got the scrolling bar and didn't want that to appear, but sliding it off screen didn't occur to me.

But in Tom's video, the scrolling panel was smaller than the slider and yet the gray scrolling panel along the edge didn't appear. Tom, if you're around, is there a trick that I missed? OR is the difference that your slider was a simple square button rather than the long rectangle I'm using to mimic a thermometer-effect?  Seems like that wouldn't make a difference because in both cases (your default square button and my long bar), the scrolling panel was smaller than the slider. Is there a trick here?

THANKS, Tom and Lauren!

Ashley Terwilliger-Pollard

Hi Carrie,

It looks like the difference with yours and Tom's was how you have that bottom footer and didn't want the slider to appear over that. That's why the suggestion to add it inside a scrolling panel so that it was contained.

If you watch Tom's video again where he has the thermometer graphic, it's right at the edge of the slide, so it's covering up the slider before it starts to appear inside the graphic.

Hope that helps! 

Carrie Eaton

My question is about the gray slider that appears when the scrolling panel is smaller than the contents within. In Lauren's video that gray bar appears along the right edge of the scroll panel and if I don't want that to  appear, I move it off the edge of the screen. But in Tom's video suggesting that I use a scrolling panel, there's no gray bar along the edge, even though the slider he's placing inside the scrolling panel is larger than the scrolling panel. Moving it off the screen is certainly do-able, but I was curious if there's some way not to have the gray bar at all. For what I was looking for, Lauren's directions work, but I can imagine screen designs where it wouldn't work as well.

As always, thanks to everyone for your awesome ideas and help!