Skip to main content
  1. Home
  2. Knowledge Base
  3. eLearning Magic Toolkit - Custom Databases for Storyline
  4. Load Data From A Custom Database Table Into A Storyline Activity

Load Data From A Custom Database Table Into A Storyline Activity

Load Data From A Custom Database Table Into A Storyline Activity

At any point during a user’s journey through their learning experience built in Articulate Storyline, you can load in all data contained within any custom database table in order to process and display some or all of that data to the user in any way that you wish.

The code snippet below will bring the entirety of a custom database table’s contents into the JS function as a JSON data array. With this array (referenced to a JS variable) you can format the data in any way you wish before then returning the values back into Articulate Storyline to be displayed to the user for example.

Here is the code snippet required to pull all data from a custom database table back into Articulate Storyline via JavaScript:

function getTableData(tableName) {

const pathParts = window.location.pathname.replace(/^\/|\/$/g, '').split('/');
let subdirectory = '';
if (pathParts.length > 0 && pathParts[0] !== 'wp-json' && pathParts[0] !== 'wp-content') {
    subdirectory = pathParts[0];
}
const url = new URL(
    subdirectory 
    ? `${window.location.origin}/${subdirectory}/wp-json/my-custom-databases/v1/get_table_data`
    : `${window.location.origin}/wp-json/my-custom-databases/v1/get_table_data`
);
url.searchParams.append('table_name', tableName);

fetch(url, {

        method: 'GET',
        headers: {
            'X-WP-Nonce': parent.myCustomDatabasesAjax.nonce
        }
})
    .then(response => {
        if (!response.ok) {
            return response.json().then(error => {
                throw new Error(error.Error_Response);
            });
        }
        return response.json();
    })
    .then(data => {
    
    // WORK WITH THE CUSTOM DB TABLE DATA AS YOU WOULD LIKE TO IN THIS BLOCK. 
    // THE CONSOLE.LOG MESSAGE BELOW WILL PLACE ALL JSON DATA RETURNED INTO THE BROWSER CONSOLE

    console.log(data);

    })
    .catch((error) => {
       console.error('Error:', error);
    });
}

// Call the function with the name of the table you want to get data from
getTableData('MY_STORYLINE_DB');

Just like the code snippet provided on the previous page, this code just needs to be edited in order to reference the correct table name on your platform that you want to load data from, and then however you will to process that data can be managed within the then response block.

First, update the very last line of the code to include the name of your database table. Do take care again to ensure that the database table name matches exactly to what was created in the eLearning Magic Toolkit settings screen page.

With the example code above, this will place all data from your table into a JSON object displayed in the browser console like this:

With this data array, you can manipulate each row and column item of data as you would like for the type of application and user experience you are building in Storyline.

Just use the standard setVar(); method provided by Articulate Storyline for passing any values back into the Storyline activity itself as unique project variables.

For example, assuming that each column value in the table above represents an answer (from A-D) provided by the user for a set of questions in a quiz, we can calculate the overall times each answer was selected by users across all questions in order to provide a running community score.

The code to achieve this might look something like this:

// Initialize the count variables
let column1A = 0, column1B = 0, column1C = 0, column1D = 0;
let column2A = 0, column2B = 0, column2C = 0, column2D = 0;
let column3A = 0, column3B = 0, column3C = 0, column3D = 0;
let column4A = 0, column4B = 0, column4C = 0, column4D = 0;
let column5A = 0, column5B = 0, column5C = 0, column5D = 0;
let column6A = 0, column6B = 0, column6C = 0, column6D = 0;
        
// Iterate over each entry in the data array
data.forEach(entry => {
   if (entry.column1 === 'A') column1A++;
   if (entry.column1 === 'B') column1B++;
   if (entry.column1 === 'C') column1C++;
   if (entry.column1 === 'D') column1D++;
        
   if (entry.column2 === 'A') column2A++;
   if (entry.column2 === 'B') column2B++;
   if (entry.column2 === 'C') column2C++;
   if (entry.column2 === 'D') column2D++;
            
   if (entry.column3 === 'A') column3A++;
   if (entry.column3 === 'B') column3B++;
   if (entry.column3 === 'C') column3C++;
   if (entry.column3 === 'D') column3D++;
        
   if (entry.column4 === 'A') column4A++;
   if (entry.column4 === 'B') column4B++;
   if (entry.column4 === 'C') column4C++;
   if (entry.column4 === 'D') column4D++;
        
   if (entry.column5 === 'A') column5A++;
   if (entry.column5 === 'B') column5B++;
   if (entry.column5 === 'C') column5C++;
   if (entry.column5 === 'D') column5D++;
        
   if (entry.column6 === 'A') column6A++;
   if (entry.column6 === 'B') column6B++;
   if (entry.column6 === 'C') column6C++;
   if (entry.column6 === 'D') column6D++;
});
        
//Set variables in SL360
setVar("Q1_A_Total", column1A);
setVar("Q1_B_Total", column1B);
setVar("Q1_C_Total", column1C);
setVar("Q1_D_Total", column1D);
        
setVar("Q2_A_Total", column2A);
setVar("Q2_B_Total", column2B);
setVar("Q2_C_Total", column2C);
setVar("Q2_D_Total", column2D);
        
setVar("Q3_A_Total", column3A);
setVar("Q3_B_Total", column3B);
setVar("Q3_C_Total", column3C);
setVar("Q3_D_Total", column3D);
        
setVar("Q4_A_Total", column4A);
setVar("Q4_B_Total", column4B);
setVar("Q4_C_Total", column4C);
setVar("Q4_D_Total", column4D);
        
setVar("Q5_A_Total", column5A);
setVar("Q5_B_Total", column5B);
setVar("Q5_C_Total", column5C);
setVar("Q5_D_Total", column5D);
        
setVar("Q6_A_Total", column6A);
setVar("Q6_B_Total", column6B);
setVar("Q6_C_Total", column6C);
setVar("Q6_D_Total", column6D);

If you need further information on best practice for embedding Storyline content onto a web page, use this Articulate Storyline help guide.

Read the rest of our Knowledge Base pages to make the most of the eLearning Magic Toolkit.

Related Articles

One Comment

  • Scott says:

    Thanks for this. I have a simpler (I think!) issue. I have a .json file stored in the local dynamic directory in my storyline project. All I’m looking to do is figure out what the right code is for bringing in a .json into the JavaScript code in Storyline. For a simple example: If my data.json file has the months in a year, and my user has a variable somewhere that reads “7” I want to be able to have a button that the user clicks that grabs the data.json and reads “July”. Thanks in advance!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.