Forum Discussion
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.
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!
Thank you so much, this was great and now it is working perfectly. I really appreciate all your help!
No problem, happy to help!
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
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!
Does anyone have a source file example of this search feature?
Bridget, I followed your instructions while trying to build similar functionality and ended up building a text field that will only accept specific words in no particular order, case-insensitive. Anything can be typed but only the words in the js string will allow the slide to advance. For the example story file attached the words accepted by the search are "investigate", "milk", and "hormone".
My original idea was to use the functionality you shared here to send the user to a specific slide when they typed in the appropriate keywords, but it was the multiple keywords that caused the issue for me. With a little regex research (of which I am no pro) I solved that problem and then I dumbed down the functionality for my specific purpose. Some other native SL variables and settings help complete the functionality of the js.
Like your example, this needs to be published to work.
how do you write a search for glossary terms that has phrases too? I want it to search single terms and phrases and then go to that slide in the glossary.
Hi Holly,
Thanks for reaching out with this question. You should be able to accomplish this using the JavaScript programming above and triggers to go to the specific slide(s) when the Storyline placement variable is equal to the appropriate number(s).
Can you send me a few of the terms and phrases you want to include? I can show you how to integrate those terms and phrases into the code.
Hi Holly,
I see you posted in an article that one of your phrases is: "bookable resource". I added basic text around this phrase to show how it would work.
Getting Set Up In Storyline:
- Add your search text entry field
- Add the text variable: searchfield - Initial Value = (Blank)
- Set searchfield as the variable associated with the text entry field
- Add number variable: placement - Initial Value = 0
- For ease of programming, add a reference to the placement variable on a visible slide - %placement%
Add JavaScript Trigger to Action that allows the user to search (ex. button next to text entry field):
var player = GetPlayer();
var parameters = player.GetVar("searchfield");
var lower = parameters.toLowerCase();
var key = "text1 text2 bookable resource text3 text4";
var termlocation = key.search(lower);
player.SetVar("placement",termlocation);
Test the programming - Note: Must publish to test JavaScript programming
- Enter each search term and/or phrase in the search bar and complete the action that triggers the JavaScript trigger.
- Note the value of the placement variable as each search term/phrase is entered. bookable and bookable resource would return the same value as this functionality looks for the position where the entered word or phrase is found in the overall text string.
For the example above, the placement variable would have the following values when these terms are entered:
text1 = 0
text2 = 6
bookable = 12
resource = 21
bookable resource = 12
text3 = 30
text4 = 36Add triggers within Storyline to complete the desired action when the placement variable = the appropriate amount.
Let me know if this answers your questions or if I can be of additional assistance.
I am so delighted you have shared this JavaScript. Is there any way to trigger JavaScript when someone presses the Enter key when in that field instead of clicking a button? I can't figure out how to get it to do that.
Hi Joseph,
Yes, you can do this.
Keep all of your JavaScript code (and any other triggers you might have, such as showing a layer, jumping to a slide, etc.) but edit each trigger that you want to be executed when the user presses the Enter key as follows:
When: the user presses
Key: Enter (when clicked within this field, press the Enter key on your keyboard to populate)
Object: after clicking on ( your search bar text entry object)
(In my course, the search bar that the user types into is named: Search Field)
Hope this helps!
I'm confused about the placement number in the Javascript and on each slide.
The Javascript line:
var key = "(Am I just supposed to add all keywords in this section. The count the characters to see which actual number is the starting number for the target location, then add that number to the target slide?)";
If the placement number would be equal to zero "0" does this mean that the target slide should have a text field that says:
%placement0%, %0%, or %placement-0"?
Or do we need to name the slide with the specific name or number?
Thoughts?
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!
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 CustomersWhat do I actually place on the slide so that the JavaScript knows that
those keywords are meant for that specific slide location?Thanks,
CCI figured out what I was doing wrong. For some reason, I thought that the
JavaScript was going to assign a number to slides based on their content. I
realized where I mixed things up. Thank you so much for taking the time to
respond to my question. I appreciate you.Thanks,
Wes
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.
Thank you for the follow up, my project is up and running as intended!
