From 344a35652985900c620d81972cbbfcbecede1932 Mon Sep 17 00:00:00 2001 From: Frank Ronny Larsen Date: Thu, 7 Feb 2013 14:08:44 +0100 Subject: [PATCH] CSS fixes, Show video before result page --- css/questionset.css | 5 +- js/questionset.js | 143 +++++++++++++++++++++++--------------------- 2 files changed, 79 insertions(+), 69 deletions(-) diff --git a/css/questionset.css b/css/questionset.css index d3a6d0d..291354a 100644 --- a/css/questionset.css +++ b/css/questionset.css @@ -32,6 +32,7 @@ border-radius: 50%; border: 1px solid #494949; margin: 0 3px; + cursor: pointer; } .progress-dot.answered { background: #494949; @@ -130,7 +131,7 @@ .questionset-results .resulttext.fail { background-image: url(img/mark-fail.png); } -.questionset-results .resulttext.fail .em { +.questionset-results .resulttext.fail em { font-style: normal; color: #b9272d; } @@ -138,7 +139,7 @@ .questionset-results .resulttext.success { background-image: url(img/mark-pass.png); } -.questionset-results .resulttext.success .em { +.questionset-results .resulttext.success em { font-style: normal; color: #6aa81b; } diff --git a/js/questionset.js b/js/questionset.js index e51c61f..99a47f7 100644 --- a/js/questionset.js +++ b/js/questionset.js @@ -52,15 +52,14 @@ H5P.QuestionSet = function (options, contentId) { ' ' + '' + ''; - var resulttemplate = '' + '
' + '
<%= greeting %>
' + '
<%= score %>
' + '
<%= resulttext %>
' + -'
<%= finishButtonText %>' + +'
<%= finishButtonText %>
' + '
' + -''; + ''; var that = this; var defaults = { @@ -174,16 +173,85 @@ H5P.QuestionSet = function (options, contentId) { return currentQuestion; }; + var _displayEndGame = function () { + // Get total score. + var finals = getScore(); + var totals = totalScore(); + var scoreString = params.endGame.resultPage.scoreString.replace("@score", finals).replace("@total", totals); + var success = ((100 * finals / totals) >= params.passPercentage); + var eventData = { + score: scoreString, + passed: success + }; + var displayResults = function () { + if (!params.endGame.showResultPage) { + $(returnObject).trigger('h5pQuestionSetFinished', eventData); + return; + } + + var eparams = { + greeting: (success ? params.endGame.resultPage.succesGreeting : params.endGame.resultPage.failGreeting), + score: scoreString, + scoreclass: (success ? 'success' : 'fail'), + resulttext: (success ? params.endGame.resultPage.successComment : params.endGame.resultPage.failComment), + finishButtonText: params.endGame.resultPage.finishButtonText + }; + + // Show result page. + $myDom.children().hide(); + $myDom.append(endTemplate.render(eparams)); + $('.qs-finishbutton').click(function (ev) { + $(returnObject).trigger('h5pQuestionSetFinished', eventData); + }); + }; + + var $video; + if (params.endGame.animations.showAnimations) { + var sources = ""; + var videoData = success ? params.endGame.animations.successVideo : params.endGame.animations.failVideo; + + if (videoData) { + for (var key in videoData) { + sources += ''; + } + // TODO: Width/height from somewhere. + // TODO: Embed media player fallback for IE. + $video = $(''); + if ($video[0].canPlayType === undefined) { + // Video is not supported. Skip to result page. + displayResults(); + return; + } + $video[0].autoplay = false; + $video[0].load(); + } + + // Start video. + $myDom.html($video); + $video.on('play', function(ev) { + console.log('Video started playing!!!'); + }).on('ended', function(ev) { + console.log('Video is finished, quitting now!'); + // On animation finished: + displayResults(); + }); + // Press play on tape! + $video[0].play(); + } else { + // Trigger finished event. + displayResults(); + } + }; + // Function for attaching the multichoice to a DOM element. var attach = function (target) { if (typeof(target) == "string") { - target = $("#" + target); + $myDom = $("#" + target); } else { - target = $(target); + $myDom = $(target); } // Render own DOM into target. - $myDom = target; $myDom.html(template.render(params)).css({ backgroundImage: 'url(' + cp + params.backgroundImage.path + ')' }); @@ -209,7 +277,7 @@ H5P.QuestionSet = function (options, contentId) { // Set event listeners. $('.progress-dot', $myDom).click(function (ev) { - var idx = parseInt($(this).attr('id').split('-')[1]); + var idx = parseInt($(this).attr('id').split('-')[1], 10); _showQuestion(idx); }); $('.next.button', $myDom).click(function (ev) { @@ -219,66 +287,7 @@ H5P.QuestionSet = function (options, contentId) { _showQuestion(currentQuestion - 1); }); $('.finish.button', $myDom).click(function (ev) { - // Get total score. - var finals = getScore(); - var totals = totalScore(); - var scoreString = params.endGame.resultPage.scoreString.replace("@score", finals).replace("@total", totals); - var success = ((100 * finals / totals) >= params.passPercentage); - var eventData = { - score: scoreString, - passed: success - }; - - // Display result page. - if (params.endGame.showResultPage) { - // Render result page into. - var eparams = { - greeting: (success ? params.endGame.resultPage.succesGreeting : params.endGame.resultPage.failGreeting), - score: scoreString, - scoreclass: (success ? 'success' : 'fail'), - resulttext: (success ? params.endGame.resultPage.successComment : params.endGame.resultPage.failComment), - finishButtonText: params.endGame.resultPage.finishButtonText - }; - endTemplate.update(target.attr('id'), eparams); - - var $video; - if (params.endGame.animations.showAnimations) { - var sources = ""; - var videoData = success ? params.endGame.animations.successVideo : params.endGame.animations.failVideo; - - if (videoData) { - for (var key in videoData) { - sources += ''; - } - // TODO: Width/height from somewhere. - $video = $(''); - $video[0].autoplay = false; - $video[0].load(); - } - } - - $('.qs-finishbutton').click(function (ev) { - // Display animation if present. - if ($video) { - // Start video. - target.html($video); - $video.on('play', function(ev) { - console.log('Video started playing!!!'); - }).on('ended', function(ev) { - console.log('Video is finished, quitting now!'); - // On animation finished: - $(returnObject).trigger('h5pQuestionSetFinished', eventData); - }); - // Press play on tape! - $video[0].play(); - } else { - // Trigger finished event. - $(returnObject).trigger('h5pQuestionSetFinished', eventData); - } - }); - } else { - $(returnObject).trigger('h5pQuestionSetFinished', eventData); - } + _displayEndGame(); }); // Hide all but initial Question.