Forum Discussion
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!
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!
Use Scorm2004. Then it works...at least for me :-)
Do share a .story and i test it on our CanvasLMS..
And maybe set it as separate tab..
On our Canvas, this works fine...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); } }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?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.
Going back to basics, is the course retrieving a User ID from Canvas? Is the User ID what you are expecting to see?
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.
