Review and introduction

In Lab 4, you implemented simple visuals by using the Text, AlexaImage, AlexaBackground, and Frame components or combinations of them inside containers. You also learned how to distinguish between rendering visuals based on the viewport profile and orientation of the device the visuals render on. By using these elements on responsive and appealing screens, you've taken your first step toward creating a successful visual experience for the Tic-Tac-Toe skill.

In Lab 5, you'll continue to create the visual user experience for the Tic-Tac-Toe skill that performs the following tasks:

• Displays a background image of an empty board.
• Places the marker of each player as an image (displaying X or O) when they make their move.
• Updates the board if the user changes their marker (from cross to circle or the other way around).
• Displays an empty board when the game ends to enable users to start a new game.

Managing marker image placement per row requires that you design responsive components and layouts. In Lab 5, you'll focus on how to achieve full responsiveness for all the board images and their placement on the board through APL documents and back-end code.