Forum Discussion
Partial Blur
Here is the Storyline for the E-Learning challenge #131 https://community.articulate.com/articles/using-blurred-backgrounds-in-elearning
https://360.articulate.com/review/content/5e75d3dd-d56d-46...
Cool one Math!
I don't get how the JS connects with the object, though. Just a random draggable image won't do the trick. Should the image contain a white field or something? Would you mind sharing some more about how it works?
Ofcourse Teo. What is key when using Javascript in Storyline is to get the proper element selected. There are several methods to get that done. One i use a lot is using the 'accessibility-names' to give a specific element in Storyline a really recognizable name and use a CSS-selector to get the element.var elementToAddClassTo = document.querySelector("[data-acc-text='panel.png']");
The data-acc-text atrribute in this line of code is the elements accessibility-name. Default Storyline uses the source name of an image. For other elements ( text fields eg. ) that differs.
In the image on top you see the default acc-name of this element. When its default...its grey. You can customize the name to your liking. Often this is usefull.
There are other methods for selecting a Storyline element with Javascript. Depending on what your are trying to achieve you need to decide which method works best. In all cases the browser inspector to see the proper flow of elements in HTML in Storyline is your best friend.
Then the script adds a CSS class to the element.textpanelToAddClassTo.classList.add('CSSBackdropBlur');
Do hope this makes sense to you.
Im planning some more indepth Storyline+Javascript tutorials... aimed at games in Storyline.
All techniques to select elements with Javascript will be explained properly.... and when to use what...
