diff --git a/h5pxblock/h5pxblock.py b/h5pxblock/h5pxblock.py index 6bd37fd8..0af52bea 100644 --- a/h5pxblock/h5pxblock.py +++ b/h5pxblock/h5pxblock.py @@ -193,7 +193,7 @@ def student_view(self, context=None): template = self.render_template("static/html/h5pxblock.html", context) frag = Fragment(template) frag.add_css(self.resource_string("static/css/student_view.css")) - frag.add_javascript_url('https://cdn.jsdelivr.net/npm/h5p-standalone@3.5.1/dist/main.bundle.js') + frag.add_javascript_url('https://cdn.jsdelivr.net/npm/h5p-standalone@3.6.0/dist/main.bundle.js') frag.add_javascript(self.resource_string("static/js/src/h5pxblock.js")) user_service = self.runtime.service(self, 'user') user = user_service.get_current_user() diff --git a/h5pxblock/static/css/student_view.css b/h5pxblock/static/css/student_view.css index 5d74900c..474b86c4 100644 --- a/h5pxblock/static/css/student_view.css +++ b/h5pxblock/static/css/student_view.css @@ -1,6 +1,3 @@ -.h5p-player { - display: none; -} @keyframes spinner-border { to { transform: rotate(360deg); } diff --git a/h5pxblock/static/js/src/h5pxblock.js b/h5pxblock/static/js/src/h5pxblock.js index 7ae5092c..9649c643 100644 --- a/h5pxblock/static/js/src/h5pxblock.js +++ b/h5pxblock/static/js/src/h5pxblock.js @@ -7,13 +7,13 @@ function H5PPlayerXBlock(runtime, element, args) { const contentUserDataUrl = runtime.handlerUrl(element, 'user_interaction_data'); const contentxResultSaveUrl = runtime.handlerUrl(element, 'result_handler'); - const playerPromise = function edXH5PPlayer(el) { + const playerPromise = function edXH5PPlayer(el) { if (el && $(el).children('.h5p-iframe-wrapper').length == 0) { const userObj = { 'name': args.user_full_name, 'mail': args.user_email }; const options = { h5pJsonPath: args.h5pJsonPath, - frameJs: 'https://cdn.jsdelivr.net/npm/h5p-standalone@3.5.1/dist/frame.bundle.js', - frameCss: 'https://cdn.jsdelivr.net/npm/h5p-standalone@3.5.1/dist/styles/h5p.css', + frameJs: 'https://cdn.jsdelivr.net/npm/h5p-standalone@3.6.0/dist/frame.bundle.js', + frameCss: 'https://cdn.jsdelivr.net/npm/h5p-standalone@3.6.0/dist/styles/h5p.css', frame: args.frame, copyright: args.copyright, icon: args.icon, @@ -28,56 +28,58 @@ function H5PPlayerXBlock(runtime, element, args) { contentUserDataUrl: contentUserDataUrl } } + return new H5PStandalone.H5P(el, options).then(function(){ $(el).siblings('.spinner-container').find('.spinner-border').hide(); - $(el).show(); + $(el).show(); + H5P.externalDispatcher.on("xAPI", (event) => { + + let hasStatement = event && event.data && event.data.statement; + if (!hasStatement) { + return; + } + + let statement = event.data.statement; + let validVerb = statement.verb && statement.verb.display && statement.verb.display['en-US']; + if (!validVerb) { + return; + } + + let isCompleted = statement.verb.display['en-US'] === 'answered' || + statement.verb.display['en-US'] === 'completed'; + let isChild = statement.context && statement.context.contextActivities && + statement.context.contextActivities.parent && + statement.context.contextActivities.parent[0] && + statement.context.contextActivities.parent[0].id; + + // Store only completed root events. + if (isCompleted && !isChild) { + $.ajax({ + type: "POST", + url: contentxResultSaveUrl, + data: JSON.stringify(event.data.statement) + }); + } + // uncomment to see all xAPI events triggered by H5P content + //console.log("xAPI event: ", event); + }); + }); } }; const h5pel = document.getElementById('h5p-' + args.player_id); - window.H5PPlayerXBlockPromises.push(h5pel); + window.H5PPlayerXBlockPromises.push(playerPromise(h5pel)); window.H5PXBlockPlayersInitlized = false; $(function ($) { if (!H5PXBlockPlayersInitlized) { window.H5PXBlockPlayersInitlized = true; window.H5PPlayerXBlockPromises.reduce( - (p, x) => - p.then(_ => playerPromise(x)), - Promise.resolve() - ) - H5P.externalDispatcher.on("xAPI", (event) => { - - let hasStatement = event && event.data && event.data.statement; - if (!hasStatement) { - return; - } - - let statement = event.data.statement; - let validVerb = statement.verb && statement.verb.display && statement.verb.display['en-US']; - if (!validVerb) { - return; - } - - let isCompleted = statement.verb.display['en-US'] === 'answered' || - statement.verb.display['en-US'] === 'completed'; - let isChild = statement.context && statement.context.contextActivities && - statement.context.contextActivities.parent && - statement.context.contextActivities.parent[0] && - statement.context.contextActivities.parent[0].id; - - // Store only completed root events. - if (isCompleted && !isChild) { - $.ajax({ - type: "POST", - url: contentxResultSaveUrl, - data: JSON.stringify(event.data.statement) - }); - } - // uncomment to see all xAPI events triggered by H5P content - //console.log("xAPI event: ", event); - }); + function(prevPromise, curPromise) { + return prevPromise.then(curPromise); + }, Promise.resolve() + ); } }); } diff --git a/setup.py b/setup.py index 6516a0b1..c384cd56 100644 --- a/setup.py +++ b/setup.py @@ -28,7 +28,7 @@ def package_data(pkg, roots): setup( name='h5p-xblock', - version='0.2.4', + version='0.2.5', description='XBlock to play self hosted h5p content inside open edX', long_description=long_description, long_description_content_type='text/markdown',