Creating images using JavaScript in web lab

CS Discoveries
1

I have an advanced student that was trying to figure out how to create images using JavaScript in Web Lab. Project Link: https://codeprojects.org/LyIp8dNoWttr6w2cbSnQLjKwPQpEzSd42uFHndBobJg/
Their program has an image imported that is supposed to be put onto the website. However, it does not work and throws this error: “GET https://downloads.computinginthecore.org/bramble_0.1.26/gameOver.png 404 ()”. All the program does is create an image, attach an onload event handler to detect once the image is done loading, set the source of the image, and append it to the document. They have tried creating an image with both “new Image()” and “document.createElement(“img”)” and both have not worked. The problem is that the image cannot be loaded (for some reason). How would an image be created through JavaScript in Web Lab? Thanks!

Tara

2

Does anyone have any ideas on this? He is still working on his project and still wondering about an answer. Thanks so much to anyone that can help!

3

I think that for security reasons, not all Javascript works in Web Lab. I’ll ask around and see whether I can get a more specific answer.

Elizabeth

4

Is it just supposed to have two images of game over on the page? That is what shows for me.

5

I think he will add more images, but since he couldn’t get the first ones to work, he didn’t add any others yet. Thank you Elizabeth for the feedback. I will let him know and keep on the lookout if you find out anything different.

Tara

6

@tara.taylor

Hi Tara,

The official answer is that we do not support or encourage Javascript at all, but it’s very possible that some Javascript works. If kids want to use Javascript extensively, they’ll probably need to move to a different system for publishing their sites.

Students can also use the Game Lab system to create a Javascript-based game and embed the entire game into the site, if that’s something that they are interested in. Once they choose to “Share” a project, they can choose “Advanced Options” and follow the instructions to embed the iframe containing the game into their pages.

Elizabeth