Index: lams_central/web/includes/javascript/dialog5.js
===================================================================
diff -u
--- lams_central/web/includes/javascript/dialog5.js	(revision 0)
+++ lams_central/web/includes/javascript/dialog5.js	(revision 7344842c444056d9b34ef71feb165946dd4f64ae)
@@ -0,0 +1,452 @@
+var dialogTemplate = $('<div class="modal fade dialogContainer " tabindex="-1" role="dialog">' +
+							'<div class="modal-dialog" role="document">' +
+								'<div class="modal-content">' +
+									'<div class="modal-header">' +
+										'<h5 class="modal-title"></h5>' +
+										'<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>'+
+										'<button type="button" class="close dialogMaximise" aria-label="Maximise">' +
+											'<i class="fa fa-plus" aria-hidden="true"></i>' +
+										'</button>' +
+										'<button type="button" class="close dialogMinimise" aria-label="Minimise">' +
+											'<i class="fa fa-minus" aria-hidden="true"></i>' +
+										'</button>' +
+									'</div>' +
+									'<div class="modal-body">' +
+										'<iframe></iframe>' +
+									'</div>' +
+								'</div>' +
+							'</div>' +
+						'</div>');
+
+	
+/**
+ * Checks if the dialog is already opened.
+ * If not, creates a new dialog with the given ID and init parameters.
+ */
+function showDialog(id, initParams, extraButtons, recreate) {
+	var dialog = $('#' + id);
+	// is it opened already?
+	if (dialog.length > 0) {
+		if (recreate){
+			dialog.modal('hide');
+			
+		//try to open already existing dialog
+		} else {
+			//restore minimised dialog
+			if (dialog.hasClass('dialogMin')) {
+				restoreMinimisedDialog(dialog);
+			
+			} else {
+				// we do not support multiple opened bootstrap dialogs yet
+				// dialog.dialog('moveToTop');
+			}
+			
+			return;
+		}
+	}
+
+	// checks whether the dialog should be created inside a current window or in a parent one. The latter is preferred 
+	//in case we want dialog to be not constrained by the boundaries of a current window
+	var targetWindow = initParams.isCreateInParentWindow ? window.parent : window;
+	
+	// create a new dialog by cloning a template
+	dialog = dialogTemplate.clone().appendTo(targetWindow.$('body'));
+	dialog.data('isCreateInParentWindow', initParams.isCreateInParentWindow);
+	
+	// use the input attributes or fall back to default ones
+	initParams = $.extend({
+		'autoOpen' : true,
+		'modal'    : false,
+		'draggable' : true,
+		'resizable' : extraButtons == true,
+		'startMaximized' : false,
+		'beforeClose' : function(){
+			$('iframe', this).attr('src', null);
+		},
+		'close' : function() {
+			// completely delete the dialog
+			$(this).remove();
+		}
+	}, initParams);
+	
+	// update title
+	$('.modal-title', dialog).attr('id',  id + 'Label').text(initParams.title);
+	dialog.attr({
+		'id' : id,
+		'aria-labelledby' : id + 'Label'
+	});
+	
+	var modalDialog = $('.modal-dialog', dialog),
+		modalContent = $('.modal-content', dialog);
+	
+	if (initParams.width) {
+		modalDialog.width(initParams.width);
+	}
+	if (initParams.height) {
+		modalContent.height(initParams.height);
+	}
+	if (initParams.resizable) {
+		modalContent.resizable();
+	}
+	
+	// disable draggable for Android and iPhone as it breaks the close buttons
+	var draggable = initParams.draggable && ! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+	if (draggable) {
+		modalDialog.draggable({
+			'cancel' : '.modal-body, button.close'
+		});
+	}
+	dialog.data("isDraggable", draggable);
+	
+	// store extra attributes for dialog content internal use
+	if (initParams.data) {
+		dialog.data(initParams.data);
+	}
+	
+	dialog.on('show.bs.modal', initParams.modal ? initParams.open : function(event){
+		
+		// skip hiding dialog if it's already shown, as bootstrap doesn't fire 'shown.bs.modal' event second time if dialog is already open
+		if (!dialog.data('shown')) {
+			dialog.css('visibility', 'hidden');
+		}
+		
+		if (initParams.open) {
+			initParams.open.call(dialog, event);
+		}
+		
+	});
+	dialog.on('hide.bs.modal', initParams.beforeClose);
+	dialog.on('hidden.bs.modal', initParams.close);
+	
+	dialog.modal({
+		'keyboard' : false,
+		'backdrop' : initParams.modal ? 'static' : false,
+		'show' : initParams.autoOpen
+	});
+	
+	if (!initParams.modal) {
+		// make the dialog non-modal
+		dialog.on('shown.bs.modal', function(){
+
+			// store 'shown.bs.modal' event was fired
+			dialog.data({
+				'shown' : true
+			});
+
+			// the main modal div is maximised, we need to shrink it
+			modalDialog.css({
+				'margin' : 0
+			});
+			dialog.width(modalDialog.outerWidth(true) + 15);
+			dialog.height(modalDialog.outerHeight(true) + 15);
+			// remove overlay
+			dialog.siblings('.modal-backdrop').remove();
+			dialog.css('visibility', 'visible');
+			
+			// center the dialog or put it into previously defined position
+			var position = dialog.data('position');
+			if (position !== false) {
+				position = position || 
+					(dialog.data('isCreateInParentWindow') ?
+						{
+							'my' : 'center center',
+							'at' : 'center center',
+							'of' : targetWindow
+						}
+						:
+						{
+							'my' : 'top',
+							'at' : 'top+15px',
+							'of' : window
+						}
+					);
+				dialog.position(position);
+			}
+
+			if (draggable) {
+				modalDialog.on('drag', function(event, ui){
+					// pass the event to the dialog, not its internal element
+					dialog.offset({
+						'top'  : Math.min(window.innerHeight - 30, Math.max(0, ui.offset.top + 5)),
+						'left' : Math.min(window.innerWidth - 200, Math.max(0, ui.offset.left + 5))
+					});
+					modalDialog.css({
+						'position' : 'static'
+					});
+				});
+			}
+			
+			if (initParams.resizable) {
+				modalContent.on('resize', function(event, ui){
+					dialog.width(ui.size.width + 15);
+					dialog.height(ui.size.height + 15);
+				}).on('resizestart', function(){
+					// disable iframe as a target
+					// so it does not consume mouse movement when shrinking the dialog
+					$('iframe', this).css('pointer-events', 'none');
+				}).on('resizestop', function(){
+					$('iframe', this).css('pointer-events', 'auto');
+				});
+			}
+		});
+	}
+	
+	if (extraButtons) {
+		var maximizeButton = $('.dialogMaximise', dialog).click(function(){
+			var icon = $('i', this),
+				wasMaxed = icon.hasClass('fa-clone'),
+				internalDialog = $('.modal-dialog', dialog),
+				internalContent = $('.modal-content', dialog);
+			icon.toggleClass('fa-plus').toggleClass('fa-clone');
+			if (wasMaxed) {
+				// restore dialog
+				var oldWidth = dialog.data('oldWidth'),
+					oldHeight = dialog.data('oldHeight');
+				if (!initParams.modal) {
+					dialog.width(oldWidth + 15);
+					dialog.height(oldHeight + 15);
+				}
+				internalDialog.width(oldWidth);
+				internalContent.width(oldWidth);
+				internalContent.height(oldHeight);
+				
+				// enable resizing
+				$('.ui-resizable-handle', dialog).show();
+			} else {
+				// store previous size
+				dialog.data({
+					'oldWidth' : internalContent.width(),
+					'oldHeight': internalContent.height()
+				});
+				if (!initParams.modal) {
+					dialog.css({
+						'width' : '100%',
+						'height': '100%'
+					});
+				}
+				internalDialog.css({
+					'width' : '100%',
+					'height': '100%'
+				});
+				internalContent.css('width', 'calc(100% - 15px)');
+				internalContent.height(internalDialog.height() - 20);
+				
+				// disable resizing
+				$('.ui-resizable-handle', dialog).hide();
+			}
+			// center the dialog
+			 (initParams.modal ? internalDialog : dialog).position(
+					 dialog.data('isCreateInParentWindow') ?
+								{
+									'my' : 'center center',
+									'at' : 'center center',
+									'of' : window.parent
+								}
+								:
+								{
+									'my' : 'top',
+									'at' : 'center top',
+									'of' : window
+								}
+			);
+			
+			internalContent.trigger('resizestop');
+		});
+		
+		if (initParams.startMaximized) {
+			maximizeButton.click();
+		}
+		
+	    $('.dialogMinimise', dialog).click(function() {
+	        if (dialog.hasClass('dialogMin')) {
+	        	restoreMinimisedDialog(dialog);
+	        } else {
+		    	// swap icon
+	            $('.dialogMinimise i', dialog).toggleClass('fa-minus').toggleClass('fa-clone');
+	        	// store current left position
+	            dialog.data('oldLeft', dialog.css('left'));
+	        	dialog.css('left', $('.dialogMin').length * 260 + 5 + 'px');
+	        	dialog.addClass('dialogMin');
+	        	// remove overlay
+	        	dialog.siblings('.modal-backdrop').hide();
+	            // disable maximising 
+	        	$('.dialogMaximise', dialog).hide();
+	        	// disable rezising
+	            $('.ui-resizable-handle', dialog).hide();
+	            if (draggable) {
+	            	modalDialog.draggable('disable');
+	            }
+	            //enable scrolling of the parent's content
+	            dialog.parent().removeClass("modal-open");		        	
+	        };
+	    });
+	    
+	    dialog.on('hide.bs.modal', function(){
+	    	shiftMinimisedDialogs($(this));
+	    });
+	} else {
+		$('.dialogMinimise, .dialogMaximise', dialog).remove();
+	}
+	
+	return dialog;
+}
+
+function restoreMinimisedDialog(dialog) {
+	// swap icon
+    $('.dialogMinimise i', dialog).toggleClass('fa-minus').toggleClass('fa-clone');
+	shiftMinimisedDialogs(dialog);
+	// restore old left position
+	dialog.css('left', dialog.data('oldLeft'));
+	dialog.removeClass('dialogMin');
+    dialog.siblings('.modal-backdrop').show();
+    $('.dialogMaximise', dialog).show();
+    $('.ui-resizable-handle', dialog).show();
+    if (dialog.data("isDraggable")) {
+    	var modalDialog = $('.modal-dialog', dialog);
+    	modalDialog.draggable('enable');
+    }
+    //disable scrolling of the parent's content
+    dialog.parent().addClass("modal-open");
+
+	// in case of monitor dialog reload its content. It's required as all monitor dialogs use the same ids for their HTML elements
+	var isMonitorDialog = dialog.data('isMonitorDialog');
+	if (isMonitorDialog) {
+		//hide iframe until it gets loaded
+		$('iframe', dialog).hide();
+		$('iframe', dialog).on('load', function() {
+			$('iframe', dialog).show();
+		});
+		
+		//reload iframe
+	    $('iframe', dialog)["0"].contentWindow.location.reload();
+	}   
+}
+
+/**
+ * Moves other minimised dialogs to the left after the given dialog was restored or closed.
+ */
+function shiftMinimisedDialogs(dialog){
+	var left = dialog.offset().left;
+	$('.dialogMin').each(function(){
+		var thisDialogLeft = $(this).offset().left;
+		// if the dialog was to the right of the given dialog, shift it to left
+		if (left < thisDialogLeft) {
+			$(this).css('left', thisDialogLeft - 260 + 'px');
+		}
+	});
+}
+
+
+/**
+ * Focuses on the dialog. Called from within the contained iframe.
+ */
+function moveDialogToTop(id) {
+	// $('#' + id).dialog('moveToTop');
+}
+
+
+//used by both /lams_central/web/main.jsp and /lams_central/web/lti/addlesson.jsp pages
+function showAuthoringDialog(learningDesignID, relaunchMonitorLessonID){
+	var dialog = showDialog('dialogAuthoring', {
+		'height' : Math.max(300, $(window).height() - 30),
+		'width' : Math.max(600, Math.min(1290, $(window).width() - 60)),
+		'title' : LABELS.AUTHORING_TITLE,
+		'beforeClose' : function(){
+			// if LD was modified, ask the user if he really wants to exit
+			var innerLib = $('iframe', this)[0].contentWindow.GeneralLib,
+				// no innerLib means that an exception occured in Authoring
+				// and the interface is not usable anyway
+				canClose = !innerLib || innerLib.canClose() || confirm(LABELS.NAVIGATE_AWAY_CONFIRM);
+			if (canClose) {
+				$('iframe', this).attr('src', null);
+			} else {
+				return false;
+			}
+		},
+		'open' : function() {
+			var url = LAMS_URL + 'authoring/openAuthoring.do';
+			
+			if (learningDesignID) {
+				url += '?learningDesignID=' + learningDesignID;
+			}
+			
+			// load contents after opening the dialog
+			$('iframe', this).attr({'src' : url, 'id' : 'authoringModal'});
+		}
+	}, true);
+	
+	if (relaunchMonitorLessonID) {
+		dialog.data('relaunchMonitorLessonID', relaunchMonitorLessonID);
+	}
+	
+	// resize the paper when dialog is resized
+	$('.modal-content', dialog).on('resizestop', function() {
+		$('iframe', this)[0].contentWindow.GeneralLib.resizePaper();
+	});
+}
+
+
+//used by both /lams_central/web/main.jsp and /lams_monitoring/web/monitor.jsp pages
+function showNotificationsDialog(orgID, lessonID) {
+	//check whether current window is a top level one (otherwise it's an iframe or popup)
+	var isTopLevelWindow = window.top == window.self;
+	//calculate width and height based on the dimensions of the window to which dialog is added
+	var dialogWindow = isTopLevelWindow ? $(window) : $(window.parent);
+	
+	// if screen is narrow, then it is much longer
+	var width = Math.max(380, Math.min(800, dialogWindow.width() - 60)),
+		height = width < 798 ? 850 : 650;
+	height = Math.max(380, Math.min(height, dialogWindow.height() - 30));
+		
+	var id = "dialogNotifications" + (lessonID ? "Lesson" + lessonID : "Org" + orgID);
+	showDialog(id, {
+		'data' : {
+			'orgID' : orgID,
+			'lessonID' : lessonID
+		},
+		'height': height,
+		'width' : width,
+		//dialog needs to be added to a top level window to avoid boundary limitations of the interim iframe
+		"isCreateInParentWindow" : !isTopLevelWindow,		
+		'title' : LABELS.EMAIL_NOTIFICATIONS_TITLE,
+		'open' : function() {
+			var dialog = $(this);
+			// if lesson ID is given, use lesson view; otherwise use course view
+			if (lessonID) {
+				// load contents after opening the dialog
+				$('iframe', dialog).attr('src', LAMS_URL
+					+ 'monitoring/emailNotifications/getLessonView.do?lessonID='
+					+ lessonID);
+			} else {
+				$('iframe', dialog).attr('src', LAMS_URL
+					+ 'monitoring/emailNotifications/getCourseView.do?organisationID='
+					+ orgID);
+			}
+		}
+	}, true);
+}
+
+
+//used by Page.tag
+function showMyPortraitDialog() {
+	showDialog("dialogMyProfile", {
+		'title' : "Portrait",
+		'modal' : true,
+		'width' : Math.max(380, Math.min(770, $(window).width() - 60)),
+		'open' : function() {
+			var dialog = $(this);
+			// load contents after opening the dialog
+			$('iframe', dialog).attr('src', LAMS_URL + 'index.do?redirect=portrait&isReturnButtonHidden=true');
+			
+			// in case of mobile devices allow iframe scrolling
+			if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
+			    setTimeout(function() {
+			    	dialog.css({
+			    		'overflow-y' : 'scroll',
+			    		'-webkit-overflow-scrolling' : 'touch'
+			    	});
+			    },500);
+			}
+		}
+	});
+}
Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -r9f11e3eeced19099731c175fc0f461ab40e281d5 -r7344842c444056d9b34ef71feb165946dd4f64ae
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 9f11e3eeced19099731c175fc0f461ab40e281d5)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 7344842c444056d9b34ef71feb165946dd4f64ae)
@@ -23,7 +23,8 @@
 	margin: 0;
 }
 
-.monitoring-page-wrapper input:focus, .monitoring-page-wrapper button:focus, .monitoring-page-wrapper textarea:focus {
+.monitoring-page-wrapper input:focus, .monitoring-page-wrapper button:focus,
+	.monitoring-page-wrapper textarea:focus {
 	outline: none;
 }
 
@@ -46,14 +47,14 @@
 }
 
 .monitoring-page-wrapper .component-sidebar .menu-li a svg .c,
-.monitoring-page-wrapper .component-sidebar .menu-li a svg .d,
-.monitoring-page-wrapper .component-sidebar .menu-li a svg rect {
+	.monitoring-page-wrapper .component-sidebar .menu-li a svg .d,
+	.monitoring-page-wrapper .component-sidebar .menu-li a svg rect {
 	stroke: #ACB5CC;
 	transition: all .3s ease;
 }
 
 .monitoring-page-wrapper .component-sidebar .menu-li a svg .a,
-.monitoring-page-wrapper .component-sidebar .menu-li a svg .b {
+	.monitoring-page-wrapper .component-sidebar .menu-li a svg .b {
 	stroke: transparent;
 	transition: all .3s ease;
 }
@@ -64,35 +65,42 @@
 	transition: all .3s ease;
 }
 
-.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(3) a svg .a {
+.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(3) a svg .a
+	{
 	stroke: #ACB5CC;
 }
 
-.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(3) a svg .b {
+.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(3) a svg .b
+	{
 	stroke: transparent;
 }
 
 .monitoring-page-wrapper .component-sidebar .menu-li:nth-child(2):hover a svg rect.b,
-.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(2):hover a svg .d,
-.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(2):hover a svg .c {
+	.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(2):hover a svg .d,
+	.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(2):hover a svg .c
+	{
 	stroke: #3C42E0;
 }
 
 .monitoring-page-wrapper .component-sidebar .menu-li:nth-child(2).active a svg rect.b,
-.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(2).active a svg .d,
-.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(2).active a svg .c {
+	.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(2).active a svg .d,
+	.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(2).active a svg .c
+	{
 	stroke: #3C42E0;
 }
 
-.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(3):hover a svg .a {
+.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(3):hover a svg .a
+	{
 	stroke: #3C42E0;
 }
 
-.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(3).active a svg .a {
+.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(3).active a svg .a
+	{
 	stroke: #3C42E0;
 }
 
-.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(4):hover a svg path.b {
+.monitoring-page-wrapper .component-sidebar .menu-li:nth-child(4):hover a svg path.b
+	{
 	fill: #3C42E0;
 }
 
@@ -130,8 +138,6 @@
 	display: block;
 }
 */
-
-
 .monitoring-page-wrapper .content-left {
 	-ms-flex: 0 0 26.5rem;
 	flex: 0 0 26.5rem;
@@ -154,7 +160,6 @@
 	justify-content: space-between;
 }
 
-
 .monitoring-page-wrapper .graph-star-col {
 	width: 5rem;
 }
@@ -228,7 +233,6 @@
 	background-color: #fff;
 }
 
-
 .monitoring-page-wrapper .user-map-col {
 	background-image: url(/lams/images/components/lines.png);
 	background-size: cover;
@@ -342,7 +346,8 @@
 	margin: 0;
 }
 
-.monitoring-page-wrapper #required-tasks-content .label.contribute-activity-title {
+.monitoring-page-wrapper #required-tasks-content .label.contribute-activity-title
+	{
 	font-family: mont-bold, sans-serif;
 }
 
@@ -360,7 +365,13 @@
 	box-shadow: 0px 3px 6px #3C42E040;
 }
 
-.monitoring-page-wrapper #required-tasks-content button.contribute-go-button {
+.monitoring-page-wrapper #required-tasks-content button.contribute-gate-opened-button
+	{
+	background-color: #05CCD6;
+}
+
+.monitoring-page-wrapper #required-tasks-content button.contribute-go-button
+	{
 	min-width: 5rem;
 }
 
@@ -386,7 +397,6 @@
 	color: #3C42E0;
 }
 
-
 .monitoring-page-wrapper .content-left.content-left1 {
 	-ms-flex: 0 0 100%;
 	flex: 0 0 100%;
@@ -517,7 +527,8 @@
 	padding-left: 4.9rem;
 }
 
-.monitoring-page-wrapper .table-sorter-top.row .table-user-progress .progress-col {
+.monitoring-page-wrapper .table-sorter-top.row .table-user-progress .progress-col
+	{
 	width: 23rem;
 	max-width: calc(100% - 4rem);
 	height: .4rem;
@@ -528,7 +539,8 @@
 	margin-top: 1rem;
 }
 
-.monitoring-page-wrapper .table-sorter-top.row .table-user-progress .progress-col .progress1 {
+.monitoring-page-wrapper .table-sorter-top.row .table-user-progress .progress-col .progress1
+	{
 	float: left;
 	height: 100%;
 	background-color: #FFCF60;
@@ -627,9 +639,10 @@
 	margin-top: 3rem;
 }
 
-.monitoring-page-wrapper #chart-2, .monitoring-page-wrapper #chart-3, .monitoring-page-wrapper #chart-4,
-.monitoring-page-wrapper #chart-5, .monitoring-page-wrapper #chart-6, .monitoring-page-wrapper #chart-7,
-.monitoring-page-wrapper #chart-8 {
+.monitoring-page-wrapper #chart-2, .monitoring-page-wrapper #chart-3,
+	.monitoring-page-wrapper #chart-4, .monitoring-page-wrapper #chart-5,
+	.monitoring-page-wrapper #chart-6, .monitoring-page-wrapper #chart-7,
+	.monitoring-page-wrapper #chart-8 {
 	height: 256px !important
 }
 
@@ -704,12 +717,14 @@
 }
 
 /* Track */
-.monitoring-page-wrapper .table-content-right-inner::-webkit-scrollbar-track {
+.monitoring-page-wrapper .table-content-right-inner::-webkit-scrollbar-track
+	{
 	background: #fff;
 }
 
 /* Handle */
-.monitoring-page-wrapper .table-content-right-inner::-webkit-scrollbar-thumb {
+.monitoring-page-wrapper .table-content-right-inner::-webkit-scrollbar-thumb
+	{
 	background: #20639B;
 	border-radius: 45px;
 }
@@ -743,21 +758,25 @@
 	background-color: transparent;
 }
 
-.monitoring-page-wrapper .cd-timeline__block:nth-child(odd) .cd-timeline__content {
+.monitoring-page-wrapper .cd-timeline__block:nth-child(odd) .cd-timeline__content
+	{
 	border-right: 4px solid #1AD9B2;
 }
 
-.monitoring-page-wrapper .cd-timeline__block:nth-child(odd) .cd-timeline__content:before {
+.monitoring-page-wrapper .cd-timeline__block:nth-child(odd) .cd-timeline__content:before
+	{
 	right: -18px;
 	left: inherit;
 	border-left-color: #1AD9B2;
 }
 
-.monitoring-page-wrapper .cd-timeline__block:nth-child(even) .cd-timeline__content {
+.monitoring-page-wrapper .cd-timeline__block:nth-child(even) .cd-timeline__content
+	{
 	border-left: 4px solid #FFCF60;
 }
 
-.monitoring-page-wrapper .cd-timeline__block:nth-child(even) .cd-timeline__content:before {
+.monitoring-page-wrapper .cd-timeline__block:nth-child(even) .cd-timeline__content:before
+	{
 	left: -18px !important;
 	right: inherit !important;
 	border-right-color: #FFCF60;
@@ -798,7 +817,7 @@
 	padding-right: 1.5rem;
 }
 
-..monitoring-page-wrapper cd-timeline__content p span {
+.monitoring-page-wrapper cd-timeline__content p span {
 	float: right;
 }
 
@@ -808,4 +827,328 @@
 
 .monitoring-page-wrapper .progress1.green {
 	background-color: #1AD9B2 !important;
+}
+
+
+.dialogContainer {
+  display: none;
+  -webkit-overflow-scrolling: touch !important;
+  overflow: auto;
+}
+
+.dialogContainer iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.dialogContainer .modal-body {
+  height: 100%;
+  max-height: calc(100% - 56px);
+  padding: 10px;
+  overflow: auto;
+}
+
+
+/********** CANVAS STYLES **********/
+#canvas-container div#sequenceCanvas {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	-o-user-select: none;
+	user-select: none;
+}
+
+#canvas-container div#sequenceCanvas div.learner-icon-container {
+	position: relative;
+}
+
+#canvas-container div#sequenceCanvas div.learner-icon-container div.learner-icon,
+	#completedLearnersContainer div.learner-icon {
+	border-radius: 20px;
+	background-color: #FFFFFF;
+}
+
+#canvas-container div#sequenceCanvas div.learner-icon-container div.learner-icon, div#sequenceCanvas div.learner-icon-container div.more-learner-icon
+	{
+	position: absolute;
+}
+
+#completedLearnersContainer {
+	overflow: auto;
+}
+
+#completedLearnersContainer div.learner-icon {
+	margin-right: 5px;
+	min-width: 35px;
+}
+
+#canvas-container div#sequenceCanvas div.more-learner-icon, #completedLearnersContainer div.more-learner-icon
+	{
+	display: inline-block;
+	width: 35px;
+	height: 35px;
+	line-height: 35px;
+	font-size: 13px;
+	border-radius: 20px;
+	cursor: pointer;
+	background-color: #e7e7e7;
+	text-align: center;
+}
+
+#canvas-container div#sequenceCanvas div.learner-icon.learner-searched {
+	border: red 3px solid;
+	border-radius: 25px;
+	z-index: 109 !important;
+}
+
+#canvas-container div#sequenceCanvas div.portrait-generic-sm.learner-icon.learner-searched
+	{
+	border: none;
+}
+
+#canvas-container div#sequenceCanvas div.portrait-generic-sm.learner-icon.learner-searched::before
+	{
+	border: red 3px solid;
+	border-radius: 25px;
+}
+
+#canvas-container div#sequenceCanvas .activity-requires-attention {
+	cursor: pointer;
+	width: 16px;
+	height: 16px;
+}
+
+#completedLearnersContainer #completedLessonLearnersIcon {
+	width: 35px;
+	height: 35px;
+	margin-right: 5px;
+}
+
+#canvas-container div#sequenceCanvas svg.svg-learning-design {
+	display: block;
+	overflow: visible;
+}
+
+#canvas-container div#sequenceCanvas svg.svg-learning-design g.gate svg {
+	display: none;
+}
+
+#canvas-container img#sequenceCanvasLoading {
+	padding: 5px 0 0 100px;
+	display: none;
+}
+
+#canvas-container .topButtonsContainer #sequenceSearchPhrase {
+	float: right;
+	margin: 6px 5px 5px 0;
+}
+
+#canvas-container .topButtonsContainer #sequenceSearchPhraseIcon {
+	float: right;
+	margin: 9px 7px 5px 0;
+}
+
+#canvas-container .topButtonsContainer #sequenceSearchPhraseClear {
+	float: right;
+	cursor: pointer;
+	margin: 9px 25px 5px 0;
+	visibility: hidden;
+}
+
+#canvas-container .ui-menu-item-wrapper.autocomplete-menu-item-with-portrait {
+	display: flex;
+	justify-content: space-between;
+}
+
+#canvas-container .ui-menu-item-wrapper.autocomplete-menu-item-with-portrait>p {
+	padding-top: 10px;
+}
+
+#canvas-container img#sequenceSearchedLearnerHighlighter {
+	position: absolute;
+	display: none;
+}
+
+#canvas-container div#completedLearnersContainer {
+	display: flex;
+	padding: 4px 0px 3px 5px;
+	border-top: thin dotted #AAAAAA;
+}
+
+#canvas-container div#completedLearnersContainer span {
+	font-family: Verdana;
+	font-size: 10px;
+	cursor: default;
+	vertical-align: top;
+	margin-right: 5px;
+}
+
+#sequenceInfoDialog {
+	cursor: pointer;
+}
+
+#canvas-container .portrait-sm {
+	width: 35px;
+	height: 35px;
+	display: inline-block;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+
+#canvas-container .portrait-md {
+	width: 80px;
+	height: 80px;
+	display: inline-block;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+
+#canvas-container .portrait-lg {
+	width: 200px;
+	height: 200px;
+	display: inline-block;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+
+#canvas-container .portrait-xl {
+	width: 400px;
+	height: 400px;
+	display: inline-block;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+
+#canvas-container .portrait-container-sm {
+	height: 38px;
+	margin-top: 3px;
+}
+
+#canvas-container .portrait-color-0 {
+	color: #001f3f;
+}
+
+#canvas-container .portrait-color-1 {
+	color: #FF851B;
+}
+
+#canvas-container .portrait-color-2 {
+	color: #85144b;
+}
+
+#canvas-container .portrait-color-3 {
+	color: #111111;
+}
+
+#canvas-container .portrait-color-4 {
+	color: #3D9970;
+}
+
+#canvas-container .portrait-color-5 {
+	color: #0074D9;
+}
+
+#canvas-container .portrait-color-6 {
+	color: #FF4136;
+}
+
+#canvas-container .portrait-sm-lineheight {
+	line-height: 32px;
+	vertical-align: top;
+}
+
+#canvas-container .portrait-generic-sm {
+	display: inline-block;
+	height: 35px;
+	vertical-align: middle;
+}
+
+#canvas-container .portrait-generic-sm:before {
+	content: "\f2be";
+	font-family: FontAwesome;
+	font-style: normal;
+	font-size: 35px;
+	font-weight: normal;
+	line-height: 35px;
+}
+
+#canvas-container .portrait-generic-md {
+	display: inline-block;
+	height: 80px;
+	vertical-align: middle;
+}
+
+#canvas-container .portrait-generic-md:before {
+	content: "\f2be";
+	font-family: FontAwesome;
+	font-style: normal;
+	font-size: 80px;
+	font-weight: normal;
+	line-height: 65px;
+}
+
+#canvas-container .portrait-generic-lg {
+	display: inline-block;
+	height: 200px;
+	vertical-align: middle;
+}
+
+#canvas-container .portrait-generic-lg:before {
+	content: "\f2be";
+	font-family: FontAwesome;
+	font-style: normal;
+	font-size: 200px;
+	font-weight: normal;
+	line-height: 200px;
+}
+
+#canvas-container .portrait-generic-xl {
+	display: inline-block;
+	height: 400px;
+	vertical-align: middle;
+}
+
+#canvas-container .portrait-generic-xl:before {
+	content: "\f2be";
+	font-family: FontAwesome;
+	font-style: normal;
+	font-size: 400px;
+	font-weight: normal;
+	line-height: 400px;
+}
+
+#canvas-container .leader-display {
+	margin: 0px;
+}
+
+#canvas-container .leader-display h4 {
+	margin-bottom: 0px;
+}
+
+#canvas-container .popover-link {
+	color: #337ab7 !important;
+}
+
+#canvas-container .popover-link:hover {
+	color: #0E9AEF !important;
+}
+
+#canvas-container .popover-link:focus {
+	color: #0E9AEF !important;
+}
+
+#canvas-container .popover-title {
+	background-color: #dddddd;
+}
+
+#canvas-container .popover-content-with-portrait {
+	min-height: 220px;
+	min-width: 220px;
 }
\ No newline at end of file
Index: lams_monitoring/web/includes/javascript/monitorLesson5.js
===================================================================
diff -u -r9f11e3eeced19099731c175fc0f461ab40e281d5 -r7344842c444056d9b34ef71feb165946dd4f64ae
--- lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision 9f11e3eeced19099731c175fc0f461ab40e281d5)
+++ lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision 7344842c444056d9b34ef71feb165946dd4f64ae)
@@ -1,7 +1,34 @@
- //auto refresh all tabs every 30 seconds
-let autoRefreshInterval = 30 * 1000,
-	autoRefreshIntervalObject = null;
+// ********** GLOBAL VARIABLES **********
+// copy of lesson SVG so it does no need to be fetched every time
+let originalSequenceCanvas = null,
+	// DIV container for lesson SVG
+	// it gets accessed so many times it's worth to cache it here
+	sequenceCanvas = $('#sequenceCanvas'),
+	// switch between SVG original size and fit-to-sreen (enlarge/shrink)
+	learningDesignSvgFitScreen = false,
+// info box show timeout
+	sequenceInfoTimeout = 8000,
+	// which learner was selected in the search box
+	sequenceSearchedLearner = null,
+	// for synchronisation purposes
+	sequenceRefreshInProgress = false,
+	//auto refresh all tabs every 30 seconds
+	autoRefreshInterval = 30 * 1000,
+	autoRefreshIntervalObject = null,
+// when user is doing something, do not auto refresh
+	autoRefreshBlocked = false,
 
+// double tap support
+	tapTimeout = 500,
+	lastTapTime = 0,
+	lastTapTarget = null,
+// popup window size
+	popupWidth = 1280,
+	popupHeight = 720,
+		
+	gateOpenIconPath   = 'images/svg/gateOpen.svg',
+	gateOpenIconData   = null;
+
 function refreshMonitor(tabName, isAuto){
 	if (autoRefreshIntervalObject && !isAuto) {
 		clearInterval(autoRefreshIntervalObject);
@@ -15,6 +42,7 @@
 	}
 	
 	updateLessonTab();
+	updateSequenceTab();
 }
 
 /**
@@ -33,6 +61,12 @@
 			updateContributeActivities(response.contributeActivities);
 		}
 	});
+	
+	/*
+		drawChart('pie', 'chartDiv',
+			  LAMS_URL + 'monitoring/monitoring/getLessonChartData.do?lessonID=' + lessonId,
+			  true);
+	*/
 }
 
 
@@ -84,7 +118,12 @@
 				switch (this.contributionType) {
 					case 3  : 
 					case 12 : if (this.isComplete) {
-						 		entryContent += '<span class="badge badge-success">' + LABELS.CONTRIBUTE_OPENED_GATE + '</span>';
+						 		entryContent += '<div class="pull-right"><button class="contribute-gate-opened-button btn btn-success" '
+						 					 + 'onClick="javascript:openPopUp(\'' + this.url 
+						 					 + '\',\'ContributeActivity\', 800, 1280, true)" '
+						 					 + 'title="' + LABELS.CONTRIBUTE_OPENED_GATE_TOOLTIP + '">'
+						 					 + LABELS.CONTRIBUTE_OPENED_GATE 
+						 					 + '</button></div>';
 							} else {
 								entryContent += '<div class="btn-group" role="group"><button onClick="javascript:openGateNow('
                                     + contributeActivity.activityID + ')" type="button" class="btn" title="' 
@@ -129,6 +168,1110 @@
 	});
 }
 
+
+function initSequenceTab(){
+	var learnerGroupDialogContents = $('#learnerGroupDialogContents');
+	$('#learnerGroupDialogForceCompleteButton, #learnerGroupDialogForceCompleteAllButton', learnerGroupDialogContents).click(function() {
+		var dialog = $('#learnerGroupDialog'),
+			// are we moving selected learners or all of learners who are currently in the activity
+			moveAll = $(this).attr('id') == 'learnerGroupDialogForceCompleteAllButton',
+			selectedLearners = moveAll ? null : $('.dialogList div.dialogListItemSelected', dialog),
+			// go to "force complete" mode, similar to dragging user to an activity
+			activityId = dialog.data('ajaxProperties').data.activityID,
+			dropArea = sequenceCanvas.add('#completedLearnersContainer');
+		dropArea.css('cursor', 'pointer')
+				.one('click', function(event) {
+					dropArea.off('click').css('cursor', 'default');
+					if (moveAll) {
+						// setting learners as 'true' is a special switch meaning "move all"
+						forceComplete(activityId, true, event.pageX, event.pageY);
+					} else {
+						var learners = [];
+						selectedLearners.each(function(){
+							var learner = $(this);
+							learners.push({
+								'id'     : learner.attr('userId'),
+								'name'   : learner.text()
+							});
+						});
+						forceComplete(activityId, learners, event.pageX, event.pageY);
+					}
+				});
+		dialog.modal('hide');
+		
+		if (moveAll) {
+			alert(LABELS.FORCE_COMPLETE_CLICK.replace('[0]', ''));
+		} else {
+			var learnerNames = '';
+			selectedLearners.each(function(){
+				learnerNames += $(this).text() + ', ';
+			});
+			learnerNames = learnerNames.slice(0, -2);
+			alert(LABELS.FORCE_COMPLETE_CLICK.replace('[0]', '"' + learnerNames + '"'));
+		}
+	});
+	
+	$('#learnerGroupDialogViewButton', learnerGroupDialogContents).click(function() {
+		var dialog = $('#learnerGroupDialog'),
+			selectedLearner = $('.dialogList div.dialogListItemSelected', dialog);
+		if (selectedLearner.length == 1) {
+			// open pop up with user progress in the given activity
+			openPopUp(selectedLearner.attr('viewUrl'), "LearnActivity", popupHeight, popupWidth, true);
+		}
+	});
+	
+	$('#learnerGroupDialogEmailButton', learnerGroupDialogContents).click(function() {
+		var dialog = $('#learnerGroupDialog'),
+			selectedLearner = $('.dialogList div.dialogListItemSelected', dialog);
+		if (selectedLearner.length == 1) {
+			showEmailDialog(selectedLearner.attr('userId'));
+		}
+	});
+	
+	$('#learnerGroupDialogCloseButton', learnerGroupDialogContents).click(function(){
+		$('#learnerGroupDialog').modal('hide');
+	});
+	
+    // initialise lesson dialog
+	var learnerGroupDialog = showDialog('learnerGroupDialog',{
+			'autoOpen'  : false,
+			'width'     : 450,
+			'height'	: 450,
+			'resizable' : true,
+			'open'      : function(){
+				autoRefreshBlocked = true;
+				// until operator selects an user, buttons remain disabled
+				$('button.learnerGroupDialogSelectableButton').blur().prop('disabled', true);
+			},
+			'close' 	: function(){
+				autoRefreshBlocked = false;
+			}
+		}, false);
+	
+	$('.modal-body', learnerGroupDialog).empty().append(learnerGroupDialogContents.show());
+	
+	// search for users with the term the Monitor entered
+	$('.dialogSearchPhrase', learnerGroupDialog).autocomplete({
+			'source' : LAMS_URL + "monitoring/monitoring/autocomplete.do?scope=lesson&lessonID=" + lessonId,
+			'delay'  : 700,
+			'select' : function(event, ui){
+				var phraseField = $(this),
+					dialog = $('#learnerGroupDialog');
+			    // learner's ID in ui.item.value is not used here
+				phraseField.val(ui.item.label);
+				$('.dialogSearchPhraseClear', dialog).css('visibility', 'visible');
+				// reset to page 1
+				dialog.data('ajaxProperties').data.pageNumber = 1;
+				showLearnerGroupDialog();
+				return false;
+			}
+		})
+		// run the real search when the Monitor presses Enter
+		.keypress(function(e){
+			if (e.which == 13) {
+				var phraseField = $(this),
+					dialog = $('#learnerGroupDialog');
+				
+				phraseField.autocomplete("close");
+				if (phraseField.val()) {
+					$('.dialogSearchPhraseClear', dialog).css('visibility', 'visible');
+				}
+				// reset to page 1
+				dialog.data('ajaxProperties').data.pageNumber = 1;
+				showLearnerGroupDialog();
+			}
+		});
+	
+	// search for users with the term the Monitor entered
+	$("#sequenceSearchPhrase").autocomplete( {
+		'source' : LAMS_URL + "monitoring/monitoring/autocomplete.do?scope=lesson&lessonID=" + lessonId,
+		'delay'  : 700,
+		'response' : function(event, ui) {
+			$.each(ui.content, function(){
+				// only add portrait if user has got one
+				let valueParts = this.value.split('_');
+				if (valueParts.length > 1) {
+					this.value = valueParts[0];
+					// portrait div will be added as text, then in open() function below we fix it
+					this.label += definePortrait(valueParts[1], this.value, STYLE_SMALL, true, LAMS_URL);
+				}
+			});
+		},
+		'open'   : function(event, ui) {
+			$('.ui-menu-item-wrapper', $(this).autocomplete( "widget" )).each(function(){
+				let menuItem = $(this);
+				// portrait, if exists, was added as text; now we make it proper html
+				menuItem.html(menuItem.text());
+				let portrait = menuItem.children('div');
+				if (portrait.length == 0) {
+					// no portrait, nothing to do
+					return;
+				}
+				// rearrange item contents
+				portrait.detach();
+				let label = $('<p />').text(menuItem.text());
+				// this extra class makes it a flex box
+				menuItem.empty().addClass('autocomplete-menu-item-with-portrait');
+				menuItem.append(label).append(portrait);
+			});
+		},
+		'select' : function(event, ui){
+			// put the learner first name, last name and login into the box
+			$(this).val(ui.item.label);
+			// mark the learner's ID and make him highlighted after the refresh
+			sequenceSearchedLearner = ui.item.value;
+			updateSequenceTab();
+			return false;
+		}
+	});
+	
+	var forceBackwardsDialogContents = $('#forceBackwardsDialogContents');
+	showDialog('forceBackwardsDialog', {
+		'autoOpen'	: false,
+		'modal'     : true,
+		'resizable' : true,
+		'height'	: 300,
+		'width'  	: 400,
+		'title'		: LABELS.FORCE_COMPLETE_BUTTON,
+		'open'      : function(){
+			autoRefreshBlocked = true;
+		},
+		'close' 	: function(){
+			autoRefreshBlocked = false;
+		}
+	}, false);
+	// only need to do this once as then it updates the msg field directly.
+	$('.modal-body', '#forceBackwardsDialog').empty().append($('#forceBackwardsDialogContents').show());
+	
+	$('#forceBackwardsRemoveContentNoButton', forceBackwardsDialogContents).click(function(){
+		var forceBackwardsDialog = $('#forceBackwardsDialog'),
+			learners = forceBackwardsDialog.data('learners'),
+			moveAll = learners === true;
+		forceCompleteExecute(moveAll ? null : learners,
+			 moveAll ? forceBackwardsDialog.data('currentActivityId') : null,
+			 forceBackwardsDialog.data('activityId'),
+			 false);
+		forceBackwardsDialog.modal('hide');
+	});
+
+	$('#forceBackwardsRemoveContentYesButton', forceBackwardsDialogContents).click(function(){
+		var forceBackwardsDialog = $('#forceBackwardsDialog');
+			learners = forceBackwardsDialog.data('learners'),
+			moveAll = learners === true;
+		forceCompleteExecute(moveAll ? null : learners,
+			 moveAll ? forceBackwardsDialog.data('currentActivityId') : null,
+			 forceBackwardsDialog.data('activityId'),
+			 true);
+		forceBackwardsDialog.modal('hide');
+	});
+
+	$('#forceBackwardsCloseButton', forceBackwardsDialogContents).click(function(){
+		$('#forceBackwardsDialog').modal('hide');
+	});
+
+	// small info box on Sequence tab, activated when the tab is showed
+	var sequenceInfoDialog = showDialog('sequenceInfoDialog', {
+		'autoOpen'   : false,
+		'width'      : 300,
+		'modal'      : false, 
+		'resizable'  : false,
+		'draggable'  : false,
+		'title'		 : LABELS.HELP,
+		'open'      : function(){
+			// close after given time
+			setTimeout(function(){
+				$('#sequenceInfoDialog').modal('hide')
+			}, sequenceInfoTimeout);
+		},
+		'close' 	: null,
+		'data'		: {
+			'position' : {
+				'my' : 'left top',
+				'at' : 'left top',
+				'of' : '#sequenceCanvas'
+			}
+		}
+	}, false);
+	$(sequenceInfoDialog).click(function(){
+		$('#sequenceInfoDialog').modal('hide');
+	}).find('.modal-header').remove();
+	
+	$('#sequenceInfoDialog .modal-body').empty().append($('#sequenceInfoDialogContents').show());
+	
+	canvasFitScreen(learningDesignSvgFitScreen, true);
+}
+
+function updateSequenceTab() {
+	if (sequenceRefreshInProgress) {
+		return;
+	}
+	sequenceRefreshInProgress = true;
+	
+	sequenceCanvas.css('visibility', 'hidden');
+
+	if (originalSequenceCanvas) {
+		// put bottom layer, LD SVG
+		sequenceCanvas.html(originalSequenceCanvas);
+	} else {
+		var exit = loadLearningDesignSVG();
+		if (exit) {
+			// when SVG gets re-created, this update method will be run again
+			sequenceRefreshInProgress = false;
+			return;
+		}
+	}
+	
+	// clear all completed learner icons except the door
+	$('#completedLearnersContainer :not(img#completedLessonLearnersIcon)').remove();
+	
+	var sequenceTopButtonsContainer = $('#sequenceTopButtonsContainer');
+	if ($('img#sequenceCanvasLoading', sequenceTopButtonsContainer).length == 0){
+		$('#sequenceCanvasLoading')
+				.clone().appendTo(sequenceTopButtonsContainer)
+				.css('display', 'block');
+	}
+	
+	$.ajax({
+		dataType : 'json',
+		url : LAMS_URL + 'monitoring/monitoring/getLessonProgress.do',
+		cache : false,
+		data : {
+			'lessonID'  : lessonId,
+			'searchedLearnerId' : sequenceSearchedLearner
+		},		
+		success : function(response) {
+			// activities have uiids but no ids, set it here
+			$.each(response.activities, function(){
+				$('g[uiid="' + this.uiid + '"]', sequenceCanvas).attr('id', this.id);
+			});
+
+			// remove the loading animation
+			$('img#sequenceCanvasLoading', sequenceTopButtonsContainer).remove();
+
+			var learnerCount = 0;
+			$.each(response.activities, function(index, activity){
+				var activityGroup = $('g[id="' + activity.id + '"]', sequenceCanvas),
+					isGate = [3,4,5,14].indexOf(activity.type) > -1;
+					
+				learnerCount += activity.learnerCount;
+				
+				if (isGate) {
+					var gateClosedIcon = activityGroup.find('.gateClosed');
+					
+					if (activity.gateOpen && gateClosedIcon.length > 0) {
+						if (!gateOpenIconData) {
+							// if SVG is not cached, get it synchronously
+							$.ajax({
+								url : LAMS_URL + gateOpenIconPath,
+								async : false,
+								dataType : 'text',
+								success : function(response) {
+									gateOpenIconData = response;
+								}
+							});		
+						}
+						
+						 $(gateOpenIconData).clone().attr({
+								x : gateClosedIcon.attr('x'),
+								y : gateClosedIcon.attr('y'),
+								width : gateClosedIcon.attr('width'),
+								height : gateClosedIcon.attr('height'),
+							}).appendTo(activityGroup)
+							  .show();
+							
+						gateClosedIcon.remove();
+					} else {
+						gateClosedIcon.show();
+					}
+				}
+				
+				if (response.contributeActivities) {
+					$.each(response.contributeActivities, function(){
+						if (activity.id == this.activityID) {
+							 activity.requiresAttention = true;
+							 return false;
+						}
+					});
+				}
+				
+				// put learner and attention icons on each activity shape
+				addActivityIcons(activity);
+			});
+			
+			// modyfing SVG in DOM does not render changes, so we need to reload it
+			sequenceCanvas.html(sequenceCanvas.html());
+			// SVG needs resizing after reload
+			window.parent.resizeSequenceCanvas();
+			
+			// only now show SVG so there is no "jump" when resizing
+			sequenceCanvas.css('visibility', 'visible');
+			
+			if (sequenceSearchedLearner != null && !response.searchedLearnerFound) {
+				// the learner has not started the lesson yet, display an info box
+				sequenceClearSearchPhrase();
+				$('#sequenceInfoDialogContents').html(LABELS.PROGRESS_NOT_STARTED);
+				$('#sequenceInfoDialog').modal('show');
+			}
+			
+			var learnerTotalCount = learnerCount + response.completedLearnerCount;
+			$('#learnersStartedPossibleCell').html('<span id="tour-learner-count">'+learnerTotalCount + ' / ' + response.numberPossibleLearners+'</span>');
+			addCompletedLearnerIcons(response.completedLearners, response.completedLearnerCount, learnerTotalCount);
+			
+			$.each(response.activities, function(activityIndex, activity){
+				addActivityIconsHandlers(activity);
+				
+				if (activity.url) {
+					var activityGroup = $('g[id="' + activity.id + '"]');
+					activityGroup.css('cursor', 'pointer');
+					dblTap(activityGroup, function(){  
+						// double click on activity shape to open Monitoring for this activity
+						openPopUp(LAMS_URL + activity.url, "MonitorActivity", popupHeight, popupWidth, true, true);
+					});
+				}
+			});
+			
+			// remove any existing popovers
+			$('.popover[role="tooltip"]').remove();
+			
+			initializePortraitPopover(LAMS_URL, 'large', 'right');
+
+			// update the cache global values so that the contributions & the Live Edit buttons will update
+			lockedForEdit = response.lockedForEdit;
+			lockedForEditUserId = response.lockedForEditUserId;
+			lockedForEditUsername = response.lockedForEditUsername; 
+			updateLiveEdit();
+			
+			sequenceRefreshInProgress = false;
+		}
+	});
+}
+
+
+
+function updateLiveEdit() {
+	if ( liveEditEnabled ) {
+		if ( lockedForEdit ) {
+			if ( userId == lockedForEditUserId ) {
+				$("#liveEditButton").removeClass('btn-default');
+				$("#liveEditButton").addClass('btn-primary');
+				$("#liveEditButton").show();
+				$("#liveEditWarning").hide();
+				$("#liveEditWarning").text("");
+			} else {
+				$("#liveEditButton").removeClass('btn-primary');
+				$("#liveEditButton").addClass('btn-default');
+				$("#liveEditButton").hide();
+				$("#liveEditWarning").text(LABELS.LIVE_EDIT_WARNING.replace("%0",lockedForEditUsername));
+				$("#liveEditWarning").show();
+			}
+		} else {
+			$("#liveEditButton").removeClass('btn-primary');
+			$("#liveEditButton").addClass('btn-default');
+			$("#liveEditButton").show();
+			$("#liveEditWarning").hide();
+			$("#liveEditWarning").text("");
+		}
+	} else {
+		$("#liveEditButton").hide();
+		$("#liveEditWarning").hide();
+	}
+}
+
+
+function loadLearningDesignSVG() {
+	var exit = false;
+	// fetch SVG just once, since it is immutable
+	$.ajax({
+		dataType : 'text',
+		url : LAMS_URL + 'home/getLearningDesignThumbnail.do?',
+		async : false,
+		cache : false,
+		data : {
+			'ldId'      : ldId
+		},
+		success : function(response) {
+			originalSequenceCanvas = response;
+			sequenceCanvas = $('#sequenceCanvas').html(originalSequenceCanvas);
+		},
+		error : function(error) {
+			exit = true;
+			// the LD SVG is missing, try to re-generate it; if it is an another error, fail
+			if (error.status != 404) {
+				return;
+			}
+
+			// iframe just to load Authoring for a single purpose, generate the SVG
+			var frame = $('<iframe />').appendTo('body').css('visibility', 'hidden');
+			frame.on('load', function(){
+				// disable current onload handler as closing the dialog reloads the iframe
+				frame.off('load');
+				
+				// call svgGenerator.jsp code to store LD SVG on the server
+				var win = frame[0].contentWindow || frame[0].contentDocument;
+				$(win.document).ready(function(){
+				    // when LD opens, make a callback which save the thumbnail and displays it in current window
+					win.GeneralLib.openLearningDesign(ldId, function(){
+						result = win.GeneralLib.saveLearningDesignImage();
+						frame.remove();
+						if (result) {
+							// load the image again
+							updateSequenceTab();
+						}
+					});
+				});
+			});
+			// load svgGenerator.jsp to render LD SVG
+			frame.attr('src', LAMS_URL + 'authoring/generateSVG.do?selectable=false');
+		}
+	});
+	
+	return exit;
+}
+
+
+/**
+ * Forces given learners to move to activity indicated on SVG by coordinated (drag-drop)
+ */
+function forceComplete(currentActivityId, learners, x, y) {
+	autoRefreshBlocked = true;
+	
+	var foundActivities = [],
+		targetActivity = null,
+		// if "true", then we are moving all learners from the given activity
+		// otherwise it is a list of selected learners IDs
+		moveAll = learners === true;
+	// check all activities and "users who finished lesson" bar
+	$('g.svg-activity', sequenceCanvas).add('#completedLearnersContainer').each(function(){
+		// find which activity learner was dropped on
+		var act = $(this),
+			coord = {
+					'x' : act.offset().left,
+					'y' : act.offset().top
+				}
+		if (act.is('g')) {
+			var box = act[0].getBBox();
+			coord.width = box.width;
+			coord.height = box.height;
+		} else {
+			// end of lesson container
+			coord.width = act.width();
+			coord.height = act.height();
+		}
+		
+		coord.x2 = coord.x + coord.width;
+		coord.y2 = coord.y + coord.height;
+		
+		if (x >= coord.x && x <= coord.x2 && y >= coord.y && y <= coord.y2) {
+			foundActivities.push(act);
+		}
+	});
+	
+	$.each(foundActivities, function(){
+		if (this.hasClass('svg-activity-floating')) {
+			// no force complete to support activities
+			targetActivity = null;
+			return false;
+		}
+		// the enveloping OptionalActivity has priority
+		if (targetActivity == null || this.hasClass('svg-activity-optional')) {
+			targetActivity = this;
+		}
+	});
+	
+	if (!targetActivity) {
+		return;
+	}
+	
+	var targetActivityId = null,
+		executeForceComplete = false,
+		isEndLesson = !targetActivity.is('g'),
+		learnerNames = '';
+	
+	if (!moveAll) {
+		$.each(learners, function(){
+			learnerNames += this.name + ', ';
+		});
+		learnerNames = '"' + learnerNames.slice(0, -2) + '"';
+	}
+
+	
+	if (isEndLesson) {
+		executeForceComplete =  currentActivityId && confirm(LABELS.FORCE_COMPLETE_END_LESSON_CONFIRM
+				.replace('[0]', learnerNames));
+	} else {
+		var targetActivityId = +targetActivity.attr('id');
+		if (currentActivityId != targetActivityId) {
+			var targetActivityName = targetActivity.hasClass('svg-activity-gate') ? "Gate" : targetActivity.find('.svg-activity-title-label').text(),
+				moveBackwards = currentActivityId == null;
+			
+			// check if target activity is before current activity
+			if (currentActivityId) {
+				$.ajax({
+					dataType : 'text',
+					url : LAMS_URL + 'monitoring/monitoring/isActivityPreceding.do',
+					async : false,
+					cache : false,
+					data : {
+						'activityA' 	 :  targetActivityId,
+						'activityB'		 :  currentActivityId
+					},
+					success : function(response) {
+						moveBackwards = response == 'true';
+					}
+				});
+			}
+			
+			// check if the target activity was found or we are moving the learner from end of lesson
+			if (moveBackwards) {
+				// move the learner backwards
+				var msgString = LABELS.FORCE_COMPLETE_REMOVE_CONTENT
+						.replace('[0]', learnerNames).replace('[1]', targetActivityName);
+				$('#forceBackwardsMsg', '#forceBackwardsDialog').html(msgString);				
+				$('#forceBackwardsDialog').data({
+					'learners' : learners,
+					'currentActivityId' : currentActivityId,
+					'activityId': targetActivityId});
+				$('#forceBackwardsDialog').modal('show');
+				// so autoRefreshBlocked = false is not set
+				return;
+			} else {
+				// move the learner forward
+				executeForceComplete = confirm(LABELS.FORCE_COMPLETE_ACTIVITY_CONFIRM
+							.replace('[0]', learnerNames).replace('[1]', targetActivityName));
+			}
+		}
+	}
+	
+	if (executeForceComplete) {
+		forceCompleteExecute(moveAll ? null : learners, moveAll ? currentActivityId : null, targetActivityId, false);
+	}
+
+	autoRefreshBlocked = false;
+}
+
+
+/**
+ * Tell server to force complete the learner.
+ */
+function forceCompleteExecute(learners, moveAllFromActivityId, activityId, removeContent) {
+	var learnerIds = '';
+	if (learners) {
+		$.each(learners, function() {
+			learnerIds += this.id + ',';
+		});
+		learnerIds = learnerIds.slice(0, -1);
+	}
+	
+	var data={
+		'lessonID'   		    : lessonId,
+		// either we list selected learners to move
+		// or we move all learners from the given activity
+		'learnerID'  		    : learnerIds,
+		'moveAllFromActivityID' : moveAllFromActivityId,
+		'activityID' 		    : activityId,
+		'removeContent'		    : removeContent
+	};
+	data[csrfTokenName] = csrfTokenValue;
+	
+	$.ajax({
+		url : LAMS_URL + 'monitoring/monitoring/forceComplete.do',
+		type : 'POST',
+		dataType : 'text',
+		cache : false,
+		data : data,
+		success : function(response) {
+			// inform user of result
+			alert(response);
+									
+			// progress changed, show it to monitor
+			refreshMonitor('sequence');
+		}
+	});
+}
+
+
+/**
+ * Draw user and attention icons on top of activities.
+ */
+function addActivityIcons(activity) {
+	if (activity.learnerCount == 0 && !activity.requiresAttention) {
+		return;
+	}
+	
+	// fint the activity in SVG
+	var coord = getActivityCoordinates(activity);
+	if (!coord) {
+		return;
+	}
+	
+	// add group of users icon
+	var learningDesignSvg = $('svg.svg-learning-design', sequenceCanvas),
+		isTool = activity.type == 1,
+		isGrouping = activity.type == 2,
+		// branching and gates require extra adjustments
+		isBranching =  [10,11,12,13].indexOf(activity.type) > -1,
+		isGate = [3,4,5,14].indexOf(activity.type) > -1,
+		isContainer = [6,7].indexOf(activity.type) > -1,
+		activityGroup = $('g[id="' + activity.id + '"]', learningDesignSvg),
+		requiresAttentionIcon = activity.requiresAttention ? 
+				$('<img />')
+					.attr({
+						'id'    : 'act' + activity.id + 'attention',
+						'src'   : LAMS_URL + 'images/exclamation.svg',
+						'title' : LABELS.CONTRIBUTE_ATTENTION
+					})
+					.addClass('activity-requires-attention')
+				: null,
+		allLearnersIcon = activity.learnerCount > 0 ?
+				$('<div />')
+					.attr('id', 'act' + activity.id + 'learnerGroup')
+					.addClass('more-learner-icon')
+				: null;
+		
+
+	if (isTool || isGrouping) {
+		if (activity.learnerCount > 0) {
+			// if learners reached the activity, make room for their icons: make activity icon and label smaller and move to top
+			$('svg', activityGroup).attr({
+				'x'     : coord.x + 20,
+				'y'     : coord.y + 3,
+				'width' : '30px',
+				'height': '30px'
+			});
+			
+			// switch from wide banner to narrow one
+			$('.svg-tool-banner-narrow', activityGroup).show();
+			$('.svg-tool-banner-wide', activityGroup).hide();
+			
+			$('.svg-activity-title-label', activityGroup).parent('foreignObject').remove();
+			$('<text>').text(activity.title.length < 20 ? activity.title : activity.title.substring(0, 20) + '...')
+					   .attr({
+							'x' : coord.x + 55,
+							'y' : coord.y + 20
+						})
+						.addClass('svg-activity-title-label svg-activity-title-label-small')
+						.appendTo(activityGroup);
+						
+			var learnersContainer = $('<div />').addClass('learner-icon-container');
+			$('<foreignObject />').append(learnersContainer).appendTo(activityGroup).attr({
+				'x' : coord.x + 20,
+				'y' : coord.y + 40,
+				'width'  : 184,
+				'height' : 40
+			});
+			
+			$.each(activity.learners, function(learnerIndex, learner){
+				if (learnerIndex >= 5 && activity.learnerCount > 6) {
+					return false;					
+				}
+				$(definePortrait(learner.portraitId, learner.id, STYLE_SMALL, true, LAMS_URL))
+					  .css({
+						'left'        : learnerIndex * (activity.learnerCount < 5 ? 46 : 28)  + 'px',
+						'z-index'     : 100 + learnerIndex,
+						'padding-top' : '2px'
+					  })
+					  .addClass('new-popover learner-icon')
+					  .attr({
+						'id'            : 'act' + activity.id + 'learner' + learner.id,
+						'data-id'       : 'popover-' + learner.id,
+						'data-toggle'   : 'popover',
+						'data-portrait' : learner.portraitId,
+						'data-fullname' : getLearnerDisplayName(learner)
+					  })
+					  .appendTo(learnersContainer);
+			});
+			
+			if (activity.learnerCount > 6) {
+				allLearnersIcon
+					  .css({
+						'left'     : '140px',
+						'z-index'  : 108,
+						'margin-top' : '1px'
+					  })
+					  .text('+' + (activity.learnerCount - 5))
+					  .appendTo(learnersContainer);
+			}
+		}
+		
+		if (requiresAttentionIcon) {
+			$('<foreignObject />').append(requiresAttentionIcon).appendTo(activityGroup).attr({
+				'x' : coord.x + 180,
+				'y' : coord.y - 1,
+				'width'  : 20,
+				'height' : 20
+			});
+		}
+	} else if (isGate) {
+		if (activity.learnerCount > 0) {
+			$('<foreignObject />').append(allLearnersIcon).appendTo(activityGroup).attr({
+				'x' : coord.x + 20,
+				'y' : coord.y + 20,
+				'width' : 40,
+				'height' : 40
+			});
+			allLearnersIcon.text(activity.learnerCount);
+		}
+		
+		if (requiresAttentionIcon) {
+			$('<foreignObject />').append(requiresAttentionIcon).appendTo(activityGroup).attr({
+				'x' : coord.x + 25,
+				'y' : coord.y -  5,
+				'width'  : 20,
+				'height' : 20
+			});
+		}
+	} else if (isBranching) {
+		if (activity.learnerCount > 0) {
+			$('<foreignObject />').append(allLearnersIcon).appendTo(activityGroup).attr({
+				'x' : coord.x,
+				'y' : coord.y,
+				'width' : 40,
+				'height' : 40
+			});
+			allLearnersIcon.text(activity.learnerCount);
+		}		
+		
+		if (requiresAttentionIcon) {
+			$('<foreignObject />').append(requiresAttentionIcon).appendTo(activityGroup).attr({
+				'x' : coord.x + 8,
+				'y' : coord.y - 28,
+				'width'  : 20,
+				'height' : 20
+			});
+		}
+	} else if (isContainer) {
+		if (activity.learnerCount > 0) {
+			$('<foreignObject />').append(allLearnersIcon).appendTo(activityGroup).attr({
+				'x' : coord.x + coord.width - 20,
+				'y' : coord.y - 17,
+				'width' : 40,
+				'height' : 40
+			});
+			allLearnersIcon.text(activity.learnerCount);
+		}
+		
+		if (requiresAttentionIcon) {
+			$('<foreignObject />').append(requiresAttentionIcon).appendTo(activityGroup).attr({
+				'x' : coord.x,
+				'y' : coord.y + 15,
+				'width'  : 20,
+				'height' : 20
+			});
+		}
+	}
+}
+
+
+/**
+ * After SVG refresh, add click/dblclick/drag handlers to icons.
+ */
+function addActivityIconsHandlers(activity) {
+	if (activity.learnerCount == 0 && !activity.requiresAttention) {
+		return;
+	}
+
+	// gate activity does not allows users' view
+	var usersViewable = [3,4,5,14].indexOf(activity.type) == -1;
+	
+	if (activity.learners){
+		$.each(activity.learners, function(learnerIndex, learner){
+			let learnerIcon = $('div#act' + activity.id + 'learner' + learner.id, sequenceCanvas)
+							  .css('cursor', 'pointer')
+							  // drag learners to force complete activities
+							  .draggable({
+								'appendTo'    : '.svg-learner-draggable-area',
+								'containment' : '.svg-learner-draggable-area',
+							    'distance'    : 20,
+							    'scroll'      : false,
+							    'cursorAt'	  : {'left' : 10, 'top' : 15},
+							    'helper' : function(){
+							    	return learnerIcon.clone();
+							    },
+								'start' : function(){
+									 autoRefreshBlocked = true;
+								},
+								'stop' : function(event, ui) {
+									var learners = [{
+										'id'   : learner.id,
+										'name' : getLearnerDisplayName(learner, true)
+									}];
+									// jQuery droppable does not work for SVG, so this is a workaround
+									forceComplete(activity.id, learners, ui.offset.left, ui.offset.top);
+								}
+							});
+			
+			if (usersViewable) {
+				dblTap(learnerIcon, function(event){
+					 // double click on learner icon to see activity from his perspective
+					var url = LAMS_URL + 'monitoring/monitoring/getLearnerActivityURL.do?userID=' 
+						               + learner.id + '&activityID=' + activity.id + '&lessonID=' + lessonId;
+					openPopUp(url, "LearnActivity", popupHeight, popupWidth, true);
+				});
+			}
+			
+			if (learner.id == sequenceSearchedLearner){
+				// do it here instead of addActivityIcons()
+				// as in that method the icons are added to the document yet
+				// and they have no offset for calculations
+				highlightSearchedLearner(learnerIcon);
+			}
+		});
+	}
+		
+	if (activity.learnerCount > 0){
+		$('#act' + activity.id + 'learnerGroup', sequenceCanvas)
+		   .click(function(event){
+				 // double click on learner group icon to see list of learners
+				var ajaxProperties = {
+						url : LAMS_URL + 'monitoring/monitoring/getCurrentLearners.do',
+						data : {
+							'activityID' : activity.id
+						}
+					};
+				showLearnerGroupDialog(ajaxProperties, activity.title, false, true, usersViewable, false);
+			});
+	}
+	
+	if (activity.requiresAttention){
+		$('#act' + activity.id + 'attention', sequenceCanvas).click(function(event){
+			event.stopPropagation();
+			// switch to first tab where attention prompts are listed
+			if ($('#tblmonitor-tab-content').length == 0) {
+				// wer are in regular monitor, so switch to first tab to perform tasks
+				doSelectTab(1);
+			} else {
+				// we are in TBL mode, so switch back to regular monitor to perform tasks
+				switchToRegularMonitor(true);
+			}
+			 
+		});
+	}
+}
+
+
+/**
+ * Add learner icons in "finished lesson" bar.
+ */
+function addCompletedLearnerIcons(learners, learnerCount, learnerTotalCount) {
+	var iconsContainer = $('#completedLearnersContainer');
+	
+	if (learners) {
+		// create learner icons, along with handlers
+		$.each(learners, function(learnerIndex, learner){
+			if (learnerIndex >= 23) {
+				// display only first few learners, not all of them
+				return false;
+			}
+			
+			let icon = $(definePortrait(learner.portraitId, learner.id, STYLE_SMALL, true, LAMS_URL))
+				  .addClass('new-popover learner-icon')
+				  .attr({
+					'id'            : 'learner-complete-' + learner.id,
+					'data-id'       : 'popover-' + learner.id,
+					'data-toggle'   : 'popover',
+					'data-portrait' : learner.portraitId,
+					'data-fullname' : getLearnerDisplayName(learner)
+				  })
+				// drag learners to force complete activities
+				  .draggable({
+					'appendTo'    : '.svg-learner-draggable-area',
+					'containment' : '.svg-learner-draggable-area',
+				    'distance'    : 20,
+				    'scroll'      : false,
+				    'cursorAt'	  : {'left' : 10, 'top' : 15},
+					'helper'      : function(){
+						// copy of the icon for dragging
+						return icon.clone();
+					},
+					'start' : function(){
+						autoRefreshBlocked = true;
+					},
+					'stop' : function(event, ui) {
+						var learners = [{
+							'id'   : learner.id,
+							'name' : getLearnerDisplayName(learner, true)
+						}];
+						// jQuery droppable does not work for SVG, so this is a workaround
+						forceComplete(null, learners, ui.offset.left, ui.offset.top);
+					}
+				})
+				.appendTo(iconsContainer);
+			
+			if (learner.id == sequenceSearchedLearner){
+				highlightSearchedLearner(icon);
+			}
+		});
+		
+		
+	$('<div />')
+	  .addClass('more-learner-icon')
+	  .text(learnerCount + '/' + learnerTotalCount)
+	  .appendTo(iconsContainer)
+      .click(function(){
+			var ajaxProperties = {
+					url : LAMS_URL + 'monitoring/monitoring/getCurrentLearners.do',
+					data : {
+						'lessonID'   : lessonId
+					}
+				};
+			showLearnerGroupDialog(ajaxProperties, LABELS.LEARNER_FINISHED_DIALOG_TITLE, false, true, false, false);
+		});
+	}
+}
+
+
+/**
+ * Extracts activity using SVG attributes.
+ */
+function getActivityCoordinates(activity){
+	// fix missing coordinates, not set by Flash Authoring
+	if (!activity.x) {
+		activity.x = 0;
+	}
+	if (!activity.y) {
+		activity.y = 0;
+	}
+	
+	var group = $('g[id="' + activity.id + '"]', sequenceCanvas);
+	if (group.length == 0) {
+		return;
+	}
+	
+	return {
+		'x'     : +group.data('x'),
+		'y'     : +group.data('y'),
+		'x2'    : +group.data('x') + +group.data('width'),
+		'y2'    : +group.data('y') + +group.data('height'),
+		'width' : +group.data('width'),
+		'height': +group.data('height'),
+	}
+}
+
+
+/**
+ * Opens Authoring for live edit.
+ */
+function openLiveEdit(){
+	if (confirm(LABELS.LIVE_EDIT_CONFIRM)) {
+		$.ajax({
+			dataType : 'text',
+			url : LAMS_URL + 'monitoring/monitoring/startLiveEdit.do',
+			cache : false,
+			async : false,
+			data : {
+				'ldId'      : ldId
+			},
+			success : function(response) {
+				if (response) {
+					alert(response);
+				} else {
+					window.parent.showAuthoringDialog(ldId, lessonId);
+					closeMonitorLessonDialog();
+				}
+			}
+		});	
+	}
+}
+
+
+/**
+ * Adjusts sequence canvas (SVG) based on space available in the dialog.
+ */
+function resizeSequenceCanvas(width, height){
+	var svg = $('svg.svg-learning-design', sequenceCanvas);
+	
+	if (svg.length === 0){
+		// skip resizing if the SVG has not loaded (yet)
+		return;
+	}
+	
+	var viewBoxParts = svg.attr('viewBox').split(' '),
+		svgHeight = +viewBoxParts[3],
+		sequenceCanvasHeight = learningDesignSvgFitScreen ? height - 140 : Math.max(svgHeight + 10, height - 140);
+	
+	// By default sequenceCanvas div is as high as SVG, but for SVG vertical centering
+	// we want it to be as large as available space (iframe height minus toolbars)
+	// or if SVG is higher, then as high as SVG
+	sequenceCanvas.css({
+		'height'  : sequenceCanvasHeight + 'px'
+	});
+	
+	// if we want SVG to fit screen, then we make it as wide & high as sequenceCanvas div
+	// but no more than extra 30% because small SVGs look weird if they are too large
+	if (learningDesignSvgFitScreen) {
+		var svgWidth = +viewBoxParts[2],
+			sequenceCanvasWidth = sequenceCanvas.width();
+		svg.attr({
+			'preserveAspectRatio' : 'xMidYMid meet',
+			'width' : Math.min(svgWidth * 1.3, sequenceCanvasWidth - 10),
+			'height': Math.min(svgHeight * 1.3, sequenceCanvasHeight - 10)
+		})
+	}
+}
+
+function canvasFitScreen(fitScreen, skipResize) {
+	learningDesignSvgFitScreen = fitScreen;
+	if (!skipResize) {
+		updateSequenceTab();
+	}
+	
+	if (fitScreen) {
+		$('#canvasFitScreenButton').hide();
+		$('#canvasOriginalSizeButton').show();
+	} else {
+		$('#canvasFitScreenButton').show();
+		$('#canvasOriginalSizeButton').hide();
+	}
+}
+
+
+/**
+ * Formats learner name.
+ */
+function getLearnerDisplayName(learner, raw) {
+	return raw ? learner.lastName + ', ' + learner.firstName + ' (' + learner.login + ')' + (learner.group ? ' - ' + learner.group : '')
+			   : escapeHtml(learner.lastName) + ', ' + escapeHtml(learner.firstName) + ' (' + escapeHtml(learner.login) + ')' 
+			   	 + (learner.group ? ' - ' + escapeHtml(learner.group) : '');
+}
+
+
+/**
+ * Escapes HTML tags to prevent XSS injection.
+ */
+function escapeHtml(unsafe) {
+	if (unsafe == undefined) {
+		return "";
+	}
+	
+    return unsafe
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+
+/**
+ * Change order of learner sorting in group dialog.
+ */
+function sortLearnerGroupList() {
+	var learnerGroupDialog = $('#learnerGroupDialog'),
+		sortIcon = $('td.sortCell span', learnerGroupDialog),
+		ajaxProperties = learnerGroupDialog.data('ajaxProperties'),
+		// reverse current order after click
+		orderAscending = !ajaxProperties.data.orderAscending;
+		
+	if (orderAscending) {
+		sortIcon.removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-n');
+		} else {
+		sortIcon.removeClass('ui-icon-triangle-1-n').addClass('ui-icon-triangle-1-s');
+		}
+	
+	ajaxProperties.data.orderAscending = orderAscending;
+	// refresh the list
+	showLearnerGroupDialog();
+}
+	
 function openPopUp(url, title, h, w, status, forceNewWindow) {
 
 	var width = screen.width;
@@ -146,4 +1289,34 @@
 			+ ",resizable=yes,scrollbars=yes,status=" + status
 			+ ",menubar=no, toolbar=no"
 			+ ",top=" + top + ",left=" + left);
+}
+
+/**
+ * Works as dblclick for mobile devices.
+ */
+function dblTap(elem, dblClickFunction) {
+ 	 // double tap detection on mobile devices; it works also for mouse clicks
+	 // temporarly switched to click as jQuery mobile was removed for bootstrapping
+	 elem.click(function(event) {
+		// was the second click quick enough after the first one?
+		var currentTime = new Date().getTime(),
+			tapLength = currentTime - lastTapTime;
+		lastTapTime = currentTime;
+		
+		if (lastTapTarget && lastTapTarget.classList.contains('learner-icon') && tapLength < 10) {
+			// after clicking learner icon there is a propagation to activity, which must be ignored
+			// we can not stop propagation completetly as force complete stops working
+			return;
+		}
+		
+		// is the second click on the same element as the first one?
+		if (event.currentTarget == lastTapTarget) {
+			if (tapLength < tapTimeout && tapLength > 0) {
+				event.preventDefault();
+				dblClickFunction(event);
+			}
+		}
+		
+		lastTapTarget = event.currentTarget;
+	});
 }
\ No newline at end of file
Index: lams_monitoring/web/monitor5.jsp
===================================================================
diff -u -r9f11e3eeced19099731c175fc0f461ab40e281d5 -r7344842c444056d9b34ef71feb165946dd4f64ae
--- lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision 9f11e3eeced19099731c175fc0f461ab40e281d5)
+++ lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision 7344842c444056d9b34ef71feb165946dd4f64ae)
@@ -5,20 +5,27 @@
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>LAMS Monitor</title>
-		
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap4.min.css">
+	
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap5.min.css">
 	<link rel="stylesheet" href="<lams:LAMSURL/>includes/font-awesome/css/font-awesome.min.css">
 	<link rel="stylesheet" href="<lams:LAMSURL/>css/components.css">
 	<link rel="stylesheet" href="<lams:WebAppURL/>css/components-monitoring.css">
 	<link rel="stylesheet" href="<lams:WebAppURL/>css/components-monitoring-responsive.css">
 	
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap4.bundle.min.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/chart.bundle.min.js"></script>
-	<script type="text/javascript" src="<lams:WebAppURL/>includes/javascript/monitorLesson5.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/portrait.js"></script>
+	<lams:JSImport src="includes/javascript/dialog5.js" />
+	<lams:JSImport src="includes/javascript/monitorLesson5.js" relative="true" />
 	<script type="text/javascript">
+		<!-- Some of the following settings will be used in progressBar.js -->
 		var lessonId = ${lesson.lessonID},
+			userId = '<lams:user property="userID"/>',
 			ldId = ${lesson.learningDesignID},
+			liveEditEnabled = ${enableLiveEdit && lesson.liveEditEnabled},
 			LAMS_URL = '<lams:LAMSURL/>',
 			csrfToken = '<csrf:tokenname/> : <csrf:tokenvalue/>',
 			csrfTokenName = '<csrf:tokenname/>',
@@ -53,8 +60,6 @@
 				SAVE_BUTTON : '<c:out value="${SAVE_BUTTON_VAR}" />',
 				<fmt:message key="button.cancel" var="CANCEL_BUTTON_VAR"/>
 				CANCEL_BUTTON : '<c:out value="${CANCEL_BUTTON_VAR}" />',
-				<fmt:message key="learner.finished.count" var="LEARNER_FINISHED_COUNT_VAR"/>
-				LEARNER_FINISHED_COUNT : '<c:out value="${LEARNER_FINISHED_COUNT_VAR}" />',
 				<fmt:message key="learner.finished.dialog.title" var="LEARNER_FINISHED_DIALOG_TITLE_VAR"/>
 				LEARNER_FINISHED_DIALOG_TITLE : '<c:out value="${LEARNER_FINISHED_DIALOG_TITLE_VAR}" />',
 				<fmt:message key="lesson.enable.presence.alert" var="LESSON_PRESENCE_ENABLE_ALERT_VAR"/>
@@ -143,8 +148,10 @@
 				CONTRIBUTE_OPEN_GATE_BUTTON : '<c:out value="${CONTRIBUTE_OPEN_GATE_BUTTON_VAR}" />',
 				<fmt:message key="button.task.gate.open.tooltip" var="CONTRIBUTE_OPEN_GATE_TOOLTIP_VAR"/>
 				CONTRIBUTE_OPEN_GATE_TOOLTIP : '<c:out value="${CONTRIBUTE_OPEN_GATE_TOOLTIP_VAR}" />',
-				<fmt:message key="label.task.gate.opened" var="CONTRIBUTE_OPENED_GATE_VAR"/>
+				<fmt:message key="button.task.gate.opened" var="CONTRIBUTE_OPENED_GATE_VAR"/>
 				CONTRIBUTE_OPENED_GATE : '<c:out value="${CONTRIBUTE_OPENED_GATE_VAR}" />',
+				<fmt:message key="button.task.gate.opened.tooltip" var="CONTRIBUTE_OPENED_GATE_TOOLTIP_VAR"/>
+				CONTRIBUTE_OPENED_GATE_TOOLTIP : '<c:out value="${CONTRIBUTE_OPENED_GATE_TOOLTIP_VAR}" />',
 				<fmt:message key="lesson.task.attention" var="CONTRIBUTE_ATTENTION_VAR"/>
 				CONTRIBUTE_ATTENTION : '<c:out value="${CONTRIBUTE_ATTENTION_VAR}" />',
 				<fmt:message key="button.help" var="BUTTON_HELP_VAR"/>
@@ -192,7 +199,6 @@
 				<fmt:message key="label.person.editing.lesson" var="LIVE_EDIT_WARNING_VAR"><fmt:param value="%0"/></fmt:message>
 				LIVE_EDIT_WARNING: '<c:out value="${LIVE_EDIT_WARNING_VAR}" />'
 			};
-			
 		$(document).ready(function(){
 			$('.hamburger').click(function(){
 				$(this).toggleClass('active');
@@ -231,6 +237,7 @@
 				}
 			});
 			
+			initSequenceTab();
 			refreshMonitor();
 		});
 	</script>
@@ -355,14 +362,36 @@
 					</div>
 				</div>
 			</div>
-			<div class="col-12 col-md-9 content-right">
-				<div class="user-map-col h-100">
-					<img src="<lams:LAMSURL/>images/components/user-map.png" alt="#" />
-					<div class="map-pn">
-						<span><img src="<lams:LAMSURL/>images/components/plus.svg" alt="#" /></span>
-						<span><img src="<lams:LAMSURL/>images/components/minus.svg" alt="#" /></span>
-					</div>
+			<div id="canvas-container" class="svg-learner-draggable-area h-100 col-12 col-md-9 content-right">
+				<div id="sequenceTopButtonsContainer" class="topButtonsContainer">
+					<a id="liveEditButton" class="btn btn-sm btn-default" style="display:none" title="<fmt:message key='button.live.edit.tooltip'/>"
+				       href="#" onClick="javascript:openLiveEdit()">
+						<i class="fa fa-pencil"></i> <span class="hidden-xs"><fmt:message key='button.live.edit'/></span>
+					</a>
+					<a id="canvasFitScreenButton" class="btn btn-sm btn-default" title="<fmt:message key='button.canvas.fit.screen.tooltip'/>"
+				       href="#" onClick="javascript:canvasFitScreen(true)">
+						<i class="fa fa-arrows-alt"></i> <span class="hidden-xs"><fmt:message key='button.canvas.fit.screen'/></span>
+					</a>
+					<a id="canvasOriginalSizeButton" class="btn btn-sm btn-default" title="<fmt:message key='button.canvas.original.size.tooltip'/>"
+				       href="#" onClick="javascript:canvasFitScreen(false)">
+						<i class="fa fa-arrow-circle-o-up"></i> <span class="hidden-xs"><fmt:message key='button.canvas.original.size'/></span>
+					</a>
 				</div>
+				<div id="sequenceCanvas"></div>
+				<div id="completedLearnersContainer" class="mt-2" title="<fmt:message key='force.complete.end.lesson.tooltip' />">
+					<img id="completedLessonLearnersIcon" src="<lams:LAMSURL/>images/completed.svg" />
+				</div>
+				<img id="sequenceCanvasLoading"
+				     src="<lams:LAMSURL/>images/ajax-loader-big.gif" />
+				<img id="sequenceSearchedLearnerHighlighter"
+				     src="<lams:LAMSURL/>images/pedag_down_arrow.gif" />
+				<!--
+				<img src="<lams:LAMSURL/>images/components/user-map.png" alt="#" />
+				<div class="map-pn">
+					<span><img src="<lams:LAMSURL/>images/components/plus.svg" alt="#" /></span>
+					<span><img src="<lams:LAMSURL/>images/components/minus.svg" alt="#" /></span>
+				</div>
+				-->
 			</div>
 		</div>
 		<div class="row">
@@ -384,5 +413,26 @@
 	</div>
 </div>
 
+<div id="sequenceInfoDialogContents" class="dialogContainer">
+  <fmt:message key="sequence.help.info"/>
+</div>
+
+<div id="forceBackwardsDialogContents" class="dialogContainer">
+	<div id="forceBackwardsMsg"></div>
+       <div class="pull-right mt-3">
+
+              <button id="forceBackwardsRemoveContentNoButton" class="btn btn-primary me-1">
+                      <span><fmt:message key="force.complete.remove.content.no"/></span>
+              </button>
+
+              <button id="forceBackwardsRemoveContentYesButton" class="btn btn-primary me-1">
+                      <span><fmt:message key="force.complete.remove.content.yes" /></span>
+              </button>
+
+              <button id="forceBackwardsCloseButton" class="btn btn-secondary">
+                      <span><fmt:message key="button.close" /></span>
+              </button>
+      </div>
+</div>
 </body>
 </lams:html>
\ No newline at end of file