Index: lams_tool_scratchie/web/includes/css/scratchie-learning.scss
===================================================================
diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r4f8d2a6c0dba8057f24e88b943099de10947985a
--- lams_tool_scratchie/web/includes/css/scratchie-learning.scss	(.../scratchie-learning.scss)	(revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80)
+++ lams_tool_scratchie/web/includes/css/scratchie-learning.scss	(.../scratchie-learning.scss)	(revision 4f8d2a6c0dba8057f24e88b943099de10947985a)
@@ -33,4 +33,56 @@
 .jGrowl-message {
 	padding-left: 60px;
 	padding-top: 5px;
+}
+
+.burning-question-container {
+	padding: 0 15px;
+}
+.answer-description {
+	margin-right: 20px;
+}
+.answer-with-confidence-level-portrait {
+	align-items: center;
+}
+.c100.small {
+	font-size: 41px;
+	margin-right: 5px;
+	margin-bottom: 23px;
+}
+.confidence-level-percentage {
+	font-size: 13px;
+    margin-top: 43px;
+    text-align: center;
+}
+hr.hr-confidence-level {
+    border-top: dotted 1px;
+    border-color: #ccc;
+    margin-top: 10px;
+    margin-bottom: 15px;
+}
+.lead {
+	margin-top: 30px;
+}
+[data-toggle="collapse"].collapsed .if-not-collapsed {
+  display: none;
+}
+[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
+  display: none;
+}
+	
+/* confidence levels tooltips */
+.tooltip.top .tooltip-inner {
+    background-color:white;
+    color:black;
+    border:  1px solid #ddd;
+}
+.tooltip.top .tooltip-arrow {
+      border-top-color:grey;
+      color:black;
+}
+.tooltip {
+background-color: transparent;
+border: none;
+color:black;
+box-shadow:none;
 }
\ No newline at end of file
Index: lams_tool_scratchie/web/pages/learning/learning.jsp
===================================================================
diff -u -r18ffef3eac77674c112b895ca5bb1963a399c340 -r4f8d2a6c0dba8057f24e88b943099de10947985a
--- lams_tool_scratchie/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 18ffef3eac77674c112b895ca5bb1963a399c340)
+++ lams_tool_scratchie/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 4f8d2a6c0dba8057f24e88b943099de10947985a)
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="lams">
-	<lams:LAMSURL />
-</c:set>
+<c:set var="lams"><lams:LAMSURL/></c:set>
+<c:set var="tool"><lams:WebAppURL/></c:set>
+<c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request"/>
 <%-- param has higher level for request attribute --%>
 <c:if test="${not empty param.sessionMapID}">
 	<c:set var="sessionMapID" value="${param.sessionMapID}" />
@@ -18,58 +18,41 @@
 <lams:html>
 <lams:head>
 	<title><fmt:message key="label.learning.title" /></title>
-	<%@ include file="/common/header.jsp"%>
+
+	<!-- ********************  CSS ********************** -->
+	<lams:css />
+	<link href="<lams:WebAppURL/>includes/css/scratchie.css" rel="stylesheet" type="text/css">
 	<link rel="stylesheet" type="text/css" href="${lams}css/jquery.countdown.css" />
 	<link rel="stylesheet" type="text/css" href="${lams}css/jquery.jgrowl.css" />
 	<link rel="stylesheet" type="text/css" href="${lams}css/circle.css" />
 	<link rel="stylesheet" type="text/css" href="<lams:WebAppURL/>includes/css/scratchie-learning.css" />
 	<style type="text/css">
-		.burning-question-container {
-			padding: 0 15px;
-		}
-		.answer-description {
-			margin-right: 20px;
-		}
-		.answer-with-confidence-level-portrait {
-			display: flex;
-			flex-wrap: wrap;
-   			align-items: center;
-		}
-		.c100.small {
-			font-size: 41px;
-			margin-right: 5px;
-			margin-bottom: 23px;
-			margin-top: 35px;
-		}
-		.confidence-level-username {
-		    overflow: hidden;
-		    margin-top: -35px;
-		    font-size: 13px;
-		    text-align: center;
-		}
-		.confidence-level-percentage {
-			font-size: 13px;
-		    margin-top: 43px;
-		    text-align: center;
-		}
-		.lead {
-			margin-top: 30px;
-		}
-		[data-toggle="collapse"].collapsed .if-not-collapsed {
-		  display: none;
-		}
-		[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
-		  display: none;
-		}
+
 	</style>
 
+	<!-- ********************  javascript ********************** -->
+	<script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
+	<script>
+		//Resolve name collision between jQuery UI and Twitter Bootstrap
+		$.widget.bridge('uitooltip', $.ui.tooltip);
+	</script>
+	<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>    
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.timeago.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.plugin.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.countdown.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.jgrowl.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.form.js"></script>
 	<script type="text/javascript">
+
+		$(document).ready(function(){
+			//initialize tooltips showing user names next to confidence levels
+			$('[data-toggle="tooltip"]').tooltip();
+		});
+	
 		function scratchImage(itemUid, answerUid, isCorrect) {
 			// first show animation, then put static image
 			var imageSuffix = isCorrect ? 'correct' : 'wrong';
Index: lams_tool_scratchie/web/pages/learning/scratchies.jsp
===================================================================
diff -u -r18ffef3eac77674c112b895ca5bb1963a399c340 -r4f8d2a6c0dba8057f24e88b943099de10947985a
--- lams_tool_scratchie/web/pages/learning/scratchies.jsp	(.../scratchies.jsp)	(revision 18ffef3eac77674c112b895ca5bb1963a399c340)
+++ lams_tool_scratchie/web/pages/learning/scratchies.jsp	(.../scratchies.jsp)	(revision 4f8d2a6c0dba8057f24e88b943099de10947985a)
@@ -1,4 +1,4 @@
-<c:forEach var="item" items="${sessionMap.itemList}" varStatus="status">
+<c:forEach var="item" items="${sessionMap.itemList}">
 	<div class="lead">
         <a name="${item.title}" style="text-decoration:none;color:black"><c:out value="${item.title}" escapeXml="true" /></a>
 	</div>
@@ -41,22 +41,20 @@
 					</c:if>
 				</td>
 
-				<td 
+				<td
 					<c:if test="${fn:length(answer.confidenceLevelDtos) > 0}">class="answer-with-confidence-level-portrait"</c:if>
 				>
 					<div class="answer-description">
 						<c:out value="${answer.description}" escapeXml="false" />
 					</div>
 					
-					<c:if test="${scratchie.confidenceLevelsActivityUiid != null}">
+					<c:if test="${fn:length(answer.confidenceLevelDtos) > 0}">
+						<hr class="hr-confidence-level" />
+					
 						<div>
-							<c:forEach var="confidenceLevelDto" items="${answer.confidenceLevelDtos}" varStatus="status">
-							
-								<div class="c100 p${confidenceLevelDto.level}0 small" style="">
-									<div class="confidence-level-username" style="">
-										${confidenceLevelDto.userName}
-									</div>
-								
+							<c:forEach var="confidenceLevelDto" items="${answer.confidenceLevelDtos}">
+
+								<div class="c100 p${confidenceLevelDto.level}0 small" data-toggle="tooltip" data-placement="top" title="${confidenceLevelDto.userName}">
 									<span>
 										<c:choose>
 											<c:when test="${confidenceLevelDto.portraitUuid == null}">
