Text search in Articulate Storyline course

Hello everyone!

 

I decided to share my template for a text search in an Articulate Storyline course.

 

 

How the template works: We have several slides with information, and when we click the 'search' button, we access the course menu. There, we can either navigate to the desired slide or enter keywords in the search bar, showing us all slides containing those words.

 

You can see tamplate here: https://360.articulate.com/review/content/fb7ef094-7385-436e-a26d-c58ca540bc7a/review

 

Implementation steps:

1. Create variables 'progress' and 'jumptoslide' (we'll need the latter shortly).

2. On each slide, create a trigger that assigns the 'progress' variable the value of the slide number when the slide's timeline starts, but only if the variable is less than that value. This way, we remember how far the user has scrolled to avoid sending them to slides they haven't viewed yet.

 

 

3. Create a Master Slide with a search button redirecting us to the 'find' layer.

4. On the layer, add triggers: set 'jumptoslide' to -1 and create triggers for each slide to jump to the first slide if 'jumptoslide' is 0, to the second if it's 1, and so on.

 

 

5. Most of the work in Storyline is done. Now, create a web object. Open the 'index.html' file using a text editor like Notepad.

 

 

The code consists of two parts. The first part, from the 'Style' tag to the closing 'Style' tag, defines the styles of our web object. You can use the template I provided or customize it to your liking (basic CSS knowledge is sufficient).

 

 

The second part starts with the 'script' tag. Here, make the following changes:

A. In the 'name' field, enter the name of your first slide. This name will appear on the slide card in our search.

B. In the 'slidetext' field, copy all the information from your slide; this is what the search will use.

C. In the 'picturesrc' field, specify the image name that corresponds to the slide in the search field. I named all images 'slide1.png' (where the digit 1 is the slide number).

 

 

Repeat this procedure for each slide of your course.

 

6. Prepare images for each slide, using screenshots or other visuals. Save images:

- Ensure image names match those in the 'index.html' file.

- Maintain consistent aspect ratios (e.g., 1920x1080 pixels).

7. Place the images in the same folder as the 'index.html' file.

8. Go back to Storyline and insert the web object into the Master Slide.

 

Everything is ready. Enjoy!

 

Verify the search functionality in Review360 or on an LMS or personal server; previewing in Storyline might not accurately reflect the search feature's performance.

 

You can download the project and web object below in this article.

 

I hope this article was helpful for you.