Index: lams_tool_assessment/web/includes/javascript/chart.js
===================================================================
diff -u
--- lams_tool_assessment/web/includes/javascript/chart.js	(revision 0)
+++ lams_tool_assessment/web/includes/javascript/chart.js	(revision 52c0736c3d1adbba1c561772f11a79194356e247)
@@ -0,0 +1,182 @@
+function drawCompletionCharts(toolContentId, animate) {
+	$.ajax({
+		'url' : WEB_APP_URL + 'monitoring/getCompletionChartsData.do',
+		'data': {
+			'toolContentId' : toolContentId
+		},
+		'dataType' : 'json',
+		'success'  : function(data) {
+			// draw charts for the first time
+			drawActivityCompletionChart(data, animate);
+			drawAnsweredQuestionsChart(data, animate);
+		}
+	});
+	
+	if (activityCompletionChart == null && answeredQuestionsChart == null && COMPLETION_CHART_UPDATE_INTERVAL > 0) {
+		if (typeof completionChartInterval != 'undefined' && completionChartInterval) {
+			window.clearInterval(completionChartInterval);
+		}
+		
+		// set up update interval for the charts
+		completionChartInterval = window.setInterval(function(){
+			drawCompletionCharts(toolContentId, animate);
+		}, COMPLETION_CHART_UPDATE_INTERVAL);
+	}
+}
+
+function drawActivityCompletionChart(data, animate){
+	var newData = [ data.possibleLearners - data.startedLearners,
+		 			data.startedLearners - data.completedLearners,
+		 			data.completedLearners
+	   			  ];
+	if (activityCompletionChart != null) {
+		// chart already exists, just update data
+		activityCompletionChart.data.datasets[0].data = newData;
+		activityCompletionChart.update();
+		return;
+	}
+	
+	let ctx = document.getElementById('activity-completion-chart').getContext('2d');
+	
+	activityCompletionChart = new Chart(ctx, {
+		type : 'doughnut',
+		borderWidth : 0,
+		data : {
+			elements : {
+				arc : {
+					borderWidth : 0,
+					fontSize : 0,
+				}
+			},
+			datasets : [ {
+				data : newData,
+				backgroundColor : [ 'rgba(5, 204, 214, 1)',
+									'rgba(255, 195, 55, 1)',
+									'rgba(253, 60, 165, 1)',
+								  ],
+				borderWidth : 0,
+			} ],
+			labels : [ LABELS.ACTIVITY_COMPLETION_CHART_POSSIBLE_LEARNERS,
+					   LABELS.ACTIVITY_COMPLETION_CHART_STARTED_LEARNERS,
+					   LABELS.ACTIVITY_COMPLETION_CHART_COMPLETED_LEARNERS ]
+		},
+		options : {
+			layout : {
+				padding : {
+					top: 10
+				}
+			},
+			legend : {
+				position: 'left',
+				labels : {
+					generateLabels : function(chart) {
+						var data = chart.data;
+						if (data.labels.length && data.datasets.length) {
+							return data.labels.map(function(label, i) {
+								var meta = chart.getDatasetMeta(0),
+									style = meta.controller.getStyle(i),
+									value = data.datasets[0].data[i];
+
+								return {
+									text: label + ": " + value,
+									fillStyle: style.backgroundColor,
+									strokeStyle: style.borderColor,
+									lineWidth: style.borderWidth,
+									hidden: isNaN(value) || meta.data[i].hidden,
+
+									// Extra data used for toggling the
+									// correct item
+									index: i
+								};
+							});
+						}
+						return [];
+					}
+				}
+			},
+			title : {
+				display: true,
+				fontSize : '15',
+				text : LABELS.ACTIVITY_COMPLETION_CHART_TITLE
+			},
+			animation : {
+				animateScale : true,
+				animateRotate : true,
+				duration : animate ? 1000 : 0
+			}
+		}
+	});
+}
+
+function drawAnsweredQuestionsChart(data, animate){
+	if (!data.answeredQuestionsByUsers) {
+		return;
+	}
+	
+	var newData = Object.values(data.answeredQuestionsByUsers);
+	if (answeredQuestionsChart != null) {
+		// chart already exists, just update data
+		answeredQuestionsChart.data.datasets[0].data = newData;
+		answeredQuestionsChart.update();
+		return;
+	}
+	
+	let ctx = document.getElementById('answered-questions-chart').getContext('2d');
+	answeredQuestionsChart = new Chart(ctx, {
+		type : 'bar',
+		data : {
+			datasets : [ {
+				data : newData,
+				backgroundColor : 'rgba(255, 195, 55, 1)'
+								  
+			} ],
+			labels :  Object.keys(data.answeredQuestionsByUsers),
+		},
+		options : {
+			layout : {
+				paddint : {
+					top : 30
+				}
+			},
+			legend : {
+				display : false
+			},
+			title : {
+				display: true,
+				fontSize : '15',
+				lineHeight: 3,
+				text : LABELS.ANSWERED_QUESTIONS_CHART_TITLE
+			},
+			animation : {
+				duration : animate ? 1000 : 0
+			},
+			scales : {
+				xAxes : [{
+						scaleLabel : {
+							display : true,
+							labelString : LABELS.ANSWERED_QUESTIONS_CHART_X_AXIS
+						}
+					}
+				],
+				yAxes : [
+					{
+					    ticks : {
+							beginAtZero   : true,
+							stepSize      : 1,
+							maxTicksLimit : 5,
+							// prevent scale to change on each update
+							// set suggested max number of students to 3/4
+							// of all possible learners
+							suggestedMax  : 3 * data.possibleLearners / 4
+						},
+						scaleLabel : {
+							display : true,
+							labelString : LABELS.ANSWERED_QUESTIONS_CHART_Y_AXIS,
+							fontSize : 14
+						}
+					}
+				]
+			}
+		}
+	});
+}
\ No newline at end of file
Index: lams_tool_assessment/web/pages/monitoring/monitoring.jsp
===================================================================
diff -u -r5cd084f4d230ff2f8ee3f69a4e59272af1617598 -r52c0736c3d1adbba1c561772f11a79194356e247
--- lams_tool_assessment/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 5cd084f4d230ff2f8ee3f69a4e59272af1617598)
+++ lams_tool_assessment/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 52c0736c3d1adbba1c561772f11a79194356e247)
@@ -39,26 +39,43 @@
  		
 		<script type="text/javascript" src="${lams}includes/javascript/portrait.js"></script>
 		<script>
-			// pass settings to monitorToolSummaryAdvanced.js
-			var submissionDeadlineSettings = {
-				lams: '<lams:LAMSURL />',
-				submissionDeadline: '${submissionDeadline}',
-				submissionDateString: '${submissionDateString}',
-				setSubmissionDeadlineUrl: '<c:url value="/monitoring/setSubmissionDeadline.do"/>?<csrf:token/>',
-				toolContentID: '${param.toolContentID}',
-				messageNotification: '<fmt:message key="monitor.summary.notification" />',
-				messageRestrictionSet: '<fmt:message key="monitor.summary.date.restriction.set" />',
-				messageRestrictionRemoved: '<fmt:message key="monitor.summary.date.restriction.removed" />'
-			},
-			confidenceLevelsSettings = {
-				type: "${assessment.confidenceLevelsType}",
-				LABEL_NOT_CONFIDENT : '<fmt:message key="label.not.confident" />',
-				LABEL_CONFIDENT : '<fmt:message key="label.confident" />',
-				LABEL_VERY_CONFIDENT : '<fmt:message key="label.very.confident" />',
-				LABEL_NOT_SURE : '<fmt:message key="label.not.sure" />',
-				LABEL_SURE : '<fmt:message key="label.sure" />',
-				LABEL_VERY_SURE : '<fmt:message key="label.very.sure" />'
-			};
+			var WEB_APP_URL = '<lams:WebAppURL />',
+				LABELS = {
+					<fmt:message key="label.monitoring.summary.completion" var="ACTIVITY_COMPLETION_CHART_TITLE_VAR"/>
+					ACTIVITY_COMPLETION_CHART_TITLE : '<c:out value="${ACTIVITY_COMPLETION_CHART_TITLE_VAR}" />',
+					<fmt:message key="label.monitoring.summary.completion.possible" var="ACTIVITY_COMPLETION_CHART_POSSIBLE_LEARNERS_VAR"/>
+					ACTIVITY_COMPLETION_CHART_POSSIBLE_LEARNERS : '<c:out value="${ACTIVITY_COMPLETION_CHART_POSSIBLE_LEARNERS_VAR}" />',
+					<fmt:message key="label.monitoring.summary.completion.started" var="ACTIVITY_COMPLETION_CHART_STARTED_LEARNERS_VAR"/>
+					ACTIVITY_COMPLETION_CHART_STARTED_LEARNERS : '<c:out value="${ACTIVITY_COMPLETION_CHART_STARTED_LEARNERS_VAR}" />',	
+					<fmt:message key="label.monitoring.summary.completion.completed" var="ACTIVITY_COMPLETION_CHART_COMPLETED_LEARNERS_VAR"/>
+					ACTIVITY_COMPLETION_CHART_COMPLETED_LEARNERS : '<c:out value="${ACTIVITY_COMPLETION_CHART_COMPLETED_LEARNERS_VAR}" />',	
+					<fmt:message key="label.monitoring.summary.answered.questions" var="ANSWERED_QUESTIONS_CHART_TITLE_VAR"/>
+					ANSWERED_QUESTIONS_CHART_TITLE : '<c:out value="${ANSWERED_QUESTIONS_CHART_TITLE_VAR}" />',
+					<fmt:message key="label.monitoring.summary.answered.questions.x.axis" var="ANSWERED_QUESTIONS_CHART_X_AXIS_VAR"/>
+					ANSWERED_QUESTIONS_CHART_X_AXIS : '<c:out value="${ANSWERED_QUESTIONS_CHART_X_AXIS_VAR}" />',
+					<fmt:message key="label.monitoring.summary.answered.questions.y.axis" var="ANSWERED_QUESTIONS_CHART_Y_AXIS_VAR"/>
+					ANSWERED_QUESTIONS_CHART_Y_AXIS : '<c:out value="${ANSWERED_QUESTIONS_CHART_Y_AXIS_VAR}" />'
+				},
+				// pass settings to monitorToolSummaryAdvanced.js
+			    submissionDeadlineSettings = {
+					lams: '<lams:LAMSURL />',
+					submissionDeadline: '${submissionDeadline}',
+					submissionDateString: '${submissionDateString}',
+					setSubmissionDeadlineUrl: '<c:url value="/monitoring/setSubmissionDeadline.do"/>?<csrf:token/>',
+					toolContentID: '${param.toolContentID}',
+					messageNotification: '<fmt:message key="monitor.summary.notification" />',
+					messageRestrictionSet: '<fmt:message key="monitor.summary.date.restriction.set" />',
+					messageRestrictionRemoved: '<fmt:message key="monitor.summary.date.restriction.removed" />'
+				},
+				confidenceLevelsSettings = {
+					type: "${assessment.confidenceLevelsType}",
+					LABEL_NOT_CONFIDENT : '<fmt:message key="label.not.confident" />',
+					LABEL_CONFIDENT : '<fmt:message key="label.confident" />',
+					LABEL_VERY_CONFIDENT : '<fmt:message key="label.very.confident" />',
+					LABEL_NOT_SURE : '<fmt:message key="label.not.sure" />',
+					LABEL_SURE : '<fmt:message key="label.sure" />',
+					LABEL_VERY_SURE : '<fmt:message key="label.very.sure" />'
+				};
 		</script>
 		<script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
  		<script type="text/javascript" src="${lams}includes/javascript/thickbox.js"></script>
@@ -71,11 +88,13 @@
    		<script type="text/javascript" src="${lams}includes/javascript/d3.js"></script>
  		<script type="text/javascript" src="${lams}includes/javascript/chart.js"></script>
  		<script type="text/javascript" src="${lams}includes/javascript/chart.bundle.min.js"></script>
+ 		<script type="text/javascript" src="<lams:WebAppURL />includes/javascript/chart.js"></script>
  		<script type="text/javascript" src="${lams}includes/javascript/jquery.cookie.js"></script>
 		<script type="text/javascript" src="${lams}includes/javascript/jquery.countdown.js"></script>
  		<script type="text/javascript" src="${lams}includes/javascript/download.js"></script>
- 		<script type="text/javascript" src="${lams}/includes/javascript/portrait.js" ></script>
- 		<script type="text/javascript" src="${lams}/includes/javascript/jquery.jqGrid.confidence-level-formattter.js"></script>
+ 		<script type="text/javascript" src="${lams}includes/javascript/portrait.js" ></script>
+ 		<script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.confidence-level-formattter.js"></script>
+
  		
 		<script>        
 		    function doSelectTab(tabId) {
Index: lams_tool_assessment/web/pages/monitoring/summary.jsp
===================================================================
diff -u -r5cd084f4d230ff2f8ee3f69a4e59272af1617598 -r52c0736c3d1adbba1c561772f11a79194356e247
--- lams_tool_assessment/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 5cd084f4d230ff2f8ee3f69a4e59272af1617598)
+++ lams_tool_assessment/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 52c0736c3d1adbba1c561772f11a79194356e247)
@@ -316,183 +316,9 @@
 		}
 		initInidividualTimeLimitAutocomplete();
 		
-		drawCompletionCharts(false);
+		drawCompletionCharts(${assessment.contentId}, true);
 	});
 
-	function drawCompletionCharts(isUpdate) {
-		$.ajax({
-			'url' : '<lams:WebAppURL />monitoring/getCompletionChartsData.do',
-			'data': {
-				'toolContentId' : ${assessment.contentId}
-			},
-			'dataType' : 'json',
-			'success'  : function(data) {
-				// draw charts for the first time
-				drawActivityCompletionChart(data, isUpdate);
-				drawAnsweredQuestionsChart(data, isUpdate);
-			}
-		});
-		
-		if (!isUpdate) {
-			// set up update interval for the charts
-			window.setInterval(function(){
-				drawCompletionCharts(true);
-			}, COMPLETION_CHART_UPDATE_INTERVAL);
-		}
-	}
-
-	function drawActivityCompletionChart(data, isUpdate){
-		var newData = [ data.possibleLearners - data.startedLearners,
-			 			data.startedLearners - data.completedLearners,
-			 			data.completedLearners
-		   			  ];
-		if (isUpdate) {
-			// chart already exists, just update data
-			activityCompletionChart.data.datasets[0].data = newData;
-			activityCompletionChart.update();
-			return;
-		}
-		
-		let ctx = document.getElementById('activity-completion-chart').getContext('2d');
-		
-		activityCompletionChart = new Chart(ctx, {
-			type : 'doughnut',
-			borderWidth : 0,
-			data : {
-				elements : {
-					arc : {
-						borderWidth : 0,
-						fontSize : 0,
-					}
-				},
-				datasets : [ {
-					data : newData,
-					backgroundColor : [ 'rgba(5, 204, 214, 1)',
-										'rgba(255, 195, 55, 1)',
-										'rgba(253, 60, 165, 1)',
-									  ],
-					borderWidth : 0,
-				} ],
-				labels : [ '<fmt:message key="label.monitoring.summary.completion.possible"/>',
-						   '<fmt:message key="label.monitoring.summary.completion.started"/>',
-						   '<fmt:message key="label.monitoring.summary.completion.completed"/>' ]
-			},
-			options : {
-				layout : {
-					padding : {
-						top: 10
-					}
-				},
-				legend : {
-					position: 'left',
-					labels : {
-						generateLabels : function(chart) {
-							var data = chart.data;
-							if (data.labels.length && data.datasets.length) {
-								return data.labels.map(function(label, i) {
-									var meta = chart.getDatasetMeta(0),
-										style = meta.controller.getStyle(i),
-										value = data.datasets[0].data[i];
-
-									return {
-										text: label + ": " + value,
-										fillStyle: style.backgroundColor,
-										strokeStyle: style.borderColor,
-										lineWidth: style.borderWidth,
-										hidden: isNaN(value) || meta.data[i].hidden,
-
-										// Extra data used for toggling the correct item
-										index: i
-									};
-								});
-							}
-							return [];
-						}
-					}
-				},
-				title : {
-					display: true,
-					fontSize : '15',
-					text : '<fmt:message key="label.monitoring.summary.completion" />'
-				},
-				animation : {
-					animateScale : true,
-					animateRotate : true
-				}
-			}
-		});
-	}
-	
-	function drawAnsweredQuestionsChart(data, isUpdate){
-		if (!data.answeredQuestionsByUsers) {
-			return;
-		}
-		
-		var newData = Object.values(data.answeredQuestionsByUsers);
-		if (isUpdate && answeredQuestionsChart != null) {
-			// chart already exists, just update data
-			answeredQuestionsChart.data.datasets[0].data = newData;
-			answeredQuestionsChart.update();
-			return;
-		}
-		
-		let ctx = document.getElementById('answered-questions-chart').getContext('2d');
-		
-		answeredQuestionsChart = new Chart(ctx, {
-			type : 'bar',
-			data : {
-				datasets : [ {
-					data : newData,
-					backgroundColor : 'rgba(255, 195, 55, 1)'
-									  
-				} ],
-				labels :  Object.keys(data.answeredQuestionsByUsers),
-			},
-			options : {
-				layout : {
-					paddint : {
-						top : 30
-					}
-				},
-				legend : {
-					display : false
-				},
-				title : {
-					display: true,
-					fontSize : '15',
-					lineHeight: 3,
-					text : '<fmt:message key="label.monitoring.summary.answered.questions" />'
-				},
-				scales : {
-					xAxes : [{
-							scaleLabel : {
-								display : true,
-								labelString : '<fmt:message key="label.monitoring.summary.answered.questions.x.axis" />'
-							}
-						}
-					],
-					yAxes : [
-						{
-						    ticks : {
-								beginAtZero   : true,
-								stepSize      : 1,
-								maxTicksLimit : 5,
-								// prevent scale to change on each update
-								// set suggested max number of students to 3/4 of all possible learners
-								suggestedMax  : 3 * data.possibleLearners / 4
-							},
-							scaleLabel : {
-								display : true,
-								labelString : '<fmt:message key="label.monitoring.summary.answered.questions.y.axis" />',
-								fontSize : 14
-							}
-						}
-					]
-				}
-			}
-		});
-	}
-
 	function resizeJqgrid(jqgrids) {
 		jqgrids.each(function(index) {
 			var gridId = $(this).attr('id');