Array question similar to Unit 6 L.10 S. 7

CS Discoveries
1

I have a student that is wanting to create something very similar to Lesson 10 Slide 7 in one of their projects. They are wanting to use two arrays, one for different images and one for different colors, and then use the on board event to randomly select an image and color. He knows how to code it, however the issue we are having is how to store multiple images. In design mode, he is not able to select more than one image when he drags the image icon over. If he leaves the image icon blank and then creates the arrays, the image doesn’t load/appear properly when the button is clicked on the board…it’s like the images aren’t there.
Thank you for your help!

2

So is he trying to put another image element over the top of the other?
Or is he trying to do something like I show below?

You can store multiple images in design mode as well. You can upload them as assets. However what I believe your student is trying to do is very simple.

Here is the link to my project which includes what I believe is what you want. It will be shown as soon as you start the game as a new user. Whenever you click the arrows and or hit the right/left arrow keys the images, info, and name of the “character-class” will be set.

~I should mention if you want to play the actual game just remove the /edit and the end of the link. left it there so that you would be able to see the code.

var curNum = 0;
    //set the variable so we know which list item we are on.

function cn1() {
    //up the current number(function removes confusion.)
    curNum++;
}

function cn2() {
    //lower the current number.
    curNum--;
}

function next() {
    //first we have to up the current number so that we can change the image.
    cn1();
    if (curNum == classes.length) {
        //If the current number is equal to our array's length then we want to reset the images and 
        //start looping from there again.
        curNum = 0;
    }
    //Now we set our images.
    sett();
}

function last() {
    //Same idea as the last function but just lower the array's list item.
    cn2();
    if (curNum < 0) {
        curNum = classes.length - 1;
    }
    sett();
}

//Using an array we define our classes
//Don't mine the first append item it's just an example because the link was very long.
//Also to get the image link/address go to google (or where you're getting the image), right click 
//select "Copy Image Address" then paste it into one of the append items below.
//Lastly if you don't know what an append item is please check here 
//~>https://studio.code.org/docs/applab/appendItem/
var classes = [];
appendItem(classes, "image1s.link");
appendItem(classes, "https://art.pixilart.com/b86128066c06a73.png");
appendItem(classes, "https://i.pinimg.com/originals/d1/db/6e/d1db6ec82ea7502d3a2663ebe14a883b.gif");

//Lastly we set our image's url. The image we have would simply be one "drag and dropped" 
//""Image"" element in the app lab's design portion.
setImageURL("classImg", classes[curNum]);

If you have any other questions or my response is incorrect then please reply and or reach out to me thru a personal message on this website.

~Asuna :slight_smile: New Member of the Month