Save A Data Row Into A Custom Database Table Using Storyline

Save A Data Row Into A Custom Database Table Using Storyline

Ensuring that your Articulate Storyline activity is embedded onto a post or page on your WordPress site in the normal way (see https://discoverelearninguk.com/knowledge-base/adding-storyline-to-a-wordpress-page/), you can use the following JavaScript code snippet to transmit data from a Storyline activity being conducted by a user at any time into your named custom database table:

var db_name = "MY_STORYLINE_DB";
var data1 = getVar("Variable1");
var data2 = getVar("Variable2");
var data3 = getVar("Variable3");
var data4 = getVar("Variable4");

function insertRowIntoTable(tableName, rowData) {
    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];
    }

    // Construct the endpoint
    const endpoint = subdirectory
        ? `${window.location.origin}/${subdirectory}/wp-json/my-custom-databases/v1/insert_row`
        : `${window.location.origin}/wp-json/my-custom-databases/v1/insert_row`;

    fetch(endpoint, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-WP-Nonce': parent.myCustomDatabasesAjax.nonce
        },
        body: JSON.stringify({
            table_name: tableName,
            row_data: rowData
        })
    })
    .then(response => {
        if (!response.ok) {
            return response.json().then(error => {
                throw new Error(error.Error_Response);
            });
        }
        return response.text();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('There has been a problem with your fetch operation:', error);
    });
}

insertRowIntoTable(db_name, [data1, data2, data3, data4]);

This is an example code snippet and just needs to be edited to suit the database table you are copying your data into, and the data that you are transmitting.

To begin, on Line 1 ONLY, replace the var db_name value with whatever is the name of the table that you have created on the eLearning Magic Settings screen. Take care to ensure the database name matches exactly as you wrote when creating the table, as this is case sensitive.

Next, bring your data values from Storyline into your JS code by updating the getVar values for example if you are bringing custom variable data directly from Storyline. You can tweak the data values as much as you wish (e.g. in JavaScript) before creating the variable containing the value to be passed to the database table. Ultimately, whatever is stored to your data1, data2 etc. values is what will be stored within the database table.

You should also create as many separate data# variables as you need to place into each column of your custom database table. (Even if you don’t intend to use every column with each passthrough of data to the table, it is still a good idea to pass through at least something so that every cell of the table is not blank)

Lastly, update the array in the very last line of code to ensure all data# variables are passed through to the table. Our example code passes data for a table containing four columns, so if yours has six columns then just make sure to update the last line of code like this:

insertRowIntoTable(db_name, [data1, data2, data3, data4, data5, data6]);

The db_name value should not be changed in the line above.

As soon as this Execute JavaScript code snippet is triggered, a new data row containing these dynamic data values will be added to the table, which you can verify by looking at the table again in the eLearning Magic Toolkit settings screen.

On the next page we will look at the code needed to recall data from a custom database table back into Storyline!

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.