Link to the project or level: App Lab - CodeAI
What I expect to happen: A student is using the Decision Making App project to create an app where you customize a car by clicking the car type, wheels, and track. He made this app for a previous project, but is adapting it to the Decision Maker app. On one screen, he has a selection of cars with a yellow rectangle showing which car is selected. He wants users to be able to click other cars and move the yellow rectangle. I’m not sure whether App Lab can detect click locations on the screen, or whether I should suggest he turn each car into a button. Or is there a better solution?
Hello,
You can actually make the car images clickable directly in App Lab! You don’t need to turn them into buttons.
Give each car image a unique ID in Design Mode, then use an onEvent() block to detect when that image is clicked. You can use setPosition() to move the yellow rectangle to the appropriate location.
For example, if the rectangle has the ID selectionBox:
onEvent(“car1”, “click”, function() {
setPosition(“selectionBox”, 20, 100, 90, 60);
});
onEvent(“car2”, “click”, function() {
setPosition(“selectionBox”, 120, 100, 90, 60);
});
The numbers are the rectangle’s x-position, y-position, width, and height, so you’ll need to adjust them to match the layout.
App Lab can also detect where a user clicks, but since the cars are already separate images, attaching click events to each one is simpler.
One thing to watch for: make sure the yellow rectangle doesn’t cover the clickable car images, since that could intercept the clicks. You could also use setProperty() to change the selected image’s border color instead of moving a separate rectangle.