Forum Discussion
Jump to location in published file using url string parameters?
Two creative coders in my organization have created a search function that allows users to search for any text in a library of published files. The search feature digs through the frame.xml file and returns a link to the specific training where that text is found. It is very cool.
I would like to expand on it to allow the user to open the storyline file and have it jump directly to the location in the project where that word is showing up.
The solutions I have found so far are dependent on slide numbers and javascript to jump to specific slides in the project but I know that there are location indicators in the frame.xml file and I was hoping they might be able to be used as anchors some how.
This might just not be possible or might require frame.xml file manipulation which I know is discouraged.
Any insights into my request would be much appreciated.
Thanks,
Mark
6 Replies
That’s a great piece of work but it is not natively supported in Articulate - Jumping directly to a specific slide in a published Articulate Storyline 360 course via URL. Here is a workaround you could try:
URL Parameters and JavaScript to Navigate to Specific Slides
- Assign Unique Identifiers to Slides:
- In your Storyline project, create a text variable (e.g., targetSlide).
- On each slide, add a trigger that sets targetSlide to a unique value corresponding to that slide (e.g., slide1, slide2, etc.).
- Modify the Storyline Player to Read URL Parameters:
- After you publish your course, open the story.html file.
- Insert the following JavaScript code within the <head> section to read the slide parameter from the URL
- <script>
- function getQueryVariable(variable) {
- var query = window.location.search.substring(1);
- var vars = query.split("&");
- for (var i = 0; i < vars.length; i++) {
- var pair = vars[i].split("=");
- if (decodeURIComponent(pair[0]) == variable) {
- return decodeURIComponent(pair[1]);
- }
- }
- return null;
- }
- var targetSlide = getQueryVariable("slide");
- if (targetSlide) {
- // Wait for the Storyline player to load
- var player = null;
- var checkPlayer = setInterval(function() {
- if (window.GetPlayer) {
- player = GetPlayer();
- if (player) {
- player.SetVar("targetSlide", targetSlide);
- clearInterval(checkPlayer);
- }
- }
- }, 100);
- }
- </script>
3.Add a Trigger to Navigate Based on the Variable:
On the first slide of your course, add a trigger that jumps to the slide corresponding to the value of targetSlide when the timeline starts.
Use conditional triggers to navigate to the appropriate slide based on the value of targetSlide.
- Accessing Specific Slides via URL:
You can now link directly to specific slides using URLs like:
https://yourdomain.com/story.html?slide=slide2
This will set the targetSlide variable to slide2, and the course will navigate to the
corresponding slide.
BE CAREFUL!!
- Modifying the story.html file may affect the course's compatibility with future updates. Make sure to keep backups and test thoroughly.
- Make sure you document any changes, and team members are aware of the customizations.
- Another option is instead of messing with the story.html file, try using JavaScript triggers within the course to read URL parameters and navigate accordingly.
Thank you for your input Gary. This looks like it might come in handy as we develop. I already have a library of a thousand or so published projects and was hoping to find a way to do this with already published content. I understand it might be possible but I thought I would shoot for the moon.
I was looking through the frame.xml file and there are preassigned slide numbers in each frame.xml... I wonder if we added the javascript to the first slide of each project if we could use the preassigned slideid variables as our anchors. I know other preassigned variables (such as quiz.scorepercent) cannot be pushed or pulled from a project without a javascript assignment. And those variables are visible in the project while the slideid isn't even a variable but more of an attribute.Yes, spot on in your analysis. The frame.xml file in a published Storyline package does include internal identifiers like slideid, but here's the crux:
Slideid in frame.xml
slideid is used internally by the Storyline player to track slide transitions and metadata.
It's not exposed as a JavaScript-accessible variable nor does it map cleanly to a direct URL-accessible anchor point like HTML IDs or hash fragments (e.g., #slide1).
There is no public API from Articulate that lets you jump to a slideid directly via URL parameters.
JavaScript Triggers, yes, you're correct: just like quiz.scorepercent, these internal elements aren't accessible or writable unless explicitly surfaced using JavaScript inside the Storyline project. However:
You can read URL parameters with JavaScript.
Then use that parameter to trigger a jump to a specific slide if you've prepared for it in advance using a variable (like targetSlideId).
So if you correlate the known slideid values in frame.xml to internal slides manually, you can create a lookup system.
One possible Solution
If your creative coders can parse the slideid from frame.xml:
- Create a mapping of slideid → internal Storyline slide name or index.
- Pass the slideid as a URL parameter.
- Use JavaScript on the first slide to read that slideid, match it to your mapping, and jump to the corresponding slide.
Here is a sample mapping example in JavaScript:
const slideMap = {
'3f7398cc-f12b-43b6-bf94-1d759c5a172e': 'Intro',
'b0d084e3-23a2-40b3-9b97-bcc9c0e7b28f': 'Module1_Slide2',
};
var slideId = getQueryVariable("slideid");
if (slideId && slideMap[slideId]) {
var targetSlide = slideMap[slideId];
player.SetVar("targetSlide", targetSlide);
}
Then inside Storyline, use triggers that jump to specific slides based on targetSlide.
See this post for an idea. New and minimally tested, but no file editing required.
Jump To Slide via JavaScript Now Available | Articulate - Community
Thank you, Nathan. I will take a look.
