Build Template to Accept Configurable Text from external file

Feb 22, 2022

Becky Goldberg
By Becky Goldberg

Hi, I'm trying to build a Storyline file that will serve as a template for multiple configurable projects. I want to save the actual text in an external json file, and pull that text into the presentation using jQuery ajax() method (or something along those lines). I'm struggling to figure out how to target text boxes on the slide - is there a way to see the id from the development UI?

Alternatively, I was thinking about retrieving the json data, storing as a local variable and using a 'change contents' function - I'm not sure if that will retain HTML from the json data, and it seems more convoluted than simply targeting the text box directly.

 

This is what I have working in straight HTML. This just targets any <p> element on the screen, and now I'm looking to target a text box on the Storyline slide:

$(document).ready(function () {

  $('#ajaxBtn').click(function(){
    $.ajax('/DN/dnConfig.json', 
    {
      dataType: 'json', // type of response data
      timeout: 500, // timeout milliseconds
      success: function (data,status,xhr) { // success callback function
       $('p').append(data.a1title + ' ' + data.a1desc);
      },
      error: function (jqXhr, textStatus, errorMessage) { // error callback 
       $('p').append('Error: ' + errorMessage);
      }
    });
  });

});

 

 

4 Replies
Becky Goldberg
almost 2 years ago05/18/22 at 12:55 am (UTC)

Yes! instead of targeting the text box directly, I have it setting a Storyline variable, and then I have that variable populate the text box through the Storyline UI (%storylineVariable%).

Here's how that looks from the outset:

On my main slide, there are 20-some buttons, and my external json config file has the same number of objects with key:value parameters, like this (this is a project for our Black & African American Diversity Network):

"a1": {
   "cat": "Educate Yourself",
   "title": "Systemic Racism Explained",
   "desc": "Here's where the description goes"
},
"a2": {
   "cat": "Educate Yourself",
   "title": "Moving Beyond Diversity Toward Racial Equity",
   "desc": "Here's another description"
},

In my scenario, the configurable text is destined for a text box on a layer - so I run this function (trigger Execute Javascript) when the user clicks the button that also displays the layer. When that button is clicked, I set a Javascript variable to the object name (e.g. "a1"). This is then passed into my function as the activity parameter:

function popData(activity) {
 var player = GetPlayer();
 $.ajax('/DN/BAADN/dnConfig.json', 
 {
   dataType: 'json', // type of response data
   timeout: 500, // timeout milliseconds
   success: function (data,status,xhr) { // success callback function
     player.SetVar("category",data[activity].cat); 
     player.SetVar("taskTitle",data[activity].title);
     player.SetVar("taskDesc",data[activity].desc);

   },
   error: function (jqXhr, textStatus, errorMessage) { // error callback 
   $('#one').append('Error: ' + errorMessage);
   }
 });
}

 

Lee Millard
almost 2 years ago05/18/22 at 1:48 am (UTC)

I'm really thrilled that you found the solution to your question!

I'm searching for a solution where I can build a project in SL, add any text that I want translated in a custom variable, then generate a JSON file with that text. Then get that JSON file translated and then be able to call which language the learner wants to experience the course in. So, basically, build one file but be able to bring in many translations via external files.

Sign In to Reply