Build Custom Search within Storyline using JavaScript

Hello!

Ever wish you could build a Custom Search Engine within your Storyline eLearning course so that users can search for the content they're looking for? Well, you can! Using JavaScript, follow these instructions to add a custom search bar and build custom search functionality in your eLearning course. I recently shared this functionality via a 5 minute Spark Presentation at the Chicago eLearning & Technology Showcase in Naperville, IL.

Note: These instructions were programmed using Articulate Storyline 2, but it should translate to Storyline 3 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.

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.

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

Hope this helps! Happy programming!

15 Replies
Bridget O'Dell

Hi Troy,

Unfortunately I don't have an example source file uploaded as of yet - need to find a good place to house my courses.

Can you copy and paste your JavaScript code into the discussion? I can take a look and see if I can spot the problem.

One easy thing to check is: does each line end in a semicolon ; ?

Also, you may need to manually re-type the code shared above into your JavaScript. Sometimes if you copy and paste the code, it pulls in extra programming that you can't see that prevents it from working. But if you manually type the code in, you will not pull in any extra programming and it should work properly.

Hope this helps!

andrea bauman

Hi Bridget, 
This is great and exactly what I need. I am having trouble when I add more than one word. I am thinking it is in the code.  Please see below and let me know what I am doing wrong.  

When I type in the word development, the search function works beautifully, but not when I type in test. Assuming because code reads right to left.

var player = GetPlayer();
var parameters = player.GetVar("searchfield");
var lower = parameters.toLowerCase();
var key = "test = 10 development = 40";
var termlocation = key.search(lower);
player.SetVar("placement",termlocation);

 

Thank you for any help you can provide. 

Bridget O'Dell

Also, another item to note is that the word "test" will give you a value of 0. 

This is the correct value. So if you are getting a value of 0 for the word "test" that is correct. You can build your programming to occur when placement = 0.

I get the following values when testing your code:

test      Placement = 0

= 10      Placement = 5

development        Placement = 10

= 40            Placement = 22

Let me know if this helps.

Bridget O'Dell

Final thing to test/check is the trigger order. You will want this JavaScript trigger to be the first one in your lineup.

So, on your search button, from top to bottom, the triggers in the right panel should be ordered:

1. Execute JavaScript programming

2. Do _____ according to Placement Value

 

Ex. JavaScript Programming gives me a value of Placement = 0 when the user has entered text and a value of 10 when the user enters development

Your next trigger should be to do something with those values by jumping to a slide or showing a layer, etc.   Ex. Jump to slide: Text when placement = 0     
Next Trigger: Jump to slide: Development when placement = 10

Bridget O'Dell

To explain what is happening in the JavaScript code, see explanation below:

var player = GetPlayer();

This sets up the communication between JavaScript and Storyline and allows JavaScript to see and set Storyline Variable Values.

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

This declares a JavaScript variable called "parameters" (you could name this something else as  long as you pull the name into the next line of code) and its value equal to the Storyline Variable "searchfield" value (aka whatever the user types into the Search bar). So if the user types in "cat" the JavaScript variable "parameters" is now equal to cat.

var lower = parameters.toLowerCase();

This declares a JavaScript variable called "lower" (again, you could name something else if desired as long as you carry it through the code wherever lower is) and its value is equal to the variable value of "parameters" but in lower case. So, this converts whatever the user has typed into the search bar into lowercase and that is the value of the "lower" JavaScript variable. So if the user typed in Cat, it is now cat and the value of the "lower" variable.

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

This declares a JavaScript variable called "key" and you can make its value whatever you want the search terms to be, within the " ".   Ex. "cat dog horse" Ensure you put these in lowercase since we're only working with lowercase letters.

var termlocation = key.search(lower);

This declares a JavaScript variable called "termlocation" which is equal to the position of the user's search entry within the overall search terms. Ex. If the search terms are "cat dog horse" and the user searches for cat, it will return a value of 0, dog a value of 4, and horse a value of 8.

player.SetVar("placement",termlocation);

The final step is to set the Storyline variable "placement" value = the JavaScript variable "termlocation" value. This way we can use the number determined in the last step within Storyline. Without this, the programming will not work.

 

Then, in your course the user enters a search term, clicks search, and the placement variable shows a value. Use this value to make triggers happen - ex. jump to a slide when placement = #, Show a layer when placement = # , Change a State of an Object when placement = #.

Excellence Education

Hi Bridget, thank you for this code, it's great.
Just one question: is there a solution if the same word occurs more than once in the course? I.e., if we can read the word "dog" in the slide 1.2 of the course, but this word is in the slide 2.7 too, how can we jump first to 1.2 and than to 2.7?

Thank you in advance

Gero

Bridget O'Dell

Hi Gero,

In JavaScript, the search() method returns the position where the match is first found. You can also use lastIndexOf() to return the position of the last occurrence of a value in a string. So we are kind of limited with the information JavaScript can provide us (initial or end instance). However, I believe you can build this programming by just using JavaScript for the search and building the rest of the programming in Storyline. 

Within Storyline, you could program your search to first jump the user to slide 1.2 upon searching for the word "dog", and then add programming on slide 1.2 that jumps the user to slide 2.7 for additional dog information. 

Another way you could accomplish this is on your search slide, have a layer appear when searching for the word "dog". On the layer, include text that asks the user to clarify which information about dogs they are looking for and link to either slide 1.2 or 2.7 depending on their layer selection.

Hope this helps!

Bridget O'Dell

Hi Gero,

In JavaScript, the search() method returns the position where the match is first found. You can also use lastIndexOf() to return the position of the last occurrence of a value in a string. So we are kind of limited with the information JavaScript can provide us (initial or end instance). However, I believe you can build this programming by just using JavaScript for the search and building the rest of the programming in Storyline. 

Within Storyline, you could program your search to first jump the user to slide 1.2 upon searching for the word "dog", and then add programming on slide 1.2 that jumps the user to slide 2.7 for additional dog information. 

Another way you could accomplish this is on your search slide, have a layer appear when searching for the word "dog". On the layer, include text that asks the user to clarify which information about dogs they are looking for and link to either slide 1.2 or 2.7 depending on their layer selection.

Hope this helps!