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:
Hello again SamHill . I'm making a VERY IMPORTANT clarification from my point of view, and may be useful for those who will read it. I discovered while studying your .story file and your video that a large part of my very long misunderstanding with Chappy comes, not from the code, but from my trigger. I've always used “Execute JScode when the user clicks Shape” (instead of “... when timeline of Shape begins”) which conflicts with the “addEventListener” command in the code. In your video, it seems to work with “user clicks” for a while (never for me) and I didn't see when you changed it. In any case, Chappy never mentioned it and that's why there was no reward beer for him. Thanks again.
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.
