Try your hand at pouring the perfect glass of wine in this creative Storyline demo. It showcases one cool way you can use sliders to invite learners to test their skills.
*This template will work for folks using Storyline 360 (included in Articulate 360), Storyline 3, or Storyline 2. Want to try it out? Get a free trial of Articulate 360.
Hi Daniel,
Are you trying the demo using the "See it in action." link above?
I have Chrome Version 69.0.3497.100 (Official Build) (32-bit) on my work laptop and I'm able the drag the slider. I have the latest version of Chrome on my home PC (Chrome Version 69.0.3497.100 (Official Build) (32-bit).) and the course slider works in that version, too.
Out of sheer curiosity, I tested it in IE (Version: 11.1508.15063.0), and it worked there. it also worked on Opera 58 on Windows 10. However, when I tried it in Firefox 60.2.0esr (32-bit), and it isn't working there.
I looked on the Community, and I don't see many posts on sliders not working, so perhaps it was just a hiccup on Chrome?
Let me know if it's still not working for you, along with your version of Chrome and I'll ... Expand
Hi Daniel,
Are you trying the demo using the "See it in action." link above?
I have Chrome Version 69.0.3497.100 (Official Build) (32-bit) on my work laptop and I'm able the drag the slider. I have the latest version of Chrome on my home PC (Chrome Version 69.0.3497.100 (Official Build) (32-bit).) and the course slider works in that version, too.
Out of sheer curiosity, I tested it in IE (Version: 11.1508.15063.0), and it worked there. it also worked on Opera 58 on Windows 10. However, when I tried it in Firefox 60.2.0esr (32-bit), and it isn't working there.
I looked on the Community, and I don't see many posts on sliders not working, so perhaps it was just a hiccup on Chrome?
Let me know if it's still not working for you, along with your version of Chrome and I'll look into it further.
I am having trouble in IE. I get the amount of ounces the first time, but after hitting "try again" I always get 0 ounces no matter where I drag the slider.
Wow - as Bill and Ted would say, "Strange things are afoot at the Circle-K." I downloaded the file using the link above, and then the output worked differently in Chrome vs. IE. Chrome would get stuck on 13 ounces, and IE would get stuck on 0 ounces. The feedback layers by default were set to "Automatically Decide" when revising, but I think I've resolved it by changing the feedback layers to "Reset to Initial State" when revisiting. The new published output is available at http://s3.amazonaws.com/MyStorylineProjects/Interactive%20Slider%20%20The%20Perfect%20Pour%20Challenge%20-%20Storyline%20output/story_html5.html As I don't have the latest browsers, please let me know if this updated output works in your browser. If so, I'll ask the nice staff at Articulate to replace the file on ... Expand
Wow - as Bill and Ted would say, "Strange things are afoot at the Circle-K." I downloaded the file using the link above, and then the output worked differently in Chrome vs. IE. Chrome would get stuck on 13 ounces, and IE would get stuck on 0 ounces. The feedback layers by default were set to "Automatically Decide" when revising, but I think I've resolved it by changing the feedback layers to "Reset to Initial State" when revisiting. The new published output is available at http://s3.amazonaws.com/MyStorylineProjects/Interactive%20Slider%20%20The%20Perfect%20Pour%20Challenge%20-%20Storyline%20output/story_html5.html As I don't have the latest browsers, please let me know if this updated output works in your browser. If so, I'll ask the nice staff at Articulate to replace the file on the downloads page. THANKS to you all for bringing this to my attention!
Hi All - As of 15March the download file above has an error in it. The lovely folks in the Articulate Community are working to replace the download file, but in the meantime please contact me on my profile page and I can send you the SL2 source file.
Hello everyone - as of 18March, the download file has been updated with the corrections. Please don't hesitate to contact me if you have any questions. @Kelly and the Awesome Community Staff, thanks so much for all your help to ensure the correct file is made available. You all are the best!
Hi Michelle - sorry for the delay in getting back to you (was on vacation). You can use the arrow keys to move the slider. Probably best if you edit the Tab Order and set up a Custom Order to remove as many of the unnecessary items as possible to limit the amount of tabbing a user would have to do. There's a helpful page that discusses how to do this: https://community.articulate.com/series/74/articles/articulate-storyline-360-user-guide-how-to-customize-tab-order. Good luck!
Hello! I've been tearing my hair out this afternoon trying to change the amounts used in this. This is exactly what I need - except we use ml instead of oz. Can anyone suggest a quick fix for how to do this - I need 150ml to be the correct answer.
Thanks in advance :)
Hi Lesley - I'm so glad this could help you. I took the original file and "converted" it to milliliters and updated the correct answer to 150ml (previously 5 ounces as 1 ounce = roughly 30ml).
I basically duplicated each State of the colored wine and named the duplicated state for the number of MLs, then deleted the State with the ounce name. Then I updated the triggers to change each state as the slider moves, and lastly I changed the correct value to be 150ml instead of 6 ounces.
Let me know if you have any trouble with this link: https://bit.ly/2K3K5QO - the file should download when you click or cut/paste that URL into your browser.
I tested this new ML version a few times in Chrome, and it seems to be working - please test it as well and let me know if you run into any ... Expand
Hi Lesley - I'm so glad this could help you. I took the original file and "converted" it to milliliters and updated the correct answer to 150ml (previously 5 ounces as 1 ounce = roughly 30ml).
I basically duplicated each State of the colored wine and named the duplicated state for the number of MLs, then deleted the State with the ounce name. Then I updated the triggers to change each state as the slider moves, and lastly I changed the correct value to be 150ml instead of 6 ounces.
Let me know if you have any trouble with this link: https://bit.ly/2K3K5QO - the file should download when you click or cut/paste that URL into your browser.
I tested this new ML version a few times in Chrome, and it seems to be working - please test it as well and let me know if you run into any hiccups.
Hope this helps - good luck!
Interesting - I have the same result as Demian - won't work in Firefox, but does in IE & Chrome. In Firefox, the file has a large play arrow over everything when I enter. In IE it does the player load then lets me have the slider. Firefox 68.0.1 64bit.
I do like the interaction. Very nice.
This slider is great. Can someone tell me how to change the state names on the freeform? I've never seen this use of freeform that is invisible. Any info on how to use this would be REALLY helpful! THANKS
Hi Sylvia, I'm not sure I understand your question, but I'd absolutely like to help! You can create your own state names when you add a new state or duplicate an existing one.
As far as the "invisible" part, 3 elements are "stacked on top of one another to create the illusion:
1. At the bottom of the stack is the Wine Glass Base IMG - just as it was downloaded from an image website (Unsplash).
2. Next, the Wine Amount shape placed on the slide on top of the Wine Glass Base IMG. This freeform rectangle has some transparency so it looks like wine in a glass.
3. Lastly, I placed the Transp Glass IMG on top of the "stack." This is the same image as the Base image, but I used an image editing tool (SnagIt Editor) to "cut out" the interior of the wine glass - this allows the wine ... Expand
Hi Sylvia, I'm not sure I understand your question, but I'd absolutely like to help! You can create your own state names when you add a new state or duplicate an existing one.
As far as the "invisible" part, 3 elements are "stacked on top of one another to create the illusion:
1. At the bottom of the stack is the Wine Glass Base IMG - just as it was downloaded from an image website (Unsplash).
2. Next, the Wine Amount shape placed on the slide on top of the Wine Glass Base IMG. This freeform rectangle has some transparency so it looks like wine in a glass.
3. Lastly, I placed the Transp Glass IMG on top of the "stack." This is the same image as the Base image, but I used an image editing tool (SnagIt Editor) to "cut out" the interior of the wine glass - this allows the wine to "fill" the glass while the edges of the freeform rectangle are hidden by the rest of the image.
I hope this helps explains how the graphics were created. Please reach out if you have any other questions. I can't add attachments to this comment, but I can send them to you in a direct message. Best of luck!
Nothing too serious I just wanted to try this out but again, the slider can't be moved in the latest version of chrome. Is this a bug in storyline because it should automatically be compatible with the latest browsers I presume. Cheers
@Jonas, Hi, and thank you for your note. Not sure what's happening because when I click the "see it in action" link on this post, it works correctly when I'm using Chrome Version 88.0.4324.182 (Official Build) (64-bit) [my company controls which version of Chrome I have]. I also tested it on my home PC where I'm using Chrome Version 90.0.4430.72 (Official Build) (64-bit)--it still works for me and for my officemate who's also on v90.0.4430
25 Comments
Hi Daniel, Are you trying the demo using the "See it in action." link above? I have Chrome Version 69.0.3497.100 (Official Build) (32-bit) on my work laptop and I'm able the drag the slider. I have the latest version of Chrome on my home PC (Chrome Version 69.0.3497.100 (Official Build) (32-bit).) and the course slider works in that version, too. Out of sheer curiosity, I tested it in IE (Version: 11.1508.15063.0), and it worked there. it also worked on Opera 58 on Windows 10. However, when I tried it in Firefox 60.2.0esr (32-bit), and it isn't working there. I looked on the Community, and I don't see many posts on sliders not working, so perhaps it was just a hiccup on Chrome? Let me know if it's still not working for you, along with your version of Chrome and I'll ... Expand
Wow - as Bill and Ted would say, "Strange things are afoot at the Circle-K." I downloaded the file using the link above, and then the output worked differently in Chrome vs. IE. Chrome would get stuck on 13 ounces, and IE would get stuck on 0 ounces. The feedback layers by default were set to "Automatically Decide" when revising, but I think I've resolved it by changing the feedback layers to "Reset to Initial State" when revisiting. The new published output is available at http://s3.amazonaws.com/MyStorylineProjects/Interactive%20Slider%20%20The%20Perfect%20Pour%20Challenge%20-%20Storyline%20output/story_html5.html As I don't have the latest browsers, please let me know if this updated output works in your browser. If so, I'll ask the nice staff at Articulate to replace the file on ... Expand
Hi Lesley - I'm so glad this could help you. I took the original file and "converted" it to milliliters and updated the correct answer to 150ml (previously 5 ounces as 1 ounce = roughly 30ml). I basically duplicated each State of the colored wine and named the duplicated state for the number of MLs, then deleted the State with the ounce name. Then I updated the triggers to change each state as the slider moves, and lastly I changed the correct value to be 150ml instead of 6 ounces. Let me know if you have any trouble with this link: https://bit.ly/2K3K5QO - the file should download when you click or cut/paste that URL into your browser. I tested this new ML version a few times in Chrome, and it seems to be working - please test it as well and let me know if you run into any ... Expand
Hi Sylvia, I'm not sure I understand your question, but I'd absolutely like to help! You can create your own state names when you add a new state or duplicate an existing one. As far as the "invisible" part, 3 elements are "stacked on top of one another to create the illusion: 1. At the bottom of the stack is the Wine Glass Base IMG - just as it was downloaded from an image website (Unsplash). 2. Next, the Wine Amount shape placed on the slide on top of the Wine Glass Base IMG. This freeform rectangle has some transparency so it looks like wine in a glass. 3. Lastly, I placed the Transp Glass IMG on top of the "stack." This is the same image as the Base image, but I used an image editing tool (SnagIt Editor) to "cut out" the interior of the wine glass - this allows the wine ... Expand