Forum Discussion

willbogen's avatar
willbogen
Community Member
2 months ago
Solved

My custom javascript cannot pull the Canvas User ID while used in Canvas, but can in SCORM cloud

Hello! 

In my Storyline project, we are hosting an artificial intelligence based tutor on an AWS server - to keep some privacy, the start of the URL is https://s3.us-east-2.amazonaws.com and the end is /index.html?user=[%UserID%]

Our goal is to have the following javascript search for the Canvas User ID, store it in the URL and a variable in Storyline, and then keep track of that user's conversations with the AI tutor:

// Get the SCORM API
function getAPI(win) {
    var API = null;
    while (win && !API && win.parent && win.parent !== win) {
        win = win.parent;
        API = win.GetPlayer ? win.GetPlayer() : null;
    }
    return API;
}

// Retrieve Canvas User ID
var API = getAPI(window);
var userID = "unknown"; // Default value

if (API && API.GetStudentID) {
    userID = API.GetStudentID();
    
    // Debugging: Show the User ID if it's retrieved
    alert("User ID Retrieved: " + userID);
} else {
    // Debugging: Show an error message if User ID is not retrieved
    alert("Error: User ID not retrieved. SCORM API might not be available.");
}

// Set the User ID in Storyline Variable
var player = GetPlayer();
player.SetVar("UserID", userID);

// Confirm that the variable has been set (optional)
alert("User ID set in Storyline: " + userID);

When the user clicks the red button, it runs this script and also opens the link to our AI tutor. (See screenshot 1). When we export the storyline as a SCORM package and import it into SCORM cloud, the javascript successfully searches for the UserID and tries to populate it in both the URL and the (temporary for testing) "User ID:" field in Storyline, but because it can't find it, it displays error messages. (see screenshot 2). 

However, when we upload this same file to Canvas, the url just keeps it's placeholder and does not display any error messages. 

The inspector in Chrome shows screenshot 3, but we confirmed our cross-origin frame permissions are wide-open and should not be causing any problems. 

So we're wondering if something on Canvas's end is blocking our ability to gather the user ID. I'm happy to detail the situation more, but is anyone able to help? I'm just looking for a solution that finds the user ID in Canvas and puts it into the AWS url. We have a tight turnaround on this and either hope it's a solvable issue or the issue isn't on our end. 

Thank you in advance! 

  • willbogen's avatar
    willbogen
    2 months ago

    Actually, late last night we got it all working pretty good! Based on your initial code, we made the following script to run on the button when it is clicked: 

    // when published as Scorm on a LMS
    	let player = GetPlayer();
    	let lmsAPI = findLMSAPI(this);
    	let myName = lmsAPI.GetStudentID();
    //player.SetVar("newUser", myName);
    //console.log("newUser: "+myName);
    
    window.open("https://s3.us-east-2.amazonaws.com/contentplayer****/Samantha/v2/index.html?context="+myName, "samantha");
    
    //Function to connect with LMSAPI
    function findLMSAPI(win) {
    if (win.hasOwnProperty("GetStudentID")) {
    			return win;
    	}else if (win.parent == win) {
    		return null;
    	}else {
    		return findLMSAPI(win.parent);
    	}
    }

    This fit our goal of retrieving the user ID, and it works totally on its own with no other scripts or required button presses. It does collect all the extra stuff you showed me, but it did collect the 5 digit code from Canvas that I was looking for. 

    Thank you so much for the help, I really really appreciate the assistance!

  • This is the code i use and works flawless.

    // when published as Scorm on a LMS
    	let player = GetPlayer();
    	let lmsAPI = findLMSAPI(this);
    	let myName = lmsAPI.GetStudentName();
    	let array = myName.split(',');
    	let newName = array[1] + ' ' + array[0];
    	player.SetVar("newUser", newName);
    	console.log("newUser: "+myName);
    
    
    
    //Function to connect with LMSAPI
    function findLMSAPI(win) {
    if (win.hasOwnProperty("GetStudentID")) {
    			return win;
    	}else if (win.parent == win) {
    		return null;
    	}else {
    		return findLMSAPI(win.parent);
    	}
    }

     

    • willbogen's avatar
      willbogen
      Community Member

      This code worked a charm! Thank you so much :) The only two things I still need are to have the URL have a suffix populate the newUser variable into it, and we strongly prefer to receive the Canvas UserID (which is a 5 digit code) instead of the student's first and last name.

      Is it possible to, upon clicking a button with a url, have the user ID populate in the url and also the variable in storyline? 

      • MathNotermans-9's avatar
        MathNotermans-9
        Community Member

        Im not sure whether Scorm has the Canvas UserID. With the Canvas API ( and in Canvas itself ) you for sure can get that ID. As im working on getting Canvas username from the API to use it directly in blocks of HTML ( so no Scorm needed ) that for sure will work in getting the userID.
        Actually checking my userObject in Canvas the id is a bit lengthier then 5 ;-)
        "id":122477700023471280 ( this ID is random non-existent ;- )

        On the Canvas LIVE APi you can test any API calls.

        Issue using this directly in Scorm ( or HTML ) on Canvas is CORS security offcourse. Trying to get that fixed now.

  • JoeFrancis's avatar
    JoeFrancis
    Community Member

    Going back to basics, is the course retrieving a User ID from Canvas? Is the User ID what you are expecting to see?

    • willbogen's avatar
      willbogen
      Community Member

      Yes indeed, when we inspect the page in Chrome, Canvas shows that it is retrieving a User ID and it is what we are expecting and want to see.