diff --git a/modules/Quiz/resources/css/quiz.css b/modules/Quiz/resources/css/quiz.css index 32cbd0e816..131aef8eb4 100755 --- a/modules/Quiz/resources/css/quiz.css +++ b/modules/Quiz/resources/css/quiz.css @@ -338,7 +338,8 @@ button.qContinue, button.qApplied { color: rgba(0, 0, 0, 0.7); font-size: 1.6vw; margin-left: 5vw; - cursor: default !important; + cursor: default!important; + padding-top: 11px; } .ftr-right{ font-family: "LatoBlack"; @@ -348,6 +349,7 @@ button.qContinue, button.qApplied { float: right; text-align: right; padding-right: 5vw; + padding-top: 11px; } .ftr-right:hover { cursor: pointer; @@ -765,6 +767,41 @@ ol.second-row{ .track { bottom:9vh!important; } + +.cp-navigation{ + float: right; + width: 114px; + height: 36px; + border-radius: 20px; + border: solid 2px #ebebeb80; +} +.prev-cp{ + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAAGXcA1uAAAAAXNSR0IArs4c6QAAAOdJREFUSA3tlE0OgjAQhQE9kokbFx7CaOJh1KOoZ9DzuPEGLCXo96A1CAEGgi4MLxn7M2++0mIJgrKeSHORS5zLht5jwEvRvXqDWgrhb4qWUAMmHzRTnwiR7ysZvwff7+gATKvIiD5201iI+UR03wxFu0byvyXZ8IG4m/blzInVvKfAZhYRc5MulVVxR65iUUnWTViK/J3PGFyQlM6EmNdBx/kBT4A3tCVWAyJzFFD916WEWA+2ALAi2P6dansCwDNCSvOm0++1jZ/lQR4dNqa1XyUT3ZkA667qqyz9bKFbl4ccvaYTeAFkqRLUmIFI0QAAAABJRU5ErkJggg=='); +} +.next-cp{ + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAAGXcA1uAAAAAXNSR0IArs4c6QAAAOVJREFUSA3tlc0NwjAMhVtm4tgDQyBArMEdMgodgn04sAHXSuF7lVq5IimN5AuIJ1n45/k5NZBWVQoxxjDmCVZjkHagNOmKzcK6YSNszdtnSDdo1nI0dUjoswY2fiNMiv4Bx3lgoViZpg67LGqE2GDCp++wX9FpEXHR6C8haTWpo86t65BrSgn1ORr22SYVZrDJqtoCAk+stbmsX0SWCg3nrNq/4LsBlr3Fjr6qRg3xHaZrRAim5Osirp99+SCaJq8K4hKsXR+DybpE9fcSrm7iiFnhlnju2imbi9gdE3yFy47xS+wXsKsYCRmkP9QAAAAASUVORK5CYII='); +} +.cp-navigation-btn{ + color: white; + float: left; + margin: 6px 16px; + width: 24px; + height: 24px; +} +.cp-navigation-btn.disabled{ + opacity:0.4; + cursor: default; +} +.separator-block{ + float: left; + margin: 6px 0; + line-height: 24px; +} +.separator-block .separator{ + width: 1px; + border: solid 1px #ebebeb80; +} + .true-false-question .header-container { position: relative; height: 36vh; diff --git a/modules/Quiz/resources/quiz.js b/modules/Quiz/resources/quiz.js index 214a9bbc83..29bd4517e1 100755 --- a/modules/Quiz/resources/quiz.js +++ b/modules/Quiz/resources/quiz.js @@ -659,8 +659,55 @@ $('#kplayer_pid_kplayer').css('display', 'block'); $('#kplayer_pid_kplayer').attr('aria-hidden', 'false'); }, + + addQuePointsNavigationButtons:function (questionNr) { + var _this = this; + var allPoints = $.cpObject.cpArray; + var currentPoint = allPoints[questionNr]; + if(currentPoint){ + var nextBtn = $('').addClass('cp-navigation-btn next-cp disabled'); + var prevBtn = $('').addClass('cp-navigation-btn prev-cp disabled'); + var separator = $("
").addClass('separator-block').append($('').addClass('separator')); + + var prevQuePoint = allPoints[currentPoint.key-1]; + if(currentPoint.key > allPoints[0].key && prevQuePoint){ + //allow go to prev CP: 1 - if canSkip is true; 2 - if canSkip is false but current CP and prev CP is already answered + if( (_this.KIVQModule.canSkip) || (!_this.KIVQModule.canSkip && currentPoint.isAnswerd && prevQuePoint.isAnswerd) ){ + prevBtn.attr({'href':'#','tabindex': 7}).removeClass('disabled') + .on('keydown', _this.keyDownHandler) + .on('click',function (e) { + e.preventDefault(); + _this.KIVQModule.continuePlay(); + _this.seekToQuestionTime = prevQuePoint.startTime; + _this.KIVQModule.gotoScrubberPos(prevQuePoint.key); + _this.isSeekingIVQ = true; + mw.log("Quiz: gotoScrubberPos : " + prevQuePoint.key); + }); + } + } + var nextQuePoint = allPoints[currentPoint.key+1]; + if(currentPoint.key < allPoints[allPoints.length-1].key && nextQuePoint){ + //allow go to next CP: 1 - if canSkip is true; 2 - if canSkip is false but current CP and next CP is already answered + if( (_this.KIVQModule.canSkip) || (!_this.KIVQModule.canSkip && nextQuePoint.isAnswerd)){ + nextBtn.attr({'href':'#','tabindex': 8}).removeClass('disabled') + .on('keydown', _this.keyDownHandler) + .on('click',function (e) { + e.preventDefault(); + _this.KIVQModule.continuePlay(); + _this.seekToQuestionTime = nextQuePoint.startTime; + _this.KIVQModule.gotoScrubberPos(nextQuePoint.key); + _this.isSeekingIVQ = true; + mw.log("Quiz: gotoScrubberPos : " + nextQuePoint.key); + }); + } + } + var navigation = $("").addClass('cp-navigation').append(prevBtn, separator, nextBtn ); + $('.ftr-container').prepend( navigation); + } + }, addFooter: function (questionNr) { var _this = this; + _this.addQuePointsNavigationButtons(questionNr); if (_this.KIVQModule.quizSubmitted) { $(".ftr-right").html(gM('mwe-quiz-next')).on('click', function () {