Alexa Headline template

The Alexa Headline template (AlexaHeadline) displays short informational text on the screen. It is a responsive full-screen template including header, footer, background, and a logo image.

For the Tic-Tac-Toe skill, you'll use AlexaHeadline to design screens for the following parts of the user experience:

Welcome screen
User gives an illegal move
User wins
Alexa wins
Game results in a draw

The best way for you to start is to think about the Welcome screen first, and then to identify what all screens have in common. You'll include the AlexaHeadline as a mainTemplate item, and use the following parameters of AlexaHeadline.

Name	Type	Default	Description
`type`	String	None	Always set to `AlexaHeadline`
`primaryText`	String		Primary text to display in up to two lines. Text is truncated to fit to two lines.
`backgroundImageSource`	String	None	URL for the background image source. Note that you must use https, rather that http in the URL.
`backgroundColorOverlay`	Boolean	`false`	When true, apply a scrim to the background to make it easier to read the text displayed over the image or video.
`footerHintText`	String	None	Hint text to display in the footer. Use `textToHint` to add the correct wake word to the hint.
`headerAttributionImage`	String	None	URL for attribution image source. We will use this image for a logo. Note that you must use https, rather that http in the URL.

For more details, see Headline in the Alexa Skills Kit. For design guidance, see Headline in the Alexa Design Guide.

If you add the AlexaHeadline as an item of mainTemplate, the example below shows how the JSON updates.

{
    "type": "APL",
    "version": "1.7",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.4.0"
        }
    ],
    "mainTemplate": {
        "items": [
            {
                "type": "AlexaHeadline",
                "id": "informationScreen"
            }
        ]
    }
}

Keep in mind that it is always a good idea to define a string value as an id for every item in the mainTemplate, especially if your APL document uses many components. That's why you use "informationScreen".

Exercise 1

Update the APL document to produce the following informational screen.

{
    "type": "APL",
    "version": "1.7",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.4.0"
        }
    ],
    "mainTemplate": {
        "items": [
            {
                "type": "AlexaHeadline",
                "id": "informationScreen",
                "backgroundImageSource": "",
                "backgroundColorOverlay": true,
                "headerAttributionImage": "",
                "primaryText": "",
                "footerHintText": ""
            }
        ]
    }
}

Use the following assets and text:

Background image: https://d3j5530a0cofat.cloudfront.net/adlc/background.png
Logo image: https://d3j5530a0cofat.cloudfront.net/adlc/somelogo.png
Header text: Welcome to Tic-Tac-Toe!
Footer text: Try, "Alexa, top row, left column"

Tip: Use the escape character \ to display double quotes within text, like "\"Alexa, ...\"".

Important: Click here and then Blank Document to test your solution against the APL authoring tool in the developer console. Save this link as a bookmark because you will use it throughout the course.

Solution

{
    "type": "APL",
    "version": "1.7",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.4.0"
        }
    ],
    "mainTemplate": {
        "items": [
            {
                "type": "AlexaHeadline",
                "id": "informationScreen",
                "backgroundImageSource": "https://d3j5530a0cofat.cloudfront.net/adlc/background.png",
                "backgroundColorOverlay": true,
                "headerAttributionImage": "https://d3j5530a0cofat.cloudfront.net/adlc/somelogo.png",
                "primaryText": "Welcome to Tic-Tac-Toe!",
                "footerHintText": "Try, \"Alexa, top row, left column\""
            }
        ]
    }
}