Forum Discussion
GSAP 3.5.1 ( latest version ) is now included in Storyline 360
Hi Math
Thank you for such a swift response and your comments are (as usual) very helpful. I will post a sample of what I'm trying to do once I have it a bit further forward - your offer of help is appreciated. Basically, what I'm trying to do is enhance a 'card game' style quiz I actually developed years ago (the original was in Storyline 1!).
The learner has 60 seconds to recognise as many items as possible - in my original demo it was hazard warning signs, So there is a grid of 10 cards the timer starts when the first card is turned and the learner can turn the cards in any order they like. Once the card is turned, the learner has to enter what the hazard is. The card stays turned.
This works fine. But I have always meant to make it so the cards are randomised - say selecting 10 images for the reverse of the cards from a database of 20.
My first attempt was to store 20 URL's in an array cardURLs [] and then randomly select 10 numbers from 20 and use these to load the randomly selected image URL's needed for this pass of the quiz into another array cards[]. My thinking was to have a placeholder image on the reverse side (turned state) of each card and then use a loop to change each one with something like this:
var cardImage01 = document.querySelector('img[alt="card01"]')
gsap.set(cardImage01, { attr: { src: cards[1] } });
etc....
As you probably realise that turned out to be problematic - I couldn't get the gsap.set command working with "src" and changing the state of an image is definitely beyond me - and maybe the capabilities of gsap.
My second attempt was to just put 20 images off-screen and then randomly select 10 from 20 and move the images (with 0 opacity) to the right position so they can be made visible when the card is turned.
I then ran into the positioning problems with a scaleable screen - something you have also added much useful guidance on here on this site. So what I'm doing now is trying to use relative positioning or percentages so I can get my 10 randomly selected images in the right place on ANY screen size. Once I do that I will definitely be back with a sample story with my next set of problems!
Easiest solution would be...use almost invisible elements with the proper size and positioning. Use gsap.getProperty to get their x and y pos ( if you want to take into account possible scaling of the window after initialization you need to add eventHandlers for that ) and randomly position your elements.
I do think i made a similar setup quite some time ago. Will check for it..var myElement = document.querySelector("[data-acc-text='someAccName']");
var elXPos = gsap.getProperty(myElement, "x", "px");
var elYPos = gsap.getProperty(myElement, "y", "px");
console.log("x: "+elXPos+" | y: "+elYPos);