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 settings of 1 and 0 pixels, and it works. I KNOW it's possible to do this with Javascript code more elegantly (transformation time and smooth motion), simpler (with far fewer variables), smarter, easier to modify, etc., but I don't know how. I've tried using parts of the solutions that you guys on the right side of this screen have proposed here and there, but I have failed. Fun fact : I literally spent a whole day (in cumulative hours) with ChapGPT to get him to help me write the code (about 20 versions) and it was a failure too. He accumulated errors: difficulties in simply identifying the form and selecting it, difficulties in running it, derailing the expected behavior of one part of the code while trying to fix another part. It's obvious that Chappy doesn't know enough about the inner workings of Storyline to create this code (which I'm sure is very simple). In the end, he apologized for having provoked my frustration. Yes, he did! But at least I've learned how to use SL's debugging console.
So I'm turning to you because I don't know JS at all. Can you help me, please? I'm going to execute this Javascript when I click on the rectangle mentioned below. Here's my (very simple) request:
There's a rectangle on my slide. I want to rotate it 90° clockwise, around its own center, in 1 second. When I click on it again, it rotates another 90°, from its previous position. In short, it rotates 360° in 4 clicks. And that's all there is to it!
This can be in pure JS or with GSAP, it doesn't matter (I'm not sure I know what I'm saying here, but whatever...).
And finally, please, please, please, can you make sure your code REALLY works? There are so many caring people out there who want to help but offer solutions that only work after 10 more messages of clarification and tweaking. It's frustrating too.
Many thanks in advance. I'll buy a French beer for anyone who succeeds.
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 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 everyone. Even though the question is “solved”, the bar remains open if anyone wants to show another solution.
Hi SamHill Thank you very much. The JS code works exactly as I expected. I rushed through the .story file before watching your video (I will), and it is indeed super easy to make adjustments with the internal variables. I've already modified the duration, degrees of rotation and direction of rotation, for example. The only thing I'm going to try is to change the shape selection by its data-model-id (I learned how to get it in the debugging console), so as to leave the accessible text free to be changed if need be. And I'm going to duplicate this code 24 times for 24 shapes to recreate my rotating puzzle activity.
Let's talk about beer. Pietra comes from Corsica (part of France, in fact) but I'm not sure it's the most expensive. I suggest an organic craft beer produced by friends in the Dordogne (central-western France), a beautiful region renowned for its gastronomy. It's called “La Lutine” and my favorite is amber and tastes of hops and friendship.make a Trigger that Executes Javascript on click of the object, paste in the Javascript:
let object1 = document.querySelector("[data-model-id='6nmK88deM2z']");
gsap.to(object1, { rotation: "+=90", duration: 1 })Find the ID of the object and paste that in.... READY ;) you can use it on multiple objects on your slide without changing "object1"
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.
Hi SamHill I had something like this in mind, thanks to your code.
https://360.articulate.com/review/content/194e8fe0-bc6b-4b39-baf6-4cfe6186f76d/review
I spent more time preparing the visual than making animations. Looking forward to chatting another time.
