Forum Discussion

LisaMacken-e00c's avatar
LisaMacken-e00c
Community Member
7 months ago

Issue with SCORM loading on SuccessFactor

Hey all, We have a client who is using a RISE SCORM 1.2 on SuccessFactor. The client needed a profiler in the course so we have built a standard HTML landing page using index.html which launches ...
advice
articulate 360 teams
rise 360
SamHill's avatar
SamHill
Super Hero
7 months ago

Hi there LisaMacken-e00c​ it's unfortunate the LMS is showing the dialogue as the error is not really serious and could be ignored if the LMS didn't tell us about it. As the message says, the LMS is already initialized, which suggests that LMSInitalize("") is being called multiple times.

Is it possible that your landing page also contains script to initialize the SCORM API? If so, you could remove it from there and rely on the individual Rise modules to initialize.

If the landing page doesn't contain script to initialize the LMS, it sounds like whichever module is loading is executing it twice, this could be caused by the LMS reloading the content quickly.

When you ran in SCORM cloud, I would recommend you check the logs and see if you can see that it also runs LMSInitialize("") twice. Whilst SCORM Cloud wouldn't have shown this as a fatal error, it's possible that it is there in the logs and you just didn't notice as it wasn't a problem?

  1. On SCORM Cloud, launch your content but do not go beyond the landing page.
  2. Exit and check the logs. See if there is any SCORM activity at all in the logs.
    1. If there is SCORM activity, the landing page must be initializing the API.
    2. If not, launch the content again, and progress beyond the landing page, exit and check the logs again. Search for all instances of LMSInitialize("") and confirm there is only one instance.

If there is only one instance of LMSInit in SCORM Cloud at least you can be sure that it is system related.

What you can do in SF is when you launch the content, open up the developer console on your browser using F12, and check the network activity. You might have to be quick to hit F12 if the content launches in a pop-up window. As soon as you see that window loading, hit F12 and select the Network tab. What you want to look for is evidence of the content loading, and then reloading.

It's usually not a problem if content does reload, but it can depend on the LMS. Most content would ensure that LMSFinish("") is run when the content is unloaded, which would close the connection with the SCORM API, and so a new LMSInitialize("") would just be seen as a new session anyway.

This could be a complex one to troubleshoot if you find that the content is not responsible for the issue, but it is unusual if the content works correctly if you take the landing page out of the equation, so I would lean toward the content being the issue if that's the case.

If you do get stuck after these tests, I do have a lot of experience troubleshooting these kinds of issues and you can reach out to me via my email address mailto:sam.hill@rebusmedia.com

  • LisaMacken-e00c's avatar
    LisaMacken-e00c
    Community Member
    7 months ago

    Thank you Sam for this in dept reply its much appreciated.

    The SCORM doesn't initialise on the landing page it only initializes after a profile is selected. I checked their logs and it does only send a LMSInitialize once. I'm asking the client if they can check and see if it does load and then reload. If they do find that it does reload would that be an issue with the LMS more than the SCORM package itself?

    I've also done a comparison between a version that does work on Success Factor and the clients which doesn't. I can see the strResults is coming back as blank for them and not coming back as index.html#/lessons/ which would bring them to the start of the course. 

    I've attached a screenshot of what I see working version is on the left and the clients version is on the right. Do you think this would be due to losing connection with the API too?

    • SamHill's avatar
      SamHill
      Super Hero
      7 months ago

      Hi LisaMacken-e00c​ I wouldn't worry about strResults as this is just the return value from lesson_location which is the bookmarked location of the content. If there is a value returned for lesson_location, it just means you've already been in the course before.

      If you are seeing this on first launch in the LMS, then this could confirm that a page refresh (double load) is occurring, as it would be likely when the content first loads, the strResults for lesson_location is empty, the content then reloads, possibly triggering lesson_location to be updated with the current page, hence why you would see data returned from lesson_location even on the first load.

      It wouldn't be possible for me to say that the issue is with the LMS, as there is most likely other SCORM courses running that do not have an issue, but it is also possible that the landing page sequence required for your content is causing or exposing an existing issue.

      It's not possible to answer this without investigation. If you are able to share the landing page, I might be able to spot something in that.

      • LisaMacken-e00c's avatar
        LisaMacken-e00c
        Community Member
        7 months ago

        That is very useful information to know and I'm really grateful for the response, We are still waiting to hear back to see if they see the course content load and then reload.

        If you have the time below is the landing page, I've also attached an image of the folder structure. Its a simple enough landing page which loads the /scormdriver/indexAPI.html of which ever profile is selected

        <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Company Title</title>
  <script language="JavaScript1.2" src="scormdriver/driverOptions.js"></script>
  <script language="JavaScript1.2" src="scormdriver/scormdriver.js"></script>
  <script language="JavaScript1.2" src="scormdriver/preloadIntegrity.js"></script>

  <style>

@font-face {
    font-family: 'NotoSansJP-Regular';
    src: url('fonts/NotoSansJP-Regular-Alphabetic.eot');
    src: url('fonts/NotoSansJP-Regular-Alphabetic.eot?#iefix') format('embedded-opentype'),
         url('fonts/NotoSansJP-Regular-Alphabetic.woff') format('woff'),
         url('fonts/NotoSansJP-Regular-Alphabetic.ttf') format('truetype'),
         url('fonts/NotoSansJP-Regular-Alphabetic.svg#NotoSansJP-Regular-Alphabetic') format('svg');
    font-weight: normal;
    font-style: normal;
}

    html, body{
      width: 100%;
      height: 100%;
      overflow:hidden;
      margin:0;
      padding:0;
    }
    body{
      background-image: url(BG.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .center {
      position: absolute;
      left: 50%;
      top: 65%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 710px;
    }



    #locBtn{
      width:80px;margin-left:10px;float: right;height:36px;line-height:36px;background-color: #EF3340; color:#fff;border:none;font-size: 16px;
    }
    #locBtn:disabled{
      background-color: #999; color:#ccc;
    }


  #example_select.select_container {
  display: inline-block;
  width: 600px;
  position: relative;
  color: #fff;
  font-family: "NotoSansJP-Regular", sans-serif;
}

.title_txt_1{
  font-family: "NotoSansJP-Regular", sans-serif;
  font-size: 1.5em;
		font-weight: normal;
		line-height: 1;
	}

  .body_txt_1{
    font-family: "NotoSansJP-Regular", sans-serif;
    font-size: 1.2em;
		font-weight:normal;
		line-height: 1;
	}

  .intro_text{
    position: absolute;
    top: 25%;
    text-align: center;
    margin: 0 auto;
    padding: 5%;
    width: 90%;
    color: #fff;
  }

#example_select.select_container #summary::after {
  content: "\0025BE";
  position: absolute;
  right: 12px;
  top: calc(50%);
  transform: translateY(-50%);
  pointer-events: none;
}

#example_select.select_container[open] #summary::after {
  content: "\0025BE";
  transform: translateY(-50%) rotate(180deg);
}

#example_select.select_container #summary {
  cursor: pointer;
  padding: 9px 15px;
  background: #000F9F;
  list-style: none;
  text-transform: capitalize;
  border: none;
  width: 100%;
  text-align: left;
  color: #fff;
  font-size: 16px;
}

#example_select.select_container #summary::-webkit-details-marker {
  display: none;
}

#example_select.select_container #summary:hover {
  background: #000F9F;
}

#example_select.select_container .select {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  left: -1px;
  background: #fff;
  color:#000F9F;
}

#example_select.select_container .select__option {
  cursor: pointer;
  padding: 6px 12px;
  border-bottom:1px solid rgba(0, 0, 0, 0.1);
}

#example_select.select_container .select:hover .select__option.active {
  background: #fff;
  color: #000F9F;
}

#example_select.select_container .select__option.active,
#example_select.select_container .select:hover .select__option.active:hover,
#example_select.select_container .select__option:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #000F9F;
}

#example_select.select_container .select__option input {
  display: none;
}

.hidden{
  display: none !important;
}

  </style>

</head>

<body>
  <div class="intro_text">
    <div class="title_txt_1">Welcome to your training.</div><br><br>
    <div class="body_txt_1">To begin, please select the option that best describes you, then select <b>Submit</b>.<br>
    Please note that you will not be able to change your selection once you have begun the training.</div>
</div>
  <div class="center">
      <div id="example_select" class="select_container">
        <button tabindex="0" id="summary" onclick="toggleDropdown()">Select</button>
        <div class="select hidden" id="dropdown" >
          <label class="select__option" tabindex="0" value="profile1">
            <input type="radio" value="profile1" onclick="selectProfile('profile1','I am a <b>supervisor</b> of a cardholder and also a <b>card user</b> myself.')">I am a <b>supervisor</b> of a cardholder and also a <b>card user</b> myself.
          </label>
          <label class="select__option" tabindex="0" value="profile2">
            <input type="radio" value="profile2" onclick="selectProfile('profile2', 'I am a <b>supervisor</b> of a cardholder.')">I am a <b>supervisor</b> of a cardholder.
          </label>
          <label class="select__option" tabindex="0" value="I am a ProCard and Travel card user.">
            <input type="radio" value="profile3" onclick="selectProfile('profile3','I am a <b>ProCard</b> and <b>Travel card</b> user.')">I am a <b>ProCard</b> and <b>Travel card</b> user.
          </label>
          <label class="select__option" tabindex="0" value="I am a ProCard user.">
            <input type="radio" value="profile4" onclick="selectProfile('profile4','I am a <b>ProCard</b> user.')">I am a <b>ProCard</b> user.
          </label>
          <label class="select__option" tabindex="0" value="I am a Travel card user.">
            <input type="radio" value="profile5" onclick="selectProfile('profile5','I am a <b>Travel card</b> user.')">I am a <b>Travel card</b> user.
          </label>
        </div>
      </div>


      <input type="button" value="Submit" id="locBtn" onclick="loadPage()">

  </div>


  <script>
var pageloc = "";

function loadPage() {
    if (pageloc != "") {
        window.location = pageloc + "/scormdriver/indexAPI.html";
    }
}

function toggleDropdown() {
  document.getElementById("dropdown").classList.toggle("hidden");
  }


var summary = document.getElementById("summary");
var locBtn = document.getElementById("locBtn");
var dropdown = document.getElementById("dropdown");

function selectProfile(profile, desc) {
    console.log("language Selected -- ", profile);
    dropdown.classList.add("hidden")
    pageloc = profile;
    summary.innerHTML = desc;
    locBtn.focus();
}

var select__option = document.getElementsByClassName("select__option")

for (var i = 0; i < select__option.length; i++) {
    select__option[i].addEventListener("keyup", function (event) {
        if (event.keyCode === 13) {
            event.preventDefault();
            this.click();
        }
    });

}
  </script>
</body>
</html>