An interface for elementary courses for the Brightspace VLE, surfacing both HWDSB and eLearning Ontario resources. Some LTI links need to know the course you are authenticating from. This creates a responsive, tabbed widget, that allows for those types of links to be constructed by javascript, rather than directly constructed in HTML.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Forked for Brightspace VLE: Responsive Full Width Tabs (from Codrops Blueprints)

  1. Upload the entire contents of the repo into Shared Files, in a directory named "fullwidthtabs"

  2. The below code goes in a widget at the root of your Learning Environment and is then shared with courses as appropriate (I've left the CDATA nonsense that Brightspace inserts as it attempts to sanitize the code so you aren't puzzled when the code changes):

<script>// <![CDATA[
(function() {
     var contentFile = '/shared/fullwidthtabs/index.html';
     var iframe = document.createElement('iframe'); 
    iframe.addEventListener('load', function() { 
    var orgUnitId = {orgUnitId};
    var UserName = '{UserName}';
    iframe.contentWindow.start(orgUnitId, UserName); 
    }); = '100%'; = '700px';
    iframe.src = contentFile; 
    document.currentScript.parentNode.insertBefore(iframe, document.currentScript);
// ]]></script>

Then identify each LTI link that requires an {orgUnitID} token with its own id in the HTML


<div class="mediabox"><a id="mindomoLink" href="/content/" target="_blank"><img src="img/smallermindomo.png" alt="Mindomo Logo" /></a>

That URL is then constructed by the "function start(orgUnitId)" javascript function at the bottom of index.html

document.getElementById("mindomoLink").href = "" + orgUnitId + "&type=lti&rcode=eLO-9882434&srcou=7587";

##Credits, Props, Thanks:

100% width tabbed content with some example media queries for smaller screens.

article on Codrops


The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration. Check out all of our Blueprints here

Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".

Read more here: License