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": ""
}
}
}