Group the markers and apply data binding

In this section, you'll move beyond designing for one marker to designing for multiple markers on the same Tic-Tac-Toe skill board. This involves data binding. Start thinking backwards from a filled up Tic-Tac-Toe board by studying the following frameData data source object:

{
    "frameData": {
        "topRow": [
            {
                "marker": "https://d3j5530a0cofat.cloudfront.net/adlc/cross.png"
            },
            {
                "marker": "https://d3j5530a0cofat.cloudfront.net/adlc/circle.png"
            },
            {
                "marker": "https://d3j5530a0cofat.cloudfront.net/adlc/cross.png"
            }
        ],
        "middleRow": [
            {
                "marker": "https://d3j5530a0cofat.cloudfront.net/adlc/cross.png"
            },
            {
                "marker": "https://d3j5530a0cofat.cloudfront.net/adlc/circle.png"
            },
            {
                "marker": "https://d3j5530a0cofat.cloudfront.net/adlc/circle.png"
            }
        ],
        "bottomRow": [
            {
                "marker": "https://d3j5530a0cofat.cloudfront.net/adlc/circle.png"
            },
            {
                "marker": "https://d3j5530a0cofat.cloudfront.net/adlc/cross.png"
            },
            {
                "marker": "https://d3j5530a0cofat.cloudfront.net/adlc/cross.png"
            }
        ]
    }
}

The data-source object structure breaks down the nine positions of the board by row ("topRow", "middleRow", and "bottomRow"). Each row is an array of three markers as objects, and the value of each marker is a URL for the X or the O image.

This structure is straightforward to use in your Tic-Tac-Toe skill’s backend if you handle the two Tic-Tac-Toe players’ moves (user and Alexa) in a 2D array.