Build Custom Search within Storyline using JavaScript

Using JavaScript, follow these instructions to add a Custom Search Engine to your course. In 2018, I shared this functionality via a 5 minute Spark Presentation at the Chicago eLearning & Technology Showcase in Naperville, IL.

JavaScript Course Image

 

Note: The instructions below were programmed using Articulate Storyline 2, and I have ensured they are applicable in Storyline 3 and Storyline 360 as well. These instructions are specific to jumping to a specific slide when a user enters specific search terms, however you could also have other actions occur when this happens, such as displaying a layer or changing an object's state to show applicable search results.

 

Build Custom Search Engine in Storyline:

1. Add a "search" slide (your slide 1.1) in Articulate Storyline.

2. On this slide, add a Text Entry Field and edit the variable associated with the entry field. Click the + sign within the variable popup to add a new variable. 

3. Name the new variable: searchfield  and make it a Text variable with an initial value of (blank).

4. Also on your search slide, add a button and add "Search" as the button's text.

5. Add a new variable: placement  and make it a Number variable with an initial value of 0.

6. Add a reference to the placement variable on your slide by adding a text box and entering the text: %placement% into the text box. 

7. Create your content slide(s). 

Optional: On each content slide, add a button which contains a trigger to jump to slide 1.1 when the user clicks it so that the user can easily return to the search slide.

8. For each content slide, think about the keywords that the user might enter into a search bar in order to find that content. List out these keywords in a notepad and make them all be in lowercase letters. (JavaScript is case sensitive and this example only works with lowercase letters for ease of programming).

9. Return to the search slide and edit the search button's default trigger

Action: Execute JavaScript

Script: 

var player = GetPlayer();

var parameters = player.GetVar("searchfield");

var lower = parameters.toLowerCase();

var key = "(insert your slide's keywords here inside the quotes without the parenthesis)";

var termlocation = key.search(lower);

player.SetVar("placement",termlocation);

When: User Clicks

Object: Search Button

On Condition: searchfield != Not equal to (blank)

 

10. Publish your course to HTML to test it. 

Note: You cannot preview JavaScript programming in Storyline, you have to publish it to test it.

11. Enter each of your keywords, one at a time, into the text entry search field and click the search  button.

12. Note the value of the placement variable reference on the slide for each of your keywords. 

Ex. keyword 1 = 0  keyword 2 = 10  keyword 3 = 20

13. On the search slide, add a trigger on the search button to:

Action: Jump to slide

Slide: (appropriate content slide corresponding to the first keyword(s))

When: User Clicks

Object: Search button

On Condition: 

placement == Equal to (insert placement # corresponding to keyword) 

Ex. Jump to slide 1 when placement == Equal to 0

14. Repeat step 13 as needed to add any additional triggers to jump to additional slides when the placement variable is equal to the correct corresponding keyword #.  

Ex. Jump to slide 2 when placement == Equal to 10

15. Remove the placement variable reference (%placement%).

16. Publish to HTML.

Finished result: User enters a keyword into the text entry search field, clicks search button, and the corresponding slide displays.

 

Happy programming!

31 Replies
Bridget O'Dell

Hello, Content Creators,

In the JavaScript programming, after var key = ".....";

Yes, you should enter each of your keywords between the quotation marks. For example, if your course contained the keywords: Chicago, New York, and Los Angeles, you would enter (in any order):

var key = "Chicago New York Los Angeles";

The next action that is executed in the JavaScript code is for it to search within your keywords for whatever text the user entered in the course. Example: If the user entered Chicago, the JavaScript code searches for the character placement of the word Chicago. Then, the JavaScript code sets that value as the value of the Storyline Variable: placement.

By adding a reference (text box with %placement% text) to this Storyline variable in your course, you can easily see the value of each of your keywords that is returned once you publish the course to HTML to test it. 

Example:

For the above keywords, if the user searched for Chicago, placement would be assigned a value of 0 as this keyword is found at position 0 within the text string.  If the user searched for New York, placement would be assigned a value of 8. If the user searched for Los Angeles, placement would be assigned a value of 17.

You can then use this value to execute specific actions within your course. Example: Jump to slide - Chicago slide - when user clicks the search button - if placement = 0.

Hope this helps!

Content Creators

Thank you for the reply. I'm still missing something.

How does the code know which keyword is tied to each slide? Do I type the
keywords onto the slides? I'm not sure how the JavaScript knows that a
specific slide is tied to a specific term, that is the part I don't
understand.

Let's say for example, I'm going to use the following keywords for Slide
2.1 (Scene 2, Slide 1):

- Keyword 1 - Conflict Resolution
- Keyword 2 - Resolving Conflict
- Keyword 3- Difficult Customers

What do I actually place on the slide so that the JavaScript knows that
those keywords are meant for that specific slide location?

Thanks,
CC

Bridget O'Dell

Hi Wes,

Happy to help! The JavaScript code is really just performing the action of searching for the term that the user entered in the list of keywords you program. Then, in Storyline, you add additional triggers to use that information to execute actions. It takes both aspects of programming to make the search functionality truly work.

David Glow

Will this search within text fields that contain variables?

For example, I have text input field that writes to "TextEntry" variable.

I put that %TextEntry% into a textbox on a slide.

Would the search find the results within that textbox stored in the TextEntry variable?

The standard search functionality in the player will not.  TYIA for the insights!

Bridget O'Dell

Hi David,

Thanks for reaching out with this question. Can you expand on your inquiry? 

As I understand, from what you've written above, the user types an entry into a text entry field. Whatever they enter is assigned as the value of the TextEntry variable. You then have added a reference to that value on a slide. 

Are you then asking if you add a second text entry field to act as the search entry, if that could also search for whatever term was entered into text entry field one?

Bridget O'Dell

@Content Creators - yes, you could do this.

When the user's text entry can't be found within the specified search terms, it will return a value of -1, which will be set as the value of the placement variable.

So, on your search button, you could add a trigger to "Jump to Slide" Unknown Term Slide when User Clicks if placement variable = -1.

Let me know if you have any additional questions on this.