Forums/SCORM Cloud
New SCORM Cloud Features: Player Skinning, Redirect "Keywords", and Data Export
David Ells
posted this on Oct 26, 2009 13:33
Just wanted to write a quick update about some useful new features that have recently been released to the SCORM Cloud. The first of these is a highly requested feature, which allows you to customize the look and feel of the SCORM Cloud player on launch. You can do this by specifying the new cssurl parameter when making a launch call (via GetLaunchUrl in one of our client libraries*). Note that the cssurl parameter needs to be an absolute url (like http://mysite.com/my-player-style.css) not a relative url (like '/styles/my-player-style.css').
The next feature is the inclusion of redirect "keywords" that can be used when launching a registration in the Cloud. Typically, when a registration is launched in the Cloud player, the user will need to be sent somewhere when they have completed their attempt. This "somewhere" is specified by the redirecturl parameter when launching, and beginning with this release, this parameter is required when launching. But in some cases, depending on how your application is integrated with the Cloud, you may want some very basic message or other functionality on exit. The redirect keywords are for that case. Now in addition to any url, you can also set the redirecturl parameter to "blank", "message", or "closer". The "blank" keyword will redirect to a completely blank html page, the "message" keyword will redirect to a page telling the user that the course has completed, and the "closer" keyword will redirect to a page that attempt to close the user's tab/window (note that default browser settings for most browsers may prevent javascript from closing the window). This feature provides a little extra convenience if you just want one of these simple exit scenarios, or during development.
Finally, the last feature I wanted to note is the new data export service, which allows you to obtain a complete copy of your package and registration data that's stored in the SCORM Cloud. Through this new service, you can start a new export, check on the status of a running export, cancel an export, list your past exports, and most importantly, download a completed export. These actions are available in the client libraries under the ExportService methods Start, Status, Cancel, List, Download, respectively. (There's also a GetDownloadUrl method if you want to download the data in some other way.) There is also an easy to use interface for this new functionality in the SCORM Cloud console** under "Data Export".
*The list of available client libraries can be found as topics at our Cloud support forums (at http://support.scorm.com/forums/52358/entries)
** The SCORM Cloud console can be found at https://accounts.scorm.com/scorm-cloud-manager/public/console-login
Comments latest first
Thanks David, most appreciate. I got around it by making the text white (same color as the background) and increasing the size if the div so the text wasnt over the button, that hid it. Your solution is much better, I will implement this morning.
Since color:transparent isn't respected by IE, we've updated the player HTML and you can now achieve the same effect with these style rules:
#returnToLms { background-image: url(http://a3.twimg.com/profile_images/138942521/exit_button_normal.png); background-repeat: no-repeat; height: 50px; width:50px;}
#returnToLmsText { display:none; }
And, depending on the height of your image, you may want to add
#tt_top_navMenu td { vertical-align: bottom }
Also, as for replacing Return To LMS with an image, try adding the following to your stylesheet:
){kind=link}
#returnToLms { background-image: url(http://a3.twimg.com/profile_images/138942521/exit_button_normal.png); background-repeat: no-repeat; color: transparent; height: 50px; }
This will replace the text with a big "shutdown" button, as an example. You can replace the background-image with the image you'd like to use, and remember to adjust the height for it. Let me know if that works. Thanks.
David
Since that border is inherent to the frameset layout, the only option right now is to choose a color for it using a style rule like (if you want a black border):
.player_border { color: #000000; }
We may be able to alter the frameset layout in the future to allow the option to remove the border somehow, but hopefully styling the border for now will fit the bill aesthetically. Let me know if that works. Thanks!
David
Hi David. Cant find where that body tag was, it must have been done (or I was mistaken). The blue border is still there though, I believe because of the frameset cols:
frameset cols="8,*,8" frameborder=0 framespacing=0 onload="Control.Initialize();" onunload="Control.Unload();"
Also, can we change the text of the "Return to LMS" link to an image? Be good to set via css as well.
Cheers
Vassie
Sorry for the delayed response, but I wanted to make sure and release the fix to production before I posted an answer to your question. You can now style the border of the player (what used to be the inline <body bgcolor=#DFE5EA>) with the player_border class. I actually couldn't find the second inline styled body element you referred, there's doesn't appear to be a reference to it in our code. Are you sure that body element belongs to the HTML of the player?
Thanks David. Cssurl parameter works great, but the frame "body" tags have inline colors preset that I cant change:
<body bgcolor=#DFE5EA>
and
<body bgcolor="#F1F4F5" onunload="Finish();">
I would like to set these in the css as well if I can.
Vassie
Vassie,
All the currently available SCORM Cloud libraries (.NET - http://support.scorm.com/forums/52358/entries/47058, Java - http://support.scorm.com/forums/15735/entries/56664, PHP - http://support.scorm.com/forums/52358/entries/47135) support the cssUrl parameter in RegistrationService->GetLaunchUrl call. A starting point for a custom stylesheet is our own, which is publicly available at http://cloud.scorm.com/ScormEngineInterface/defaultui/defaultstyles.... Note you'll want to change the url() parts of the stylesheet to use absolute urls to our images (http://cloud.scorm.com/ScormEngineInterface/defaultui/images/top_BG... and http://cloud.scorm.com/ScormEngineInterface/defaultui/images/left_B..., although you'll likely want to replace those images as part of your skinning. Let me know if you have any other questions!
){kind=link}
David
Hi there. What version supports these new features? Very interested in the "cssurl" to restyle the player.
Cheers
Vassie