Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-49038

New Interface Scorm Proposal

    XMLWordPrintable

    Details

    • Type: New Feature
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 2.8.2
    • Fix Version/s: None
    • Component/s: SCORM
    • Labels:
    • Affected Branches:
      MOODLE_28_STABLE

      Description

      Follow my proposal of a more simple and direct way of navigating between the SCOID´s, using Fontawesome and bootstrap for grid placements of the content.

      On my first idea I was planning to, only show the navigation buttons on the last slide and place them by the side of the Scorm Activity. So I changed the locallib.php were:

              //$result->toc .= html_writer::start_div('', array('id' => 'scorm_content'));
      

      To

              $result->toc .= html_writer::start_div('', array('class'=>'content-fluid','id' => 'simpleSCOID'));
              $result->toc .= html_writer::div('', '', array('class'=>'span1 fa fa-angle-double-left fa-5x','id' => 'btnprevTROld'));
              $result->toc .= html_writer::start_div('', array('class'=>'span10','id' => 'scorm_content')).html_writer::end_div();;
              $result->toc .= html_writer::div('', '', array('class'=>'span1 fa fa-angle-double-right fa-5x','id' => 'btnnextTROld')).html_writer::end_div();
      

      So, now I have the two buttons place side by side to the scorm_content but, by doing that, a big issue appears (as I cant find anything similar to cmi.core.lesson_status to be get, the navigations are there static showing when the page renders), I noticed that the user was advancing the SCOIDs when it need to advance into the slides of the activity, because the navigation buttons were there by the side as shown on (proposal1.jpg) the users start to complain that the activity only have one slide because they were going thru the SCOIDs whithout using the internal navigation of the SCORM Package. So i forgot that proposal.

      Moving on, my second proposal a lot simpler was just place the navigation buttons that are using a fontawesome icon included thru the custom.css and modified on player.php, the result (proposal2.jpg):

      //echo html_writer::div($result->tocmenu, 'scorm-right', array('id' => 'scormnav'));
      

      To

              echo '<div id="scormnav" class="scorm-right"><div id="btnprevTR" class="buttonTR"><i class="fa fa-angle-double-left "></i></div>'.$result->tocmenu.'<div id="btnnextTR" class="buttonTR"><i class="fa fa-angle-double-right"></i></div></div>';
      

      And the JS for navigation as the navigation using the scorm_tree have a lot of issues was added on module.js right after the scorm_launch_next_sco function:

              var scoidElements = document.getElementsByName('scoid')[0];
              var nextButton = document.getElementById('btnnextTR');
              var previousButton = document.getElementById('btnprevTR');
              
              if(scoidElements != undefined) {
                  var i = scoidElements.selectedIndex;    
                      nextButton.onclick=function() {
                      nextScoid();                 
                  };
                      previousButton.onclick=function() {
                      previousScoid();                 
                  };
       
              }
              else {};
       
              var nextScoid = function() {
                  scoidElements.selected = true;
                  scoidElements.selectedIndex = i+1;     
                  if(scoidElements.selectedIndex == -1) {
                      scoidElements.selected = true;
                      scoidElements.selectedIndex = 1;
                      document.getElementById('tocmenu').submit();    
                  }
                  else {
                      document.getElementById('tocmenu').submit();    
                  }
              };
       
              var previousScoid = function() {
                  scoidElements.selected = true;
                  scoidElements.selectedIndex = i-1;
                  document.getElementById('tocmenu').submit();
                  if(scoidElements.selectedIndex == 0) {
                      scoidElements.selected = true;
                      scoidElements.selectedIndex = 1;
                      document.getElementById('tocmenu').submit();    
                  }
                  else {
                      document.getElementById('tocmenu').submit();    
                  }
       
              };
      

      I´ll be glad to hear what you guys think.

        Attachments

        1. proposal1.jpg
          proposal1.jpg
          146 kB
        2. proposal2.jpg
          proposal2.jpg
          142 kB

          Issue Links

            Activity

              People

              Assignee:
              Unassigned Unassigned
              Reporter:
              andrepazleal Andre Paz Leal
              Participants:
              Component watchers:
              Dan Marsden, Matteo Scaramuccia, Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Sujith Haridasan
              Votes:
              1 Vote for this issue
              Watchers:
              4 Start watching this issue

                Dates

                Created:
                Updated: