Interlinked nodes in SCROM

Hi José,

First I must say, I am new to the world of LMS standards, new to eXeLearning and new to SCROM. This forum is awesome. Your replies are detailed and very well explained. I am learning a lot here. If I had the time, I would have loved to lend a hand and join the developers who are working on eXe.

As for the packages:

The LMS I’m testing is NetDimensions Talent Suite.

• The first project (test_links.elp) and its exported package (test_links.zip) did not work, as their links were completely stripped.
• The modified package (test_links_modified.zip) had the links and they did switch between pages.

But there’s a catch:

The LMS loads the topic pages in a frameset. Navigation is controlled by links in the top frame (< previus / next >) and in the left side frame (a tree).

When I switch pages by clicking those built-in LMS links in the navigation frames, the entire top page reloads, and the LMS records the course progress according to SCROM API calls which were made.

If I use the links in the pages you placed in the test_links_modified package, the page in the internal frame changes, but the LMS does not know that the frame has changed, thus the navigation tree does not reflect it, nor the LMS progress tracking.

I am thinking about a hacky solution here:

I think I will probably put something like <span class=”internalLink” refPageTitle=”Page 1″>link text</span>, where the internalLink CSS class obviously makes it look like a hyperlink, then when the page loads I can use one of 2 options:

• Either I will look up the right href from the nav tree, and replace the element with a proper <a target=”_top”>…</a> 
• Or will have the script handle the click on the .internalLink span and trigger a click on the proper treenode instead.

This should be easy to automate, though it’s quite hacky, I am a great believe in hacks 🙂

I wouldn’t mind sharing my (jQuery assisted) script either, if you’d like.

Again, thank you for taking your time and giving such a helpful insightful answer every time!

Alon Rotem.

Hi José,

Here’s my workaround, which did the trick pretty well.

Step 1: Hinting the users

I could have gone further than this, if I had the time to put into it, but the easiest way I thought of, to hint the users how to isert internal links, is by adding a hint on their HTML editor window (see attached Editor-hints.png).

To achive this, I added the following lines to \scripts\tinymce_3.5.7\jscripts\tiny_mce\themes\advanced\skins\default\dialog.css: form[name="source"] .title:after {    content: "\A Hint: \A ■ Add <span class=\"internalLink\" refPageTitle=\"{page title}\">Link text</span> to create an internal link\A\A";    color: black;    font-weight: 100;    font-size: 10px; } #htmlSource {    height: 475px !important; }

This way, in order to insert an internal link, you should use this element: <span class="internalLink" refPageTitle="{page title}">{Link text}</span> Where class=”internalLink” is a must and the {Link text} can be anything. If {Link text} matches a title of a lesson, it will get automatically resolved to that lesson. If {Link text} does not match a title of a lesson, the attribute refPageTitle=”{page title}” must be used and it should contain the title of the referred lesson.

Step 2: Style changes

I have already created my own style (don’t remember which style it was based on, but it had already the _em_js.js script in it, as well as content.css and nav.css. I have already customized it by adding yet another JS to it.

In terms of design, in content.css I added the following styles: .exe-authoring-page .internalLink {    color: #0063dc;    cursor: pointer; } .exe-authoring-page .internalLink:hover {    text-decoration: underline; } #tinymce .internalLink {    color: #0063dc;    cursor: pointer; } .internalLink {    color: #0063dc;    cursor: pointer; } .internalLink:hover {    text-decoration: underline; }#tinymce .internalLink:hover {   text-decoration: underline; } This way, the fake links look like any other links (the color and no decoration – unless hovered – corresponds with the design of my other links). Adding the .exe-authoring-page and #tinymcs ensures that the fake links look like real ones also in the editor.

Step 3: Links resolution

This is the javascript function that handles the internal links. What it does:

1. Tries to find the navigation tree in the left frame (perhaps this is different in moodle).
2. Goes through each element in the lesson content with class internalLink
3. If the internalLink element has the attribute refPageTitle, its value is used. Otherwise the element’s text is taken.
4. A link with matching text is searched for in the navigation tree (if the navigation tree was found in the first place) and its href is retrieved.
5. if a proper href was found, the current internalLink element is replaced with a real <a/> hyperlink
6. If no proper href was found, the current element is removed the internalLink class, thus it renders as plain text.

function handleInternalLinks() {  var treeLinks = null;  if(window.top.frames.length > 0) {    treeLinks = $("#tree", window.top.frames[0].document).find("li a");    if(treeLinks.length == 0)      treeLinks = null;  }  $(".internalLink").each(function() {     var linkText = $(this).text();    var linkRefPageTitle = $(this).attr("refPageTitle");    if(!linkRefPageTitle)      linkRefPageTitle = linkText;    var foundLink = (treeLinks != null);    if(treeLinks) {      var matchingTreeLinks = treeLinks.filter (function() { return $(this).text() == linkRefPageTitle });      if(matchingTreeLinks.length > 0) {        var href = $(matchingTreeLinks[0]).attr("href");        if(href) {          $(this).replaceWith("<a href=\"" + href + "\" target=\"_top\">" + linkText + "</a>");        }        else           foundLink = false;      }      else        foundLink = false;    }    if(!foundLink) {      $(this).removeClass("internalLink");    }  });} The above method is of course invoked from the load method, in the same js file: $(document).ready(function() {  $(window).load(function (){    handleInternalLinks();  });});

I hope this helps 🙂 Let me know if you need more info. Again, thank you for all your help!

Alon.

Thanks for the tips, Ignacio!

First, the JS was indeed added to my EXTRA-BODY xml of the eXe style. This is how I embedded it.

In terms of navigation, the LMS is in charge of it. I just retieve the real links to the other lessons from the side bar (a frame, in the case of NetDimensions Talent Suite). I guess in other LMSs the navigation may be not in a frame. In any case, this is the solution that worked on mine, in terms of layout.

Using real links is tricky, because eXe may want to strip them off when packing SCOs. That’s why I chose <span>. so that if I cannot resolve a link, all I do is remove the class, and it just becomes plain-text immediately.

Alon.