From d7234d5d99a10624f84c8e2ece9dff041c77440f Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Tue, 14 Dec 2021 16:15:06 +0100 Subject: [PATCH] wip #4907 @1.5 --- index.html | 137 +++++++++++++++++++++++++++++++++++++------- js/scormpackage.js | 75 ++++++++++++------------ style/style.css | 132 +++++++++++++++++++++++++++++++++++++++++- style/style.css.map | 2 +- style/style.sass | 95 +++++++++++++++++++++++++++++- 5 files changed, 381 insertions(+), 60 deletions(-) diff --git a/index.html b/index.html index 4c9c631..b81cbd2 100644 --- a/index.html +++ b/index.html @@ -47,30 +47,127 @@ + + + + + + + + + + + + + + + + + + -
-

-
-
- - - - - - - - - - - - +
+
+ +
+

+
+
+
TypeMandatoryValidatedScore
+ + + + + + + + + + + - -
TypeMandatoryValidatedScore
-
+ + + +
-

+
+
+

diff --git a/js/scormpackage.js b/js/scormpackage.js index 86515d8..0e93cec 100644 --- a/js/scormpackage.js +++ b/js/scormpackage.js @@ -1,10 +1,12 @@ -var status = {}; +window.savedState = {}; +console.log(window.savedState); + (function (global) { $(function () { - initEvents(); - setContents(); - + $("header #logo").html(getSpriteIcon('logo')); + $("header #tile").html(getSpriteIcon('tile')); + initScorm(); }); })(typeof window === 'undefined' ? this : window); @@ -38,7 +40,7 @@ function openSubSCO(id) { path = 'js/libs/pdfjs/web/viewer.html?file=../../../../' + path; } - $("#scowin").addClass('show'); + $("#scowin").addClass('show').attr('data-type', module.type); $("#scowin h2").text(module.title); $("#scobar #scoicon").html(getSpriteIcon('icon-' + module.type)); $("#scobar .close").html(getSpriteIcon('interface-close')); @@ -54,12 +56,13 @@ function setModuleState(id, completion_status, success_status, score, location) location = {}; } var s = {completion_status: completion_status, success_status: success_status, score: score, location: location}; - status[id] = s; + window.savedState[id] = s; saveStatus(); + setContents(); } function saveStatus() { - + setSCORMLocation(window.savedState); } function getModuleData(id) { @@ -73,19 +76,23 @@ function getModuleData(id) { } function setContents() { - var vcheck = ''; - var xcheck = ''; + var vcheck = getSpriteIcon('check-ok'); + var xcheck = getSpriteIcon('check-nok'); var types = {IN: 'Infographic PDF', AN: 'Animation', VI: 'Video', FB: 'Fluidbook', PC: 'Podcast HTML', QZ: 'Quiz'}; $('header h1').text(DATA.title); $('title').text(DATA.title); + $('tbody').html(''); $.each(DATA.modules, function (k, v) { - var tr = $(''); + var s = (status[v.id] === undefined) ? {complete_status: 'incomplete', success_status: 'unknown', score: 0, location: {}} : status[v.id]; + console.log(s); + var tr = $('' + getSpriteIcon('icon-' + v.type) + ''); $('tbody').append(tr); - tr.append('' + v.title + ''); - tr.append('' + types[v.type] + ''); - tr.append('' + (v.mandatory ? vcheck : xcheck) + ''); - tr.append('' + ''); - tr.append('' + ''); + tr.append('' + v.title + ''); + tr.append('' + types[v.type] + ''); + tr.append('' + (v.mandatory ? vcheck : xcheck) + ''); + tr.append('' + (s.complete_status === 'completed' ? vcheck : xcheck) + ''); + tr.append('
' + s.score + ' %
'); + }); } @@ -107,42 +114,36 @@ function setContents() { // Using `this` for web workers & supports Browserify / Webpack. })(typeof window === 'undefined' ? this : window); -SCORM = true; - -function initScormEvents() { +function initScorm() { SCORM = doLMSInitialize(); - var defaultState = {q: 1}; - if (!SCORM) { - // No SCORM, we init at question 1 - $(document).trigger('quizinit', defaultState); - return false; - } + $(window).on('unload', function () { doLMSFinish(); }); - var currentStatus = getScormValue('cmi.core.lesson_status'); - if (currentStatus != 'passed' || currentStatus != 'completed') { - setScormValue('cmi.core.lesson_status', 'incomplete'); - } - - var savedState = getScormValue('cmi.core.lesson_location'); try { - if (savedState == '') { - savedState = defaultState; + var l = getScormValue('cmi.location'); + if (l === null || l === 'null') { + window.savedState = {}; } else { - savedState = JSON.parse(savedState); + window.savedState = JSON.parse(l); } - $(document).trigger('quizinit', savedState); - } catch (err) { - console.error(err); + } catch (e) { + } + if (window.savedState === undefined || window.savedState === null || window.savedState === 'null') { + window.savedState = {}; + } + + initEvents(); + setContents(); + return true; } function setSCORMLocation(location) { - return setScormValue('cmi.core.lesson_location', JSON.stringify(location)); + return setScormValue('cmi.location', JSON.stringify(location)); } function setSCORMScore(score, max, min) { diff --git a/style/style.css b/style/style.css index fe2334c..520dc59 100644 --- a/style/style.css +++ b/style/style.css @@ -13,6 +13,34 @@ body, html { cursor: pointer; } +header { + position: relative; + height: 200px; +} +header #logo { + position: absolute; + top: 20px; + right: 0; + color: #f0f0f0; +} +header #logo svg { + height: 50px; +} +header #tile { + position: absolute; + top: -5px; + left: -100px; +} +header #tile svg { + height: 200px; + color: #f0f0f0; +} +header h1 { + position: absolute; + top: 110px; + left: 40px; +} + #scowin { position: fixed; top: 0; @@ -25,6 +53,24 @@ body, html { transition: 500ms opacity; background-color: #fff; } +#scowin[data-type=IN] #scobar { + background-color: #47484e; +} +#scowin[data-type=VI] #scobar { + background-color: #d0167c; +} +#scowin[data-type=AN] #scobar { + background-color: #84156f; +} +#scowin[data-type=FB] #scobar { + background-color: #f8971d; +} +#scowin[data-type=PC] #scobar { + background-color: #00a0af; +} +#scowin[data-type=QZ] #scobar { + background-color: #00abeb; +} #scowin.show { opacity: 1; display: block; @@ -36,7 +82,6 @@ body, html { left: 0; width: 100%; height: 30px; - background: #8b276d; color: #fff; } #scowin #scobar a.close { @@ -71,6 +116,91 @@ body, html { background-color: #000; } +#wrapper { + width: 1024px; + margin: 0 auto; +} +#wrapper main table { + border-collapse: collapse; + width: 1024px; +} +#wrapper main table th, #wrapper main table td { + padding: 5px 10px; + text-align: left; +} +#wrapper main table th.t, #wrapper main table td.t { + border-bottom: 1px solid #f0f0f0; +} +#wrapper main table th.y, #wrapper main table td.y { + padding-left: 30px; +} +#wrapper main table th.c, #wrapper main table td.c { + text-align: center; +} +#wrapper main table tbody tr[data-type=IN] td.t { + border-left-color: #47484e; +} +#wrapper main table tbody tr[data-type=IN] td.i svg { + color: #47484e; +} +#wrapper main table tbody tr[data-type=VI] td.t { + border-left-color: #d0167c; +} +#wrapper main table tbody tr[data-type=VI] td.i svg { + color: #d0167c; +} +#wrapper main table tbody tr[data-type=AN] td.t { + border-left-color: #84156f; +} +#wrapper main table tbody tr[data-type=AN] td.i svg { + color: #84156f; +} +#wrapper main table tbody tr[data-type=FB] td.t { + border-left-color: #f8971d; +} +#wrapper main table tbody tr[data-type=FB] td.i svg { + color: #f8971d; +} +#wrapper main table tbody tr[data-type=PC] td.t { + border-left-color: #00a0af; +} +#wrapper main table tbody tr[data-type=PC] td.i svg { + color: #00a0af; +} +#wrapper main table tbody tr[data-type=QZ] td.t { + border-left-color: #00abeb; +} +#wrapper main table tbody tr[data-type=QZ] td.i svg { + color: #00abeb; +} +#wrapper main table tbody tr:hover td.t { + background-color: #e6e6e6; +} +#wrapper main table tbody td.i svg { + position: relative; + left: 10px; + top: 4px; +} +#wrapper main table tbody td.t { + text-align: center; + font-weight: 600; + font-size: 125%; + padding-left: 50px; + padding-right: 50px; + border-bottom: 1px solid #f0f0f0; + border-left: 10px solid #000000; +} +#wrapper main table tbody td.score div { + width: 50px; + padding: 5px; + margin: 0 auto; + background-color: #e4ff19; + font-weight: 600; +} +#wrapper main table tbody td svg { + height: 30px; +} + /* open-sans-300 - latin */ @font-face { font-family: "Open Sans"; diff --git a/style/style.css.map b/style/style.css.map index 3e219a1..1abca19 100644 --- a/style/style.css.map +++ b/style/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEJ;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAEA;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AAEJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEJ;EACE;EACA;EACA;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAII;EACE,kBAvDA;;AAsDF;EACE,kBAvDA;;AAsDF;EACE,kBAvDA;;AAsDF;EACE,kBAvDA;;AAsDF;EACE,kBAvDA;;AAsDF;EACE,kBAvDA;;AAyDN;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;AAGE;EACE;EACA;;AAEA;EACE;EACA;;AACA;EACE;;AAEF;EACE;;AAEF;EACE;;AAMI;EACE,mBAjIR;;AAmIQ;EACE,OApIV;;AAgIM;EACE,mBAjIR;;AAmIQ;EACE,OApIV;;AAgIM;EACE,mBAjIR;;AAmIQ;EACE,OApIV;;AAgIM;EACE,mBAjIR;;AAmIQ;EACE,OApIV;;AAgIM;EACE,mBAjIR;;AAmIQ;EACE,OApIV;;AAgIM;EACE,mBAjIR;;AAmIQ;EACE,OApIV;;AAuII;EACE;;AAGF;EACE;EACA;EACA;;AACJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAEJ;EACE;;;AAEZ;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA","file":"style.css"} \ No newline at end of file diff --git a/style/style.sass b/style/style.sass index adacb1c..f123354 100644 --- a/style/style.sass +++ b/style/style.sass @@ -1,3 +1,5 @@ +$colors:(IN: #47484e, VI: #d0167c , AN: #84156f, FB: #f8971d, PC: #00a0af, QZ: #00abeb) + body, html min-height: 100% @@ -11,6 +13,31 @@ body, html [data-id] cursor: pointer +header + position: relative + height: 200px + #logo + position: absolute + top: 20px + right: 0 + color: #f0f0f0 + svg + height: 50px + + #tile + position: absolute + top: -5px + left: -100px + + svg + height: 200px + color: #f0f0f0 + + h1 + position: absolute + top: 110px + left: 40px + #scowin position: fixed top: 0 @@ -22,6 +49,12 @@ body, html opacity: 0 transition: 500ms opacity background-color: #fff + + @each $type, $color in $colors + &[data-type=#{$type}] + #scobar + background-color: $color + &.show opacity: 1 display: block @@ -34,13 +67,13 @@ body, html left: 0 width: 100% height: 30px - background: #8b276d color: #fff a.close position: absolute top: 5px right: 5px + svg width: 20px height: 20px @@ -68,6 +101,66 @@ body, html left: 0 background-color: #000 +#wrapper + width: 1024px + margin: 0 auto + + main + table + border-collapse: collapse + width: 1024px + + th, td + padding: 5px 10px + text-align: left + &.t + border-bottom: 1px solid #f0f0f0 + + &.y + padding-left: 30px + + &.c + text-align: center + + tbody + tr + @each $type, $color in $colors + &[data-type=#{$type}] + td.t + border-left-color: $color + td.i + svg + color: $color + + &:hover + td.t + background-color: #e6e6e6 + td + &.i + svg + position: relative + left: 10px + top: 4px + &.t + text-align: center + font-weight: 600 + font-size: 125% + padding-left: 50px + padding-right: 50px + border-bottom: 1px solid #f0f0f0 + border-left: 10px solid #000000 + + &.score + div + width: 50px + padding: 5px + margin: 0 auto + background-color: #e4ff19 + font-weight: 600 + + svg + height: 30px + /* open-sans-300 - latin */ @font-face font-family: 'Open Sans' -- 2.39.5