Link to the project or level: (Code.org)
Looking specifically into the function on lines 45-70, at the command “appendItem, topsList or bottomsList, https: image link, blah, blah, blah”
How can the student re-create this in his/her AP project and add their own images?
These images shown here are uploaded to Code.org. I saw the link to the Yellow Hoodies in the Design tab, and I can see where to upload the image for that one, BUT that’s only the first (top) image.
There is no data tab to create a list, and there is no way (that I can see) how the list is appended, unless it’s pulling the image straight from the internet with the link. Does the image have to be hosted by Code.org, as with the other lessons? All of the images used in this lesson are already “uploaded” to Code.org. And we do not see a place or way to “upload” them with the command that is being used here.
Please help us someone!
Thanks!
“Mrs. Amy”
Hi Mrs. Amy,
The program that you linked does indeed pull images from the web - this is happening in all of the .append() calls in the last function of the program. Your student could use these same URLs (if they want the same images), but the Image element can use any url that displays an image (usually something that ends in .jpg or .png in the URL). If you think about the lesson on lossy compression, when students upload an image in to the sample app, they upload an image of the picture they want. This is the same url you would put in to the code to display the image in an Image element from design mode. If your student is looking to add her own images, I would encourage her to consider:
A. Does she have usage rights for the image (Creative Commons)
B. Can she find images that have ‘transparent’ backgrounds. This will make the app look a little nicer, rather than displaying the rectangle background behind the focal subject of the image.
Hi! Thank you so much for replying.
Yes, these are images pulled from Canva, where they are free to use for educational purposes, and we do have them set to transparent backgrounds.
I’m pasting the links inside the appropriate field for URLs, but because the link doesn’t end in the appropriate extension, (PNG, GIF, or JPEG), the links to the shared images from Canva won’t work.
We need to be able to add these links to the Data List for the App.
There are no clear instructions in Code.org on how to do this. This is something that needs to be addressed in the curriculum.
Any other advice?
Thank you!
Amy
He’s switching to the other way to pull from the list as exemplified in the Code.org lessons. Instead of “appendList,” he’s trying to use the data table now.
I hate that I am not more help on this, as the teacher. I facilitate for CSF, the Elementary Code.org.
The last time I taught CSP was in 2020, and there have been MANY changes!
Thank you!
It sounds like he is learning some good problem solving and debugging techniques if nothing else! Best of luck to you both.
1 Like