Forum Discussion

MarkNolker's avatar
MarkNolker
Community Member
7 months ago

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

e-learning development
other
storyline 360

6 Replies

  • garymoulton-a40's avatar
    garymoulton-a40
    Community Member
    7 months ago

    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

    1. 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.).
    1. 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.

    1. 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.
    • MarkNolker's avatar
      MarkNolker
      Community Member
      7 months ago

      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. 


      • Nedim's avatar
        Nedim
        Community Member
        7 months ago

        Simply execute the following JavaScript code when the timeline starts on the Slide Master:

        window.JumpToSlide = function (key) {
  var targetSlide = DS.presentation.getFlatSlides().find(function (slide) {
    return slide.id === key || slide.get("title") === key;
  });

  if (targetSlide) {
    return DS.windowManager.requestSlideForReview(targetSlide, "_frame").then(function () {
      return { target: targetSlide.absoluteId };
    });
  } else {
    return Promise.reject("Slide with id or title '" + key + "' not found");
  }
};

        You can then call this function from any slide, passing either the slide title or slide ID as an argument.

        For example: JumpToSlide('How to navigate this course') or JumpToSlide('6Ps9FWa1eB0'). In practice, I find it easier to copy and use the slide title rather than searching for the exact slide ID.