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.