Using Monochromatic Colors in E-Learning #397: Challenge | Recap
The design elements you choose play a significant role in the visual voice of your course, with color being the most fundame...
Published 2 years ago
Version 1.0
Blog Post
I thought it would be great to change monochromatic colors on the fly, using accessibility labels and JavaScript.
https://360.articulate.com/review/content/ba17ec54-b497-4bc8-a13a-d9de76d22438/review
https://360.articulate.com/review/content/ba17ec54-b497-4bc8-a13a-d9de76d22438/review
- From a design standpoint I don't think it matters how you changed the colors, the project looks wonderful. I like the animated snowflakes but especially appreciate how the buttons change on hover to the antipated color. It is very satisfying.
- Thank you Ron!
- More Larry magic! I only know how to do this with state changes.
- Super creative, Larry. Great idea to offer users the options for a palette that changes so seamlessly. The animated snowflakes takes the template to the next level. Great project.
- Nice to be able to change the colors, Larry. Would it have been possible to change the color on any slide or only at the beginning?
- Hi TJ, yes the colors could be changed on any slide or at any point using the accessibility label, and adding some code on the slide. I updated the sample to indicate how it looks adding the button to change it on slide 3.
- Cool, Larry! Would you say it is easier to change the colors with Javascript as opposed to creating state changes?
- I think the advantage of using this JavaScript technique maybe better if you have a lot of elements you want to change with one trigger, and if you want to have the ability to switch what colors you want to change using a Hex's codes. But that is a good point that you could use the state changes as well. Thanks for the question.
- Thanks for your insight, Larry. I do like the idea of applying a script to affect a bunch of elements at once, instead of applying many state change triggers. Would you share the script you used? It felt very responsive in your demo.
