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."
Perfect! Thanks so much, Tom. I figured it would be a slider but I haven't worked with them much so wasn't sure how to change the shape, etc. to get what I needed! I'm assuming this video will be available for a while?
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?
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! 😜
It doesn't look like the screenshot was attached to your original discussion post. Could you click here to open the discussion, then attach the screenshot to a new reply? Thanks!
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.
There’s often a picture or graphic that runs off the bottom of the screen with the bottom bar laying on top. That’s why they want the bar to be semi-transparent. I’ll work on this and see how it works. Thanks for the ideas!
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?
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!
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?
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.
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!
The scroll panel scrubber will appear if the object extends beyond the top/bottom of the scroll panel. This way you can scroll to see the entire object (which is the original intent).
Make sure the scroll panel is taller than the object you insert. Here's an example.
17 Replies
You could create a slider which is tied to a number variable. Then make it look like a thermometer. Here's a video that shows an idea.
Perfect! Thanks so much, Tom. I figured it would be a slider but I haven't worked with them much so wasn't sure how to change the shape, etc. to get what I needed! I'm assuming this video will be available for a while?
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?
Can you share what it looks like?
You could insert the slider into scrolling panel. Here's a quick demo.
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
Hi there, Carrie!
It doesn't look like the screenshot was attached to your original discussion post. Could you click here to open the discussion, then attach the screenshot to a new reply? Thanks!
Yeah, I'm not seeing the attachment either?? So let's try this again please.
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!
There’s often a picture or graphic that runs off the bottom of the screen with the bottom bar laying on top. That’s why they want the bar to be semi-transparent. I’ll work on this and see how it works. Thanks for the ideas!
Get Outlook for iOS
Would love to see what you create, Carrie, if you're able to share here!
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?
Thanks!
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!
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!
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!
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!
The scroll panel scrubber will appear if the object extends beyond the top/bottom of the scroll panel. This way you can scroll to see the entire object (which is the original intent).
Make sure the scroll panel is taller than the object you insert. Here's an example.
Aha! Yes, it makes sense. Thanks, Tom!
This discussion is closed. You can start a new discussion or contact Articulate Support.