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
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>

     

    • SamHill's avatar
      SamHill
      Super Hero
      7 months ago

      I would recommend removing these script tags, as you are not doing anything with the SCORM API at this stage, and so the files are redundant and it is worth excluding them in case they are triggering something you are unaware of:

      <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>