Skip to content

Instantly share code, notes, and snippets.

@mlopezr

mlopezr/Sample question component for quiz skill using APL.md

Last active August 2, 2019 13:12
Show Gist options
  • Save mlopezr/34970c9ea44568243a1afc206b4c4669 to your computer and use it in GitHub Desktop.
Save mlopezr/34970c9ea44568243a1afc206b4c4669 to your computer and use it in GitHub Desktop.
Download ZIP
Sample APL for quiz skill: pager with result of last question and next question
Raw
executecommands-directive.json
{
"type": "Alexa.Presentation.APL.ExecuteCommands",
"token": "question",
"commands": [
{
"type": "Sequential",
"commands": [
{
"type": "SpeakItem",
"componentId": "resultText"
},
{
"type": "SetPage",
"componentId": "questionPager",
"position": "absolute",
"value": 1
},
{
"type": "SpeakItem",
"componentId": "questionText"
}
]
}
]
}
Raw
quiz-questions-doc-sources.json
{
"document": {
"type": "APL",
"version": "1.0",
"theme": "dark",
"import": [
{
"name": "alexa-viewport-profiles",
"version": "1.0.0"
}
],
"resources": [],
"styles": [],
"layouts": {
"SmallQuestionLayout": {
"parameters": [
"question"
],
"items": [
{
"type": "Container",
"height": "100vh",
"width": "100vw",
"alignItems": "center",
"items": [
{
"type": "Image",
"position": "absolute",
"height": "100vh",
"width": "100vw",
"source": "${question.imageURL}",
"scale": "best-fill"
},
{
"type": "Frame",
"position": "absolute",
"bottom": "0",
"height": "30vh",
"width": "100vw",
"backgroundColor": "rgba(0, 0, 0, 0.6)",
"items": [
{
"type": "Container",
"alignItems": "center",
"items": [
{
"type": "Text",
"text": "${question.primaryText}",
"id": "questionText",
"speech": "${question.speech}",
"fontSize": "40dp",
"textAlign": "center",
"width": "80vw",
"paddingTop": "10px"
},
{
"type": "Text",
"text": "${question.secondaryText}",
"fontSize": "20dp",
"textAlign": "center",
"width": "60vw"
}
]
}
]
}
]
}
]
},
"LargeQuestionLayout": {
"parameters": [
"question"
],
"items": [
{
"type": "Container",
"direction": "row",
"items": [
{
"type": "Image",
"source": "${question.imageURL}",
"width": "50vw",
"height": "100vh",
"scale": "best-fill"
},
{
"type": "Container",
"width": "50vw",
"height": "100vh",
"direction": "column",
"alignItems": "center",
"items": [
{
"type": "Container",
"height": "40vh",
"items": [
{
"type": "Text",
"text": "${question.primaryText}",
"id": "questionText",
"speech": "${question.speech}",
"textAlign": "center",
"fontSize": "60dp",
"paddingTop": "10vh",
"paddingBottom": "20px"
},
{
"type": "Text",
"text": "${question.secondaryText}",
"textAlign": "center",
"fontSize": "40dp"
}
]
},
{
"type": "LargeButton",
"id": "yesButton",
"text": "Yes",
"eventName": "yesEvent"
},
{
"type": "LargeButton",
"id": "noButton",
"text": "No",
"eventName": "noEvent"
},
{
"type": "Text",
"text": "${question.lives}️",
"fontSize": "40dp",
"color": "red",
"position": "absolute",
"bottom": "20px",
"left": "40px"
},
{
"type": "Text",
"text": "${question.score} 👤",
"fontSize": "40dp",
"position": "absolute",
"bottom": "20px",
"right": "20px"
}
]
}
]
}
]
},
"SmallResultLayout": {
"parameters": [
"previousQuestion"
],
"item": {
"type": "Container",
"height": "100vh",
"width": "100vw",
"alignItems": "center",
"items": [
{
"type": "Image",
"position": "absolute",
"width": "100vw",
"height": "100vh",
"source": "${previousQuestion.imageURL}",
"overlayColor": "rgba(0, 0, 0, 0.5)",
"scale": "best-fill"
},
{
"type": "Container",
"position": "absolute",
"bottom": "0",
"height": "30vh",
"width": "100vw",
"alignItems": "center",
"items": [
{
"type": "Text",
"text": "${previousQuestion.primaryText}",
"id": "resultText",
"speech": "${previousQuestion.speech}",
"fontSize": "40dp",
"textAlign": "center",
"width": "80vw",
"paddingTop": "10px"
},
{
"type": "Text",
"text": "${previousQuestion.secondaryText}",
"fontSize": "20dp",
"textAlign": "center",
"width": "60vw"
}
]
},
{
"type": "Text",
"text": "${previousQuestion.lives}",
"color": "red",
"fontSize": "30dp",
"position": "absolute",
"top": "0",
"left": "30vw",
"paddingTop": "10vw"
},
{
"type": "Text",
"text": "${previousQuestion.score} 👤",
"fontSize": "30dp",
"position": "absolute",
"top": "0",
"right": "30vw",
"paddingTop": "10vw"
},
{
"type": "Text",
"text": "${previousQuestion.result}",
"position": "absolute",
"top": "40vh",
"height": "30vh",
"width": "100vw",
"fontSize": "50dp",
"paddingTop": "20px",
"textAlign": "center"
}
]
}
},
"LargeResultLayout": {
"parameters": [
"previousQuestion"
],
"items": [
{
"type": "Container",
"direction": "row",
"items": [
{
"type": "Image",
"source": "${previousQuestion.imageURL}",
"width": "50vw",
"height": "100vh",
"scale": "best-fill"
},
{
"type": "Container",
"width": "50vw",
"height": "100vh",
"direction": "column",
"alignItems": "center",
"items": [
{
"type": "Container",
"height": "50vh",
"items": [
{
"type": "Text",
"id": "resultText",
"speech": "${previousQuestion.speech}",
"text": "${previousQuestion.primaryText}",
"textAlign": "center",
"fontSize": "60dp",
"paddingTop": "10vh",
"paddingBottom": "20px"
},
{
"type": "Text",
"text": "${previousQuestion.secondaryText}",
"textAlign": "center",
"fontSize": "40dp"
}
]
},
{
"type": "Container",
"height": "30vh",
"items": [
{
"type": "Text",
"text": "${previousQuestion.result}",
"fontSize": "60dp"
}
]
},
{
"type": "Text",
"text": "${previousQuestion.lives}️",
"fontSize": "40dp",
"color": "red",
"position": "absolute",
"bottom": "20px",
"left": "40px"
},
{
"type": "Text",
"text": "${previousQuestion.score} 👤",
"fontSize": "40dp",
"position": "absolute",
"bottom": "20px",
"right": "20px"
}
]
}
]
}
]
},
"LargeButton": {
"parameters": [
"text",
"eventName"
],
"items": [
{
"type": "TouchWrapper",
"paddingTop": "2vh",
"paddingBottom": "2vh",
"item": [
{
"type": "Frame",
"borderRadius": 15,
"backgroundColor": "grey",
"item": {
"type": "Text",
"text": "${text}",
"textAlign": "center",
"textAlignVertical": "center",
"width": "30vw",
"height": "10vw",
"paddingTop": 10,
"paddingBottom": 10,
"paddingLeft": 10,
"paddingRight": 10
}
}
],
"onPress": [
{
"type": "SendEvent",
"arguments": [
"${eventName}"
]
}
]
}
]
},
"QuestionLayout": {
"parameters": [
"question"
],
"items": [
{
"when": "${@viewportProfile == @hubRoundSmall}",
"type": "SmallQuestionLayout",
"question": "${question}"
},
{
"when": "${@viewportProfile != @hubRoundSmall}",
"type": "LargeQuestionLayout",
"question": "${question}"
}
]
},
"ResultLayout": {
"parameters": [
"previousQuestion"
],
"items": [
{
"when": "${@viewportProfile == @hubRoundSmall}",
"type": "SmallResultLayout",
"previousQuestion": "${previousQuestion}"
},
{
"when": "${@viewportProfile != @hubRoundSmall}",
"type": "LargeResultLayout",
"previousQuestion": "${previousQuestion}"
}
]
}
},
"mainTemplate": {
"parameters": [
"dataSources"
],
"item": [
{
"type": "Pager",
"id": "questionPager",
"width": "100vw",
"height": "100vh",
"items": [
{
"type": "ResultLayout",
"previousQuestion": "${dataSources.previousQuestion.properties}"
},
{
"type": "QuestionLayout",
"question": "${dataSources.question.properties}"
},
{
"type": "ResultLayout",
"previousQuestion": "${dataSources.question.properties}"
}
]
}
]
}
},
"dataSources": {
"previousQuestion": {
"type": "object",
"properties": {
"imageURL": "https://upload.wikimedia.org/wikipedia/commons/7/72/Kofi_Annan_2012_%28cropped%29.jpg",
"primaryText": "Kofi Annan",
"secondaryText": "was the 7th Secretary-General of the United Nations",
"result": "Correct!",
"resultSsml": "Great! <break time='500ms'/>",
"lives": "♥♥♥",
"score": "40"
},
"transformers": [
{
"inputPath": "resultSsml",
"outputName": "speech",
"transformer": "ssmlToSpeech"
}
]
},
"question": {
"type": "object",
"properties": {
"imageURL": "https://upload.wikimedia.org/wikipedia/commons/5/56/Jane_Fonda_Cannes_nineties.jpg",
"primaryText": "Jane Fonda",
"secondaryText": "won 2 Academy Awards for Best Actress",
"ssml": "<speak>Jane Fonda won 2 Academy Awards for Best Actress. True or false?</speak>",
"result": "Correct!",
"lives": "♥♥♥",
"score": "40"
},
"transformers": [
{
"inputPath": "ssml",
"outputName": "speech",
"transformer": "ssmlToSpeech"
}
]
}
}
}
Raw
Sample question component for quiz skill using APL.md

Sample question component for quiz skill using APL

This is a sample APL for a quiz result and question.

It includes both the APL document and sample data sources.

Tweak it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment