Making a screen flip through multiple background colors

I have an ambitious student trying to make their end of unit 3 project do stuff beyond the scope of the project. His app includes a little quiz that takes you to a win or lose screen depending on which button you click. He wants to make the win screen consecutively change colors when it appears (like a disco). If he runs the code to change the background colors they change too quickly and you can’t see each color. We are trying to utilize setTimout() but we are having trouble because it doesn’t allow you to have more than one of those inside the same on event.

Can you share the code you have so far?

Try using setInterval, or maybe use a gif. As @rossiai said, it would be helpful if you would link the code so we can help you.

Hi, there. See if you like this. I created two screens. When you click the button in the first screen, you go to the discoScreen. This screen randomly changes colors ten times. You can make it change colors as many times as you want. I just selected 10. You can also make it so it continues looping.

1 Like

Of course, you don’t need to use an onEvent. Just name your screen discoScreen and use this code:

setScreen(“discoScreen”);
var count = 0;
timedLoop(1000, function() {
setProperty(“discoScreen”, “background-color”, rgb(randomNumber(20, 240),randomNumber(20, 240),randomNumber(20, 240)));
count = count + 1;
if (count == 10){
stopTimedLoop();
console.log("count equals: " + count);
}
});

1 Like

Thanks so much! This community is great!

1 Like

Use the following code if you want the screen to change colors indefinitely. If you want the colors to change faster, change the 1000 into 700 or 500. These are the milliseconds you have to wait before each repetition of the loop. In this code I used the full range of color for each channel (0,255)

setScreen(“discoScreen”);
timedLoop(1000, function() {
setProperty(“discoScreen”, “background-color”, rgb(randomNumber(0, 255),randomNumber(0, 255),randomNumber(0, 255)));
});

1 Like