Data binding for all information screens

You currently have the following Data JSON structure:

{
    "information": {
        "backgroundImage": {
            "url":
            "colorOverlay":
        },
        "logoUrl":
        "textContent": {
            "primaryText":
            "hintText":
        }
    }
}

Assuming that you have all the assets for background images and define all the text values for all the information screens, you can test all of the data-source values dynamically to capture data for the following screens:

  • Welcome screen
  • Illegal Move screen
  • User Wins screen
  • User Loses screen
  • Draw screen

The main purpose of the following task is to test your data–binding expression correctness and your data-source.json structure against the visual result you would like to produce.

Include any of the following attributes and values into the URL for backgroundImage, primaryText, and hintText for any of the following screens:

Screen name Background image URL ("url") "primaryText" "hintText"
"welcome" https://d3j5530a0cofat.cloudfront.net/adlc/background.png "Welcome to Tic-Tac-Toe!" Try, "Alexa, top row, left column"
"illegalMove" https://d3j5530a0cofat.cloudfront.net/adlc/illegal.png "Sorry, this is not a legal move…" Try, "Alexa, help"
"win" https://d3j5530a0cofat.cloudfront.net/adlc/win.png "Congrats! You won!" State your first move to start a new game
"lose" https://d3j5530a0cofat.cloudfront.net/adlc/lose.png "Sorry… You lose!" State your first move to start a new game
"draw" https://d3j5530a0cofat.cloudfront.net/adlc/draw.png "That’s a draw! Good game!" State your first move to start a new game

Set "logoUrl": "https://d3j5530a0cofat.cloudfront.net/adlc/somelogo.png" because this value is the same for all screens.

APL document:

{
    "type": "APL",
    "version": "1.7",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.4.0"
        }
    ],
    "mainTemplate": {
        "parameters": [
            "information"
        ],
        "items": [
            {
                "type": "AlexaHeadline",
                "id": "informationScreen",
                "backgroundImageSource": "${information.backgroundImage.url}",
                "backgroundColorOverlay": "${information.backgroundImage.colorOverlay}",
                "headerAttributionImage": "${information.logoUrl}",
                "primaryText": "${information.textContent.primaryText}",
                "footerHintText": "${information.textContent.hintText}"
            }
        ]
    }
}

data-sources.json:

{
    "information": {
        "backgroundImage": {
            "url": "",
            "colorOverlay": ""
        },
        "logoUrl": "",
        "textContent": {
            "primaryText": "",
            "hintText": ""
        }
    }
}