Javascript created by ChatGPT doesn't work

Nov 12, 2023

Mike Fish
By Mike Fish

Hi, I'm trying to use ChatGPT to help me generate javascript, but nothing it creates will work. Any suggestions? The code below is supposed to drop an image at a random point:

var image = document.getElementById("yourImageElementID"); // replace "yourImageElementID" with the actual ID of your image element
var screenHeight = window.innerHeight;
var screenWidth = window.innerWidth;

// Set a random position along the horizontal axis
var randomX = Math.floor(Math.random() * (screenWidth - image.width));

// Set the initial position
image.style.left = randomX + "px";
image.style.top = "0px"; // Initial top position at the top of the screen

// Animate the image to drop down
var animation = setInterval(function () {
var currentTop = parseInt(image.style.top);
if (currentTop < screenHeight - image.height) {
image.style.top = currentTop + 5 + "px"; // Adjust the speed by changing the value (5 in this example)
} else {
clearInterval(animation); // Stop the animation when the image reaches the bottom
}
}, 50); // Adjust the interval (50 milliseconds in this example)

3 Replies
Math Notermans
4 months ago02/07/24 at 4:52 pm (UTC)

As GSAP is build into Storyline, i copied your code and pasted that into chatGPT as a new prompt..adding this. Change the following code so it uses GSAP.

As chatGPT has no knowledge of Storyline specific stuff you have to carefully pick the needed parts out of the response. In my case that was this.

var image = document.getElementById("yourImageElementID");
var screenHeight = window.innerHeight;
var screenWidth = window.innerWidth;

// Set a random position along the horizontal axis
var randomX = Math.floor(Math.random() * (screenWidth - image.width));
// Set the initial position
image.style.left = randomX + "px";
image.style.top = "0px";

// Initial top position at the top of the screen
gsap.to(image, { top: screenHeight - image.height, duration: 2, ease: "power1.inOut", onComplete: function() {
// Animation complete
} });

One thing ( if you know a bit of Storyline Javascript ) that immediately shows is the CSS selector for the image. As is chatGPT has no knowledge that Storyline cannot select an image this way. You need to use the 'accessibility'-trick for that.

This is the way to select elements in Storyline with Javascript.
var myImage = document.querySelector("[data-acc-text='someImage.png']");
Where you can add a custom accessibility selector or use the default one Storyline generates.

Testing that now in Storyline. As this had no result... i tried this.
gsap.to(myImage, {  duration: 2, x:"+=100"});
That had result, the image was moved 100 pixels to the right. So fixing the code then to this and it works.

https://360.articulate.com/review/content/746bc5bc-b929-4651-884a-7060081f7750/review

In the end this is the code to set a random position.
var myImage = document.querySelector("[data-acc-text='introIMG']");
var screenHeight = window.innerHeight;
var screenWidth = window.innerWidth;

// Set a random position
var randomX = Math.floor(Math.random() * parseInt(screenWidth - 218));
var randomY = Math.floor(Math.random() * parseInt(screenHeight - 218));

gsap.to(myImage, {  duration: 2, x:randomX,y:randomY});

My image is 218x218. If you want no animation and have the image set immediately to a position then use.

gsap.set(myImage, {   x:randomX, y:randomY });

Kind regards,
Math

Sign In to Reply