Forum Discussion
Rotating a shape 90° shouldn't be too complicated but...
Hello community members. A few words of context: for my latest entry in the e-learning challenge #482, I needed to rotate a rectangle by 90°, several times. I used good old motion trajectories, with...
Hi ThierryEMMANUEL I have the solution for me, but let me know if you need any tweaks to it. This leverages the GSAP library as it is the cleanest solution. In the attached video, I explain the code, and also talk through some modifications you could make. This method also uses some Storyline variables, which may help configure the functionality from Storyline so it is a bit easier to work with for none programmers.
I'll have a Pietra please. ChatGPT reckons it's one of the most expensive in France ;)
Working file attached:
Hi Thierry, I did make a mistake at first in my video by adding the script to the "click" trigger. You may have also seen extra script I had added, that is no longer present, to counteract the issue of adding it the the "click" trigger. I added a variable to ensure the inialisation code only ran once, otherwise it would keep adding click events. I realised my error, and added to the timeline starts event and removed the redundant JS.
If duplicating multiple times, there are better ways to do it (in the interest of maintenance), by creating a single JavaScript function. I can show a revision tomorrow when I'm back at my desk if interested.
Always interested in learning more, SamHill . Indeed, my activity posted on the ELC challenge #482 includes 24 pieces. So some simplification would be nice.
I also wanted to reply a third time because I've found a new way of selecting the element to be rotated by its alternative text (in case you don't really need it for accessibility via a screen reader, of course). Creating text variables containing alternative text is a little... complicated. If you replace your 2 lines
const targetShape = player.GetVar('xxxxxxxxx');
const target = document.querySelector(`[data-acc-text=“${targetShape}”]`);
by
const target = document.querySelector(“[data-acc-text=‘alt text of the element’]”);
it works.
Do you think there's a downside to using this method... apparently much simpler?
Looking forward to hearing from you.
