How to make a random quotes Alexa Skill

Hello, Alexa Skill Builders! In this tutorial, we will learn how to make an Alexa Skill that responds to the user with random quotes from a list. If you are new to building Alexa Skills, this is the lesson that you have been waiting for!

Getting Started

Before we begin, make sure to create a custom skill hosted by Amazon to follow along. Open the Alexa Developer Console in a separate browser tab, then click “Create Skill“.

Enter an invocation name, then select the Custom model option.

Then make sure to select the Alexa-Hosted (Node.js) option for the skill’s backend resources:

Selecting the Alexa-hosted Node.js option when creating a skill

Scroll back to the top, then click Create Skill. It shouldn’t take long for the resources to be provisioned, at most a minute. Once the skill has been created, your browser will redirect to the Alexa hosted development environment.

In the meantime, we can continue with this tutorial to get all of the building blocks we will need to complete this skill.

Get a list of quotes

While our skill is building for the first time, let’s create a list of quotes that we want Alexa to respond with. For a simple list, you can simply copy a bunch from here, https://www.brainyquote.com/top_100_quotes, and paste them into a document, each quote occupying one line.

If you’re creative, you can come up with your own list or use the Internet to generate a list. Just make sure to have at least five quotes or else the skill will be boring.

In the next step, we will be converting this list to a JavaScript array that we will consume in our AWS Lambda function.

Convert the list to a JavaScript module

By now, our skill should have been provisioned with sample code hosted by Alexa. The sample code is simple but has enough boilerplate code to help get you started debugging and troubleshooting.

Navigate to the Code tab in the Alexa Developer Console. You should see something like this:

Create a file called quotes.js by right-clicking on the lambda folder in the IDE.

Creating a file in the Alexa Developer Console Code tab

Creating a file in the hosted Alexa lambda boilerplate code

After you click Create File, you will be presented with a blank file that we can use for our quotes. Add the following snippet to the file:

modules.exports = [

];

This is an empty array that we are exporting for use in other modules in our Lambda skill.

Next, let’s add those quotes that we gathered for our skill to our array. For each quote, wrap it in a backticks (template literals) like so: `This is a quote`. Add a comma after each quote. You do not have to add a comma after the last item.

module.exports = [
    `A good programmer looks both ways before crossing a one-way street.`,
    `A computer program does what you tell it to do, not what you want it to do.`,
    `Only half of programming is coding. The other 90% is debugging`,
    `The best thing about a boolean is even if you are wrong, you are only off by a bit.`,
    `There is nothing quite so permanent as a quick fix.`,
    `There’s no test like production.`
];

Alright, now we’re getting somewhere! Let’s step back from the code for a minute and learn about retrieving random elements from an array in JavaScript.

Getting a random item from an array in JavaScript

As a JavaScript developer for the majority of my career, I have run across many instances where I needed to get a random element from an array. Here’s the quick and dirty way to do it:

const quotes = [
`A good programmer looks both ways before crossing a one-way street.`,
`A computer program does what you tell it to do, not what you want it to do.`,
`Only half of programming is coding. The other 90% is debugging`,
`The best thing about a boolean is even if you are wrong, you are only off by a bit.`,
`There is nothing quite so permanent as a quick fix.`,
`There’s no test like production.`
];

const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];

The variable randomQuote will now store a reference to a random item from the quotes array.

If you are unfamiliar with JavaScript arrays or the built-in Math object (and its methods), here are some quick links to check out:

Here is a working HTML example that will demonstrate this code in action:

How random is random?

After clicking on the button several times, you may notice that the quote sometimes doesn’t change. This is not a bug!

What is actually happening is that the random integer generated by this snippet, Math.floor(Math.random() * quotes.length), sometimes results in the same number (resulting in the same quote) as the previous call.

There are a few ways to address this “unrandomness”. The easiest way is to create an array with so many elements that this duplicate item occurrence rarely happens. If you had a list of a thousand items, it is unlikely that the random number generator will return the same array index as the previous index. Be aware that this is not a fix, but for non-critical applications it is fine.

Another way to solve this is to keep track of the previous index used and to generate another index if it matches. Here’s another HTML example that demonstrates how to guarantee that you will not have the same response twice in a row:

For most purposes, the previous code snippet is enough to get a random item from a JavaScript array. However, you can continue refactoring this example to get the randomness that you need for your application.

Testing our quotes module

Now that we’re a little more educated about JavaScript arrays and randomness, head back to our Alexa Skill IDE’s Code tab and make two edits to index.js.

The first edit will be to import the quotes module into index.js. The second edit is to use the first element of the quotes array for output.

See the code below for the edits you need to make (search for // *** add this line ***):

const Alexa = require('ask-sdk-core');
// *** add this line ***
const quotes = require('./quotes');


const LaunchRequestHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'LaunchRequest';
    },
    handle(handlerInput) {
        const speakOutput = 'Welcome, you can say Hello or Help. Which would you like to try?';
        return handlerInput.responseBuilder
            .speak(speakOutput)
            .reprompt(speakOutput)
            .getResponse();
    }
};
const HelloWorldIntentHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'IntentRequest'
            && Alexa.getIntentName(handlerInput.requestEnvelope) === 'HelloWorldIntent';
    },
    handle(handlerInput) {
        // *** add this line ***
        const speakOutput = quotes[0];
        return handlerInput.responseBuilder
            .speak(speakOutput)
            //.reprompt('add a reprompt if you want to keep the session open for the user to respond')
            .getResponse();
    }
};
// ... more code

Once you have made these edits, click Save then Deploy to update your Skill.

Our next step is to navigate to the Test tab. If this is your first time on this screen, you will not be able to interact with your skill yet. Select Development from the dropdown next to the text Skill testing is enabled in.

Switching to the Development mode in the Alexa Developer Console

For the purposes of this tutorial, my skill is called Random Quotes. You can either type this into the dialog box on the left or use your computer’s microphone to issue the commands.

Once the initial message plays, enter hello into the dialog box.

If Alexa reads off the first quote on your list, you’ve completed the first testing of the random quotes Alexa Skill. Good job!

Making the response quote random

Our next step is to change the response to our hello command to a random quote.

Go back to the Code tab in the Alexa Developer Console and update the HelloWorldIntentHandler like so:

const HelloWorldIntentHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'IntentRequest'
            && Alexa.getIntentName(handlerInput.requestEnvelope) === 'HelloWorldIntent';
    },
    handle(handlerInput) {
        // *** add this ***
        const speakOutput = quotes[Math.floor(Math.random() * quotes.length)];
        return handlerInput.responseBuilder
            .speak(speakOutput)
            // *** add this ***
            .withShouldEndSession(false)
            .getResponse();
    }
};

The variable speakOutput will get a random element from the quotes array for use in the Alexa response. The withShouldEndSession(false) snippet will keep the session open so that you can test the skill’s random output.

Return to the Test tab, invoke your skill, and say hello multiple times. You should get a random response every time. Try saying hello more than twice, as you may get the same quote if your list is short.

If your dialog flow looks similar to mine, you’ve completed this tutorial. Congratulations!!!

Conclusion and further education

Thanks for following along with this tutorial. You are well on your way to becoming an Alexa Skill Builder! I hope that you learned a lot and continue to further sharpen your skills. This tutorial is short and to-the-point, but you can customize it further with a little creativity and know-how.

If you don’t want to keep saying hello to your Skill, by playing around with sample utterances for the HelloWorldIntent on the Build tab.

For a challenge, see if you can ensure that the next quote Alexa says is not the same as previous quote heard by the user. Here’s a hint: use session attributes to save the index of the previous quote, then check to see if the next random index matches. If so, generate another one. You can use the above JSFiddle code snippets for some sample code inspiration.

Another great way to expand this skill would be to host these quotes in DynamoDB. An advantage of using a database with your skill is that you don’t need to deploy or publish a new version to get fresh content out to your users. Stay tuned for tutorials on working with DynamoDB on the Alexa Platform!

Be sure to check out our Tutorials page for more tutorials and lessons on making your Alexa Skills exciting!

Until next time, happy coding!