Index: lams_tool_survey/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u
--- lams_tool_survey/web/WEB-INF/tags/Alert.tag	(revision 0)
+++ lams_tool_survey/web/WEB-INF/tags/Alert.tag	(revision af1051520a59e1945b25b8be64c5c6a0f7820baf)
@@ -0,0 +1,46 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="close" required="false" rtexprvalue="true"%>
+<%@ attribute name="id" required="false" rtexprvalue="true"%>
+<%@ attribute name="type" required="false" rtexprvalue="true"%>
+
+<c:set var="idName" value="alert-${type}" />
+<c:if test="${not empty id}">
+	<c:set var="idName" value="${id}" />
+</c:if>
+
+<c:set var="alertType" value="info" />
+<c:set var="iconType" value="info-circle" />
+<c:choose>
+	<c:when test="${type == 'danger'}">
+		<c:set var="alertType" value="danger" />
+		<c:set var="iconType" value="times-circle" />
+	</c:when>
+	<c:when test="${type == 'success'}">
+		<c:set var="alertType" value="success" />
+		<c:set var="iconType" value="check-circle" />
+	</c:when>
+	<c:when test="${type == 'warning'}">
+		<c:set var="alertType" value="warning" />
+		<c:set var="iconType" value="exclamation-circle" />
+	</c:when>
+</c:choose>
+
+<div class="row no-gutter">
+	<div class="col-xs-12 col-sm-offset-2 col-sm-8">
+		<div id="${idName}" class="alert alert-${alertType}" style="margin-bottom: 10px; padding: 8px">
+			<div class="media">
+				<div class="media-left">
+					<i class="fa fa-lg fa-${iconType} text-muted"></i>
+				</div>
+				<div class="media-body">
+					<c:if test="${close}">
+							<a href="#" class="close pull-right" data-dismiss="alert" aria-label="close">&times;</a>
+					</c:if>
+					<jsp:doBody />
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
Index: lams_tool_survey/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -rfef442a88ab05c91db8a551081c4abc060d4da5e -raf1051520a59e1945b25b8be64c5c6a0f7820baf
--- lams_tool_survey/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision fef442a88ab05c91db8a551081c4abc060d4da5e)
+++ lams_tool_survey/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision af1051520a59e1945b25b8be64c5c6a0f7820baf)
@@ -1,6 +1,6 @@
 
 <%
-	 /****************************************************************
+	/****************************************************************
 	 * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
 	 * =============================================================
 	 * License Information: http://lamsfoundation.org/licensing/lams/2.0/
@@ -49,10 +49,18 @@
 	<c:set var="buttonTryAgainKey" value="button.try.again" />
 </c:if>
 
-<p>
-	<fmt:message key="${defineLaterMessageKey}" />
-</p>
-<div align="right" class="space-bottom-top">
-	<a href="javascript:location.reload(true);" class="button"><fmt:message
-			key="${buttonTryAgainKey}" /> </a>
+<div class="row no-gutter">
+	<div
+		class="col-xs-12 col-sm-offset-1 col-sm-10 col-lg-offset-2 col-lg-8">
+		<div class="alert alert-info">
+			<fmt:message key="${defineLaterMessageKey}" />
+		</div>
+	</div>
 </div>
+<div class="row no-gutter">
+	<div class="col-xs-12">
+		<a href="javascript:location.reload(true);"
+			class="btn btn-primary pull-right voffset5"><fmt:message
+				key="${buttonTryAgainKey}" /></a>
+	</div>
+</div>
\ No newline at end of file
Index: lams_tool_survey/web/WEB-INF/tags/Page.tag
===================================================================
diff -u
--- lams_tool_survey/web/WEB-INF/tags/Page.tag	(revision 0)
+++ lams_tool_survey/web/WEB-INF/tags/Page.tag	(revision af1051520a59e1945b25b8be64c5c6a0f7820baf)
@@ -0,0 +1,36 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+
+
+
+<div class="row no-gutter">
+	<div class="col-xs-12">
+		<div class="container" id="content">
+			<div class="panel panel-default panel-${type}-page">
+				<div class="panel-heading">
+					<c:if test="${not empty title}">
+						<div class="panel-title panel-${type}-title">
+							<c:out value="${title}" escapeXml="true" />
+							<c:if test="${not empty titleHelpURL}">
+								<a style="float: right" href="${titleHelpURL}" target="_new"><span class="help" style="margin: 0px"></span></a>
+							</c:if>
+						</div>
+					</c:if>
+					<c:if test="${not empty headingContent}">
+						<c:out value="${headingContent}" escapeXml="true" />
+					</c:if>
+				</div>
+				<div class="panel-body panel-${type}-body">
+					<jsp:doBody />
+				</div>
+			</div>
+		</div>
+		<! -- End content container -->
+	</div>
+</div>
Index: lams_tool_survey/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -raf1051520a59e1945b25b8be64c5c6a0f7820baf
--- lams_tool_survey/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_tool_survey/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision af1051520a59e1945b25b8be64c5c6a0f7820baf)
@@ -432,6 +432,14 @@
 		<path>/WEB-INF/tags/DefineLater.tag</path>
    	</tag-file>  
    	<tag-file>
+	    <name>Alert</name>
+		<path>/WEB-INF/tags/Alert.tag</path>
+   	</tag-file>  
+   	<tag-file>
+	    <name>Page</name>
+		<path>/WEB-INF/tags/Page.tag</path>
+   	</tag-file>  
+   	<tag-file>
 	    <name>ImgButtonWrapper</name>
 		<path>/WEB-INF/tags/ImgButtonWrapper.tag</path>
    	</tag-file>
Index: lams_tool_survey/web/common/header.jsp
===================================================================
diff -u -r098d686653002409f33aff0f69b1183e07c1eab3 -raf1051520a59e1945b25b8be64c5c6a0f7820baf
--- lams_tool_survey/web/common/header.jsp	(.../header.jsp)	(revision 098d686653002409f33aff0f69b1183e07c1eab3)
+++ lams_tool_survey/web/common/header.jsp	(.../header.jsp)	(revision af1051520a59e1945b25b8be64c5c6a0f7820baf)
@@ -9,5 +9,8 @@
 <!-- ********************  javascript ********************** -->
 <script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
 <script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.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>  
 
 	
Index: lams_tool_survey/web/common/messages.jsp
===================================================================
diff -u -rec918a1f6fa717d59f8074f508fe798eb3cbdf41 -raf1051520a59e1945b25b8be64c5c6a0f7820baf
--- lams_tool_survey/web/common/messages.jsp	(.../messages.jsp)	(revision ec918a1f6fa717d59f8074f508fe798eb3cbdf41)
+++ lams_tool_survey/web/common/messages.jsp	(.../messages.jsp)	(revision af1051520a59e1945b25b8be64c5c6a0f7820baf)
@@ -1,8 +1,8 @@
 <%-- Error Messages --%>
 <logic:messagesPresent>
-	<p class="warning">
+	<lams:Alert id="error" type="danger" close="false">
 	        <html:messages id="error">
 	            <c:out value="${error}" escapeXml="false"/><br/>
 	        </html:messages>
-	</p>
+	</lams:Alert>
 </logic:messagesPresent>
\ No newline at end of file
Index: lams_tool_survey/web/pages/learning/definelater.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -raf1051520a59e1945b25b8be64c5c6a0f7820baf
--- lams_tool_survey/web/pages/learning/definelater.jsp	(.../definelater.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_survey/web/pages/learning/definelater.jsp	(.../definelater.jsp)	(revision af1051520a59e1945b25b8be64c5c6a0f7820baf)
@@ -9,15 +9,12 @@
 	<meta http-equiv="refresh" content="60">
 </lams:head>
 
+<c:set var="title">
+	<fmt:message key="activity.title" />
+</c:set>
 <body class="stripes">
-	<div id="content">
-		<h1>
-			<fmt:message key="activity.title" />
-		</h1>
+	<lams:Page type="learner" title="${title}">
 		<lams:DefineLater />
-	</div>
-	<div id="footer">
-	</div>
-	<!--closes footer-->
+	</lams:Page>
 </body>
 </lams:html>
Index: lams_tool_survey/web/pages/learning/learning.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -raf1051520a59e1945b25b8be64c5c6a0f7820baf
--- lams_tool_survey/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_survey/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision af1051520a59e1945b25b8be64c5c6a0f7820baf)
@@ -3,32 +3,32 @@
 <%@ include file="/common/taglibs.jsp"%>
 <lams:html>
 <lams:head>
-	<title><fmt:message key="label.learning.title" />
-	</title>
+	<title><fmt:message key="label.learning.title" /></title>
 	<%@ include file="/common/header.jsp"%>
-	
+
 	<script type="text/javascript" src="${lams}includes/javascript/prototype.js"></script>
 	<script type="text/javascript">
-		function previousQuestion(sessionMapID){
+		function previousQuestion(sessionMapID) {
 			$("surveyForm").action = '<c:url value="/learning/previousQuestion.do"/>';
 			$("surveyForm").submit();
 		}
-		
-		function nextQuestion(sessionMapID){
+
+		function nextQuestion(sessionMapID) {
 			$("surveyForm").action = '<c:url value="/learning/nextQuestion.do"/>';
 			$("surveyForm").submit();
 		}
-		
-		function singleChoice(choiceName){
+
+		function singleChoice(choiceName) {
 			var rs = document.getElementsByName(choiceName);
-			for(idx=0;idx<rs.length;idx++)
-				rs[idx].checked=false;
-		}  
-    </script>
+			for (idx = 0; idx < rs.length; idx++)
+				rs[idx].checked = false;
+		}
+	</script>
 </lams:head>
 <body class="stripes">
 	<html:form action="/learning/doSurvey" method="post" styleId="surveyForm">
-		<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
+		<c:set var="formBean" value="<%=request
+							.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
 		<html:hidden property="questionSeqID" />
 		<html:hidden property="sessionMapID" />
 		<html:hidden property="position" />
@@ -39,20 +39,20 @@
 		<c:set var="questionSeqID" value="${formBean.questionSeqID}" />
 		<c:set var="currentIdx" value="${formBean.currentIdx}" />
 
-		<div id="content">
-			<h1>
-				<c:out value="${sessionMap.title}" escapeXml="true"/>
-			</h1>
-			<p>
+		<lams:Page type="learner" title="${sessionMap.title}">
+
+			<div class="panel">
 				<c:out value="${sessionMap.instructions}" escapeXml="false" />
-			</p>
+			</div>
 			<c:if test="${not empty sessionMap.submissionDeadline}">
-				<div class="info">
-				 	<fmt:message>
-						<fmt:param><lams:Date value="${sessionMap.submissionDeadline}" /></fmt:param>
+				<lams:Alert id="submissionDeadline" type="info" close="true">
+					<fmt:message>
+						<fmt:param>
+							<lams:Date value="${sessionMap.submissionDeadline}" />
+						</fmt:param>
 					</fmt:message>
-				</div>
-			</c:if>	
+				</lams:Alert>
+			</c:if>
 			<c:choose>
 				<%-- Show on one page or when learner does not choose edit one question --%>
 				<c:when test="${sessionMap.showOnOnePage && (empty questionSeqID or questionSeqID == 0)}">
@@ -63,63 +63,51 @@
 				</c:when>
 				<c:otherwise>
 					<c:set var="question" value="${sessionMap.questionList[questionSeqID]}" />
-					<fmt:message key="label.question" /> ${currentIdx} <fmt:message
-						key="label.of" /> ${sessionMap.totalQuestions}
+					<fmt:message key="label.question" /> ${currentIdx} <fmt:message key="label.of" /> ${sessionMap.totalQuestions}
 						<%@ include file="/pages/learning/question.jsp"%>
 				</c:otherwise>
 			</c:choose>
 
 			<%-- Display button according to different situation --%>
 			<%--POSITION: 0=middle of survey, 1=first question, 2=last question, 3=Only one question available--%>
-			<table>
-				<tr>
-					<td>
-						<c:choose>
-							<c:when
-								test="${(sessionMap.showOnOnePage && (empty questionSeqID or questionSeqID == 0)) or position == 3}">
-								<div class="right-buttons">
-									<html:submit property="doSurvey"
-										disabled="${sessionMap.finishedLock}" styleClass="button">
-										<fmt:message key="label.submit.survey" />
-									</html:submit>
-								</div>
-							</c:when>
-							<c:otherwise>
-								<c:set var="preChecked" value="true" />
-								<c:if test="${position == 2 || position == 0}">
-									<c:set var="preChecked" value="false" />
-								</c:if>
-								<c:set var="nextChecked" value="true" />
-								<c:if test="${position == 1 || position == 0}">
-									<c:set var="nextChecked" value="false" />
-								</c:if>
-								<span class="left-buttons"> <html:button
-										property="PreviousButton" onclick="previousQuestion()"
-										styleClass="button" disabled="${preChecked}">
-										<fmt:message key="label.previous" />
-									</html:button> </span>
-								<span class="right-buttons"> <c:if
-										test="${position != 2}">
-										<html:button property="NextButton" onclick="nextQuestion()"
-											styleClass="button" disabled="${nextChecked}">
-											<fmt:message key="label.next" />
-										</html:button>
-									</c:if> <c:if test="${position == 2}">
-										<html:submit property="doSurvey"
-											disabled="${sessionMap.finishedLock}" styleClass="button">
-											<fmt:message key="label.submit.survey" />
-										</html:submit>
-									</c:if> </span>
-							</c:otherwise>
-						</c:choose>
-					</td>
-				</tr>
-			</table>
-		</div>
-		<!--closes content-->
-
-		<div id="footer"></div>
-		<!--closes footer-->
+			<c:choose>
+				<c:when test="${(sessionMap.showOnOnePage && (empty questionSeqID or questionSeqID == 0)) or position == 3}">
+					<div class="right-buttons voffset10">
+						<html:submit property="doSurvey" disabled="${sessionMap.finishedLock}"
+							styleClass="btn btn-sm btn-primary pull-right">
+							<fmt:message key="label.submit.survey" />
+						</html:submit>
+					</div>
+				</c:when>
+				<c:otherwise>
+					<c:set var="preChecked" value="true" />
+					<c:if test="${position == 2 || position == 0}">
+						<c:set var="preChecked" value="false" />
+					</c:if>
+					<c:set var="nextChecked" value="true" />
+					<c:if test="${position == 1 || position == 0}">
+						<c:set var="nextChecked" value="false" />
+					</c:if>
+					<div class="pull-left voffset10"> <html:button property="PreviousButton" onclick="previousQuestion()"
+							styleClass="btn btn-sm btn-default" disabled="${preChecked}">
+							<fmt:message key="label.previous" />
+						</html:button>
+					</div>
+					<div class="pull-right voffset10"> <c:if test="${position != 2}">
+							<html:button property="NextButton" onclick="nextQuestion()" styleClass="btn btn-sm btn-default" disabled="${nextChecked}">
+								<fmt:message key="label.next" />
+							</html:button>
+						</c:if> <c:if test="${position == 2}">
+							<html:submit property="doSurvey" disabled="${sessionMap.finishedLock}" styleClass="btn btn-sm btn-primary">
+								<fmt:message key="label.submit.survey" />
+							</html:submit>
+						</c:if>
+					</div>
+				</c:otherwise>
+			</c:choose>
+			<div id="footer"></div>
+			<!--closes footer-->
+		</lams:Page>
 	</html:form>
 </body>
 </lams:html>
Index: lams_tool_survey/web/pages/learning/notebook.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -raf1051520a59e1945b25b8be64c5c6a0f7820baf
--- lams_tool_survey/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_survey/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision af1051520a59e1945b25b8be64c5c6a0f7820baf)
@@ -1,7 +1,7 @@
 <%@ include file="/common/taglibs.jsp"%>
 <!DOCTYPE html>
-        
 
+
 <lams:html>
 <lams:head>
 	<title><fmt:message key="label.learning.title" /></title>
@@ -10,11 +10,11 @@
 		function disableFinishButton() {
 			document.getElementById("finishButton").disabled = true;
 		}
-		function submitForm(methodName){
+		function submitForm(methodName) {
 			var f = document.getElementById('messageForm');
 			f.submit();
 		}
-	</script>	
+	</script>
 </lams:head>
 <body class="stripes">
 
@@ -25,32 +25,34 @@
 		<html:hidden property="userID" />
 		<html:hidden property="sessionMapID" />
 
-		<div id="content">
-			<h1>
-				<c:out value="${sessionMap.title}" escapeXml="true"/>
-			</h1>
+		<lams:Page type="learner" title="${sessionMap.title}">
 
-			<p>
+			<div class="panel">
 				<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
-			</p>
-			
+			</div>
+
 			<%@ include file="/common/messages.jsp"%>
 
-			<html:textarea cols="60" rows="8" property="entryText"
-				styleClass="text-area" />
+			<html:textarea rows="5" styleId="focused" property="entryText" styleClass="form-control" />
 
-			<div class="space-bottom-top align-right">
-				<html:link href="#nogo" styleClass="button" styleId="finishButton" onclick="submitForm('finish')">
-					<span class="nextActivity"><fmt:message key="label.finish" /></span>
+			<div class="voffset10">
+				<html:link href="#nogo" styleClass="btn btn-primary pull-right na" styleId="finishButton"
+					onclick="submitForm('finish')">
+					<fmt:message key="label.finish" />
 				</html:link>
 			</div>
 
-		</div>
+
+			<div id="footer"></div>
+			<!--closes footer-->
+		</lams:Page>
 	</html:form>
 
-	<div id="footer">
-	</div>
-	<!--closes footer-->
+	<script type="text/javascript">
+		window.onload = function() {
+			document.getElementById("focused").focus();
+		}
+	</script>
 
 </body>
 </lams:html>
Index: lams_tool_survey/web/pages/learning/question.jsp
===================================================================
diff -u -r098d686653002409f33aff0f69b1183e07c1eab3 -raf1051520a59e1945b25b8be64c5c6a0f7820baf
--- lams_tool_survey/web/pages/learning/question.jsp	(.../question.jsp)	(revision 098d686653002409f33aff0f69b1183e07c1eab3)
+++ lams_tool_survey/web/pages/learning/question.jsp	(.../question.jsp)	(revision af1051520a59e1945b25b8be64c5c6a0f7820baf)
@@ -1,68 +1,82 @@
 <%@ include file="/common/taglibs.jsp"%>
-<div class="shading-bg">
-	<c:if test="${not question.optional}">
-		<span style="color: #FF0000">*</span>
-	</c:if>
-	<c:out value="${question.description}" escapeXml="false" />
 
-	<logic:messagesPresent property="questionError${question.uid}">
-		<p class="warning">
-			<html:messages id="error" property="questionError${question.uid}">
-				<c:out value="${error}" escapeXml="false" />
-			</html:messages>
-		</p>
-	</logic:messagesPresent>
+<div class="sbox voffset5">
+	<div class="sbox-heading clearfix">
+		<c:if test="${not question.optional}">
+			<abbr class="pull-right" title="<fmt:message key='label.answer.required'/>"><i class="fa fa-xs fa-asterisk text-danger pull-right"></i></abbr>
+		</c:if>
 
-	<c:set var="answerText" value="" />
-	<c:if test="${not empty question.answer}">
-		<c:set var="answerText" value="${question.answer.answerText}" />
-	</c:if>
-	<c:forEach var="option" items="${question.options}">
-		<c:set var="checked" value="" />
+		<c:out value="${question.description}" escapeXml="false" />
+
+		<logic:messagesPresent property="questionError${question.uid}">
+			<lams:Alert id="error" type="danger" close="false">
+				<html:messages id="error" property="questionError${question.uid}">
+					<c:out value="${error}" escapeXml="false" />
+				</html:messages>
+			</lams:Alert>
+		</logic:messagesPresent>
+
+
+	</div>
+	<div class="sbox-body">
+
+		<c:set var="answerText" value="" />
 		<c:if test="${not empty question.answer}">
-			<c:forEach var="choice" items="${question.answer.choices}">
-				<c:if test="${choice == option.uid}">
-					<c:set var="checked" value="checked='checked'" />
-				</c:if>
-			</c:forEach>
+			<c:set var="answerText" value="${question.answer.answerText}" />
 		</c:if>
-		<p>
-			<c:choose>
-				<c:when test="${question.type == 1}">
-					<input type="radio" name="optionChoice${question.uid}" class="noBorder"
-						value="${option.uid}" ${checked} />
-					<c:out value="${option.description}" escapeXml="true"/>
-				</c:when>
-				<c:when test="${question.type == 2}">
-					<input type="checkbox" class="noBorder"
-					 name="optionChoice${question.uid}"
-						value="${option.uid}" ${checked}/>
-					<c:out value="${option.description}" escapeXml="true"/>
-				</c:when>
-			</c:choose>
-		</p>
-	</c:forEach>
 
-	<c:if test="${question.type == 3}">
-		<p>
-			<lams:textarea name="optionText${question.uid}" rows="7" cols="50" class="text-area">${answerText}</lams:textarea>
-		</p>
-	</c:if>
-	<c:if test="${question.appendText}">
-		<c:set var="jsfunc" value="" />
-		<%-- for single choice question, use javascript to ensure only one option or openText can be chosen --%>
-		<c:if test="${question.type == 1}">
-			<c:set var="jsfunc" value="onclick=\" singleChoice('optionChoice${question.uid}')\""/>
+		<c:forEach var="option" items="${question.options}">
+			<c:set var="checked" value="" />
+			<c:if test="${not empty question.answer}">
+				<c:forEach var="choice" items="${question.answer.choices}">
+					<c:if test="${choice == option.uid}">
+						<c:set var="checked" value="checked='checked'" />
+					</c:if>
+				</c:forEach>
+			</c:if>
+			<div class="form-group">
+				<c:choose>
+					<c:when test="${question.type == 1}">
+
+						<input type="radio" id="optionChoice${question.uid}${option.uid}" name="optionChoice${question.uid}" value="${option.uid}"
+							${checked} />
+						<label for="optionChoice${question.uid}${option.uid}"><c:out value="${option.description}" escapeXml="true" /></label>
+
+					</c:when>
+					<c:when test="${question.type == 2}">
+
+						<input type="checkbox" id="optionChoice${question.uid}${option.uid}" name="optionChoice${question.uid}" value="${option.uid}"
+							${checked} />
+						<label for="optionChoice${question.uid}${option.uid}"><c:out value="${option.description}" escapeXml="true" /></label>
+
+					</c:when>
+				</c:choose>
+			</div>
+		</c:forEach>
+
+		<c:if test="${question.type == 3}">
+			<p>
+				<lams:textarea name="optionText${question.uid}" rows="7" class="form-control">${answerText}</lams:textarea>
+			</p>
 		</c:if>
-		
-		<p>
-			<fmt:message key="label.specifyOther" />
-		</p>
-		<p>
-			<textarea name="optionText${question.uid}" rows="7" cols="50"
-				type="_moz"${jsfunc}>${answerText}</textarea>
-		</p>
-	</c:if>
+		<c:if test="${question.appendText}">
+			<c:set var="jsfunc" value="" />
+			<%-- for single choice question, use javascript to ensure only one option or openText can be chosen --%>
+			<c:if test="${question.type == 1}">
+				<c:set var="jsfunc" value="onclick=\" singleChoice('optionChoice${question.uid}')\""/>
+			</c:if>
 
+			<p>
+				<fmt:message key="label.specifyOther" />
+			</p>
+			<p>
+				<textarea name="optionText${question.uid}" rows="7" cols="50" type="_moz" ${jsfunc}>${answerText}</textarea>
+			</p>
+		</c:if>
+
+	</div>
+
 </div>
 
+
+
Index: lams_tool_survey/web/pages/learning/result.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -raf1051520a59e1945b25b8be64c5c6a0f7820baf
--- lams_tool_survey/web/pages/learning/result.jsp	(.../result.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_survey/web/pages/learning/result.jsp	(.../result.jsp)	(revision af1051520a59e1945b25b8be64c5c6a0f7820baf)
@@ -34,65 +34,66 @@
 </lams:head>
 <body class="stripes">
 
-	<div id="content">
-		<h1>
-			<c:out value="${sessionMap.title}" escapeXml="true"/>
-		</h1>
-		<p>
+	<lams:Page type="learner" title="${sessionMap.title}">
+		<div class="panel">
 			<c:out value="${sessionMap.instructions}" escapeXml="false" />
-		</p>
+		</div>
 
 		<c:if test="${sessionMap.lockOnFinish and sessionMap.mode != 'teacher'}">
-			<div class="info space-bottom">
+			<div class="voffset5">
 				<c:choose>
 					<c:when test="${sessionMap.showOtherUsersAnswers}">
-						<c:set var="buttonLabel"><fmt:message key="label.view.all.responses" /></c:set>
-						<fmt:message key="message.warnLockOnFinish" >
+						<c:set var="buttonLabel">
+							<fmt:message key="label.view.all.responses" />
+						</c:set>
+						<fmt:message key="message.warnLockOnFinish">
 							<fmt:param>${buttonLabel}</fmt:param>
 						</fmt:message>
 					</c:when>
-								
+
 					<c:when test="${sessionMap.userFinished}">
-						<fmt:message key="message.activityLocked" />
+						<lams:Alert id="activityLocked" type="info" close="true">
+							<fmt:message key="message.activityLocked" />
+						</lams:Alert>
 					</c:when>
-					
+
 					<c:otherwise>
 						<c:set var="buttonLabel">
 							<c:choose>
-							 	<c:when test="${sessionMap.activityPosition.last}">
-							 		<fmt:message key="label.submit" />
-							 	</c:when>
-							 					
-							 	<c:otherwise>
-							 		 <fmt:message key="label.finished" />
-							 	</c:otherwise>
-							 </c:choose>
+								<c:when test="${sessionMap.activityPosition.last}">
+									<fmt:message key="label.submit" />
+								</c:when>
+
+								<c:otherwise>
+									<fmt:message key="label.finished" />
+								</c:otherwise>
+							</c:choose>
 						</c:set>
-						<fmt:message key="message.warnLockOnFinish" >
-							<fmt:param>${buttonLabel}</fmt:param>
-						</fmt:message>
+						<lams:Alert id="lockWhenFinished" type="info" close="true">
+							<fmt:message key="message.warnLockOnFinish">
+								<fmt:param>
+									<strong>${buttonLabel}</strong>
+								</fmt:param>
+							</fmt:message>
+						</lams:Alert>
 					</c:otherwise>
 				</c:choose>
 			</div>
 		</c:if>
-		
+
 		<c:forEach var="element" items="${sessionMap.questionList}">
-			<div class="shading-bg">
-				<c:set var="question" value="${element.value}" />
+			<div class="sbox voffset5">
+				<div class="sbox-heading clearfix">
+					<c:if test="${not question.optional}">
+						<abbr class="pull-right" title="<fmt:message key='label.answer.required'/>"><i
+							class="fa fa-xs fa-asterisk text-danger pull-right"></i></abbr>
+					</c:if>
 
-				<c:if test="${not question.optional}">
-					<span style="color: #FF0000">*</span>
-				</c:if>
+					<c:set var="question" value="${element.value}" />
+					<c:out value="${question.description}" escapeXml="false" />
+				</div>
+				<div class="sbox-body">
 
-				<c:out value="${question.description}" escapeXml="false" />
-
-				<c:if test="${(not sessionMap.finishedLock) && (not sessionMap.showOnOnePage)}">
-					<a href="#" onclick="retakeSurvey(${question.sequenceId})">
-						<fmt:message key="label.retake" /> 
-					</a>
-				</c:if>
-
-				<p>
 					<c:set var="answerText" value="" />
 					<c:if test="${not empty question.answer}">
 						<c:set var="answerText" value="${question.answer.answerText}" />
@@ -110,101 +111,112 @@
 							</c:if>
 
 							<c:if test="${checked}">
-								<c:out value="${option.description}" escapeXml="true"/>
+								<c:out value="${option.description}" escapeXml="true" />
 							</c:if>
 						</div>
 					</c:forEach>
 
-				</p>
-				<c:if test="${question.type == 3}">
-					<lams:out value="${answerText}" escapeHtml="false"/>
-				</c:if>
 
-				<c:if test="${question.appendText && (not empty answerText)}">
-					<fmt:message key="label.append.text" />
-					<lams:out value="${answerText}" escapeHtml="true" />
-				</c:if>
+					<c:if test="${question.type == 3}">
+						<lams:out value="${answerText}" escapeHtml="false" />
+					</c:if>
+
+					<c:if test="${question.appendText && (not empty answerText)}">
+						<fmt:message key="label.append.text" />
+						<lams:out value="${answerText}" escapeHtml="true" />
+					</c:if>
+
+					<c:if test="${(not sessionMap.finishedLock) && (not sessionMap.showOnOnePage)}">
+						<div class="">
+							<a href="#" onclick="retakeSurvey(${question.sequenceId})"><small><fmt:message key="label.retake" /></small>
+							</a>
+						</div>
+					</c:if>
+
+
+				</div>
 			</div>
 		</c:forEach>
 
 		<c:if test="${not sessionMap.finishedLock}">
-			<html:button property="RetakeButton" onclick="return retakeSurvey(-1)" styleClass="button">
-				<fmt:message key="label.retake.survey" />
-			</html:button>
+			<div class="voffset5">
+				<html:button property="RetakeButton" onclick="return retakeSurvey(-1)" styleClass="btn btn-sm btn-default pull-left">
+					<fmt:message key="label.retake.survey" />
+				</html:button>
+			</div>
 		</c:if>
 
+		<div class="voffset10">&nbsp;</div>
+
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn and !sessionMap.showOtherUsersAnswers}">
-			<div class="small-space-top">
-				<h2><fmt:message key="title.reflection" /></h2>
-				<strong>
-					<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true"/>
-				</strong>
+			<div class="panel panel-default voffset10">
+				<div class="panel-heading panel-title">
+					<fmt:message key="title.reflection" />
+				</div>
+				<div class="panel-body">
+					<div class="panel">
+						<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
+					</div>
 
-				<c:choose>
-					<c:when test="${empty sessionMap.reflectEntry}">
-						<p>
-							<em> <fmt:message key="message.no.reflection.available" /></em>
-						</p>
-					</c:when>
-					<c:otherwise>
-						<p>
-							<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
-						</p>
-					</c:otherwise>
-				</c:choose>
+					<c:choose>
+						<c:when test="${empty sessionMap.reflectEntry}">
+							<p>
+								<fmt:message key="message.no.reflection.available" />
+							</p>
+						</c:when>
+						<c:otherwise>
+							<div class="panel-body bg-warning voffset5">
+								<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
+							</div>
+						</c:otherwise>
+					</c:choose>
 
-				<html:button property="ContinueButton" onclick="return continueReflect()" styleClass="button">
-					<fmt:message key="label.edit" />
-				</html:button>
+					<html:button property="ContinueButton" onclick="return continueReflect()"
+						styleClass="btn voffset5 btn-sm btn-default pull-left">
+						<fmt:message key="label.edit" />
+					</html:button>
+				</div>
 			</div>
 		</c:if>
 
 		<c:if test="${sessionMap.mode != 'teacher'}">
-			<table>
-				<tr>
-					<td>
-						<span class="right-buttons">
+			<div class="pull-right voffset10">
+				<c:choose>
+					<c:when test="${sessionMap.showOtherUsersAnswers}">
+						<html:button property="otherUsersAnswersButton" onclick="return showOtherUsersAnswers()"
+							styleClass="btn btn-sm btn-default">
+							<fmt:message key="label.view.all.responses" />
+						</html:button>
+					</c:when>
+
+					<c:when test="${sessionMap.reflectOn}">
+						<html:button property="ContinueButton" onclick="return continueReflect()"
+							styleClass="btn btn-sm btn-primary pull-right">
+							<fmt:message key="label.continue" />
+						</html:button>
+					</c:when>
+
+					<c:otherwise>
+						<html:link href="#nogo" property="FinishButton" styleId="finishButton" onclick="return finishSession()"
+							styleClass="btn btn-sm btn-primary pull-right na">
 							<c:choose>
-								<c:when test="${sessionMap.showOtherUsersAnswers}">
-									<html:button property="otherUsersAnswersButton" onclick="return showOtherUsersAnswers()" styleClass="button">
-										<fmt:message key="label.view.all.responses" />
-									</html:button>
+								<c:when test="${sessionMap.activityPosition.last}">
+									<fmt:message key="label.submit" />
 								</c:when>
-							
-								<c:when test="${sessionMap.reflectOn}">
-									<html:button property="ContinueButton" onclick="return continueReflect()" styleClass="button">
-										<fmt:message key="label.continue" />
-									</html:button>
-								</c:when>
-								
+
 								<c:otherwise>
-									<html:link href="#nogo" property="FinishButton" styleId="finishButton"
-										onclick="return finishSession()" styleClass="button">
-										<span class="nextActivity">
-											<c:choose>
-							 					<c:when test="${sessionMap.activityPosition.last}">
-							 						<fmt:message key="label.submit" />
-							 					</c:when>
-							 					
-							 					<c:otherwise>
-							 		 				<fmt:message key="label.finished" />
-							 					</c:otherwise>
-							 				</c:choose>
-							 			</span>
-									</html:link>
+									<fmt:message key="label.finished" />
 								</c:otherwise>
-							</c:choose> 
-						</span>
-					</td>
-				</tr>
-			</table>
+							</c:choose>
+						</html:link>
+					</c:otherwise>
+				</c:choose>
+			</div>
 		</c:if>
-	</div>
-	<!--closes content-->
 
-	<div id="footer"></div>
-	<!--closes footer-->
-
+		<div id="footer"></div>
+		<!--closes footer-->
+	</lams:Page>
 </body>
 </lams:html>
 
Index: lams_tool_survey/web/pages/learning/resultOtherUsers.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -raf1051520a59e1945b25b8be64c5c6a0f7820baf
--- lams_tool_survey/web/pages/learning/resultOtherUsers.jsp	(.../resultOtherUsers.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_survey/web/pages/learning/resultOtherUsers.jsp	(.../resultOtherUsers.jsp)	(revision af1051520a59e1945b25b8be64c5c6a0f7820baf)
@@ -1,8 +1,12 @@
 <!DOCTYPE html>
 
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="lams"><lams:LAMSURL /></c:set>
-<c:set var="tool"><lams:WebAppURL/></c:set>
+<c:set var="lams">
+	<lams:LAMSURL />
+</c:set>
+<c:set var="tool">
+	<lams:WebAppURL />
+</c:set>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 
 <lams:html>
@@ -13,124 +17,140 @@
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager.css">
 	<link type="text/css" href="${lams}/css/chart.css" rel="stylesheet" />
 	<style media="screen,projection" type="text/css">
-		#other-users-answers-title {
-			margin-top: 20px;
-		}
-		
-		table.alternative-color td:first-child {
-			width: 25%;
-		}
-	</style>
-	
+#other-users-answers-title {
+	margin-top: 20px;
+}
+
+table.alternative-color td:first-child {
+	width: 25%;
+}
+</style>
+
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
 	<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/jquery.tablesorter.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-pager.js"></script>
 
 	<script type="text/javascript">
-		$(document).ready(function(){
-	
-			$(".tablesorter").tablesorter({
-				theme: 'blue',
-			    widthFixed: true,
-			    widgets: ['zebra']
-			});
-			
-			$(".tablesorter").each(function() {
-				$(this).tablesorterPager({
-					// set to false otherwise it remembers setting from other jsFiddle demos
-					savePages: false,
-				      // use this format: "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
-				      // where {page} is replaced by the page number (or use {page+1} to get a one-based index),
-				      // {size} is replaced by the number of records to show,
-				      // {sortList:col} adds the sortList to the url into a "col" array, and {filterList:fcol} adds
-				      // the filterList to the url into an "fcol" array.
-				      // So a sortList = [[2,0],[3,0]] becomes "&col[2]=0&col[3]=0" in the url
-					ajaxUrl : "<c:url value='/learning/getOpenResponses.do'/>?page={page}&size={size}&{sortList:column}&sessionId=${sessionMap.toolSessionID}&questionUid=" + $(this).attr('data-question-uid'),
-					ajaxProcessing: function (data) {
-						
-				    	if (data && data.hasOwnProperty('rows')) {
-				    		var rows = [],
-				            json = {};
-				    		
-							for (i = 0; i < data.rows.length; i++){
-								var userData = data.rows[i];
-								
-								rows += '<tr>';
-								rows += 	'<td>';
-								rows += 		'<div class="user-answer">';
-								rows += 			userData["answer"];
-								rows += 		'</div>';
-								rows += 	'</td>';
-								rows += '</tr>';
-							}
-				            
-							json.total = data.total_rows; // only allow 100 rows in total
-							//json.filteredRows = 100; // no filtering
-							json.rows = $(rows);
-							return json;
-				    	}
-					},
-				    container: $(this).next(".pager"),
-				    output: '{startRow} to {endRow} ({totalRows})',
-				    // css class names of pager arrows
-				    cssNext: '.tablesorter-next', // next page arrow
-					cssPrev: '.tablesorter-prev', // previous page arrow
-					cssFirst: '.tablesorter-first', // go to first page arrow
-					cssLast: '.tablesorter-last', // go to last page arrow
-					cssGoto: '.gotoPage', // select dropdown to allow choosing a page
-					cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
-					cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
-					// class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
-					cssDisabled: 'disabled' // Note there is no period "." in front of this class name
-				})
-			});
-		 });
-	
-		function finishSession(){
+		$(document)
+				.ready(
+						function() {
+
+							$(".tablesorter").tablesorter({
+								theme : 'blue',
+								widthFixed : true,
+								widgets : [ 'zebra' ]
+							});
+
+							$(".tablesorter")
+									.each(
+											function() {
+												$(this)
+														.tablesorterPager(
+																{
+																	// set to false otherwise it remembers setting from other jsFiddle demos
+																	savePages : false,
+																	// use this format: "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
+																	// where {page} is replaced by the page number (or use {page+1} to get a one-based index),
+																	// {size} is replaced by the number of records to show,
+																	// {sortList:col} adds the sortList to the url into a "col" array, and {filterList:fcol} adds
+																	// the filterList to the url into an "fcol" array.
+																	// So a sortList = [[2,0],[3,0]] becomes "&col[2]=0&col[3]=0" in the url
+																	ajaxUrl : "<c:url value='/learning/getOpenResponses.do'/>?page={page}&size={size}&{sortList:column}&sessionId=${sessionMap.toolSessionID}&questionUid="
+																			+ $(
+																					this)
+																					.attr(
+																							'data-question-uid'),
+																	ajaxProcessing : function(
+																			data) {
+
+																		if (data
+																				&& data
+																						.hasOwnProperty('rows')) {
+																			var rows = [], json = {};
+
+																			for (i = 0; i < data.rows.length; i++) {
+																				var userData = data.rows[i];
+
+																				rows += '<tr>';
+																				rows += '<td>';
+																				rows += '<div class="user-answer">';
+																				rows += userData["answer"];
+																				rows += '</div>';
+																				rows += '</td>';
+																				rows += '</tr>';
+																			}
+
+																			json.total = data.total_rows; // only allow 100 rows in total
+																			//json.filteredRows = 100; // no filtering
+																			json.rows = $(rows);
+																			return json;
+																		}
+																	},
+																	container : $(
+																			this)
+																			.next(
+																					".pager"),
+																	output : '{startRow} to {endRow} ({totalRows})',
+																	// css class names of pager arrows
+																	cssNext : '.tablesorter-next', // next page arrow
+																	cssPrev : '.tablesorter-prev', // previous page arrow
+																	cssFirst : '.tablesorter-first', // go to first page arrow
+																	cssLast : '.tablesorter-last', // go to last page arrow
+																	cssGoto : '.gotoPage', // select dropdown to allow choosing a page
+																	cssPageDisplay : '.pagedisplay', // location of where the "output" is displayed
+																	cssPageSize : '.pagesize', // page size selector - select dropdown that sets the "size" option
+																	// class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
+																	cssDisabled : 'disabled' // Note there is no period "." in front of this class name
+																})
+											});
+						});
+
+		function finishSession() {
 			document.getElementById("finishButton").disabled = true;
-			document.location.href ='<c:url value="/learning/finish.do?sessionMapID=${sessionMapID}"/>';
+			document.location.href = '<c:url value="/learning/finish.do?sessionMapID=${sessionMapID}"/>';
 			return false;
 		}
-		
-		function continueReflect(){
-			document.location.href='<c:url value="/learning/newReflection.do?sessionMapID=${sessionMapID}"/>';
+
+		function continueReflect() {
+			document.location.href = '<c:url value="/learning/newReflection.do?sessionMapID=${sessionMapID}"/>';
 		}
-		
-		function retakeSurvey(){
-			document.location.href='<c:url value="/learning/retake.do?sessionMapID=${sessionMapID}"/>';
+
+		function retakeSurvey() {
+			document.location.href = '<c:url value="/learning/retake.do?sessionMapID=${sessionMapID}"/>';
 		}
-    </script>
+	</script>
 </lams:head>
 <body class="stripes">
 
-	<div id="content">
-		<h1>
-			<c:out value="${sessionMap.title}" escapeXml="true"/>
-		</h1>
-		<p>
+	<lams:Page type="learner" title="${sessionMap.title}">
+		<div class="panel">
 			<c:out value="${sessionMap.instructions}" escapeXml="false" />
-		</p>
+		</div>
 
 		<c:if test="${sessionMap.lockOnFinish and sessionMap.mode != 'teacher'}">
-			<div class="info">
+			<lams:Alert id="activityLocked" type="info" close="true">
 				<fmt:message key="message.activityLocked" />
-			</div>
+			</lams:Alert>
 		</c:if>
-		
+
 		<%-- user personal results--%>
 		<c:forEach var="element" items="${sessionMap.questionList}">
-			<div class="shading-bg">
-				<c:set var="question" value="${element.value}" />
+			<div class="sbox voffset10">
+				<div class="sbox-heading clearfix">
+					<c:if test="${not question.optional}">
+						<abbr class="pull-right" title="<fmt:message key='label.answer.required'/>"><i
+							class="fa fa-xs fa-asterisk text-danger pull-right"></i></abbr>
+					</c:if>
 
-				<c:if test="${not question.optional}">
-					<span style="color: #FF0000">*</span>
-				</c:if>
+					<c:set var="question" value="${element.value}" />
 
-				<c:out value="${question.description}" escapeXml="false" />
+					<c:out value="${question.description}" escapeXml="false" />
 
-				<p>
+				</div>
+				<div class="sbox-body">
+
 					<c:set var="answerText" value="" />
 					<c:if test="${not empty question.answer}">
 						<c:set var="answerText" value="${question.answer.answerText}" />
@@ -148,209 +168,181 @@
 							</c:if>
 
 							<c:if test="${checked}">
-								<c:out value="${option.description}" escapeXml="true"/>
+								<c:out value="${option.description}" escapeXml="true" />
 							</c:if>
 						</div>
 					</c:forEach>
 
-				</p>
-				<c:if test="${question.type == 3}">
-					<lams:out value="${answerText}" escapeHtml="false"/>
-				</c:if>
 
-				<c:if test="${question.appendText && (not empty answerText)}">
-					<fmt:message key="label.append.text" />
-					<lams:out value="${answerText}" escapeHtml="true" />
-				</c:if>
+					<c:if test="${question.type == 3}">
+						<lams:out value="${answerText}" escapeHtml="false" />
+					</c:if>
+
+					<c:if test="${question.appendText && (not empty answerText)}">
+						<fmt:message key="label.append.text" />
+						<lams:out value="${answerText}" escapeHtml="true" />
+					</c:if>
+				</div>
 			</div>
 		</c:forEach>
 
 		<c:if test="${not sessionMap.lockOnFinish}">
-			<html:button property="RetakeButton" onclick="return retakeSurvey()" styleClass="button">
+			<html:button property="RetakeButton" onclick="return retakeSurvey()" styleClass="btn btn-sm btn-default pull-left">
 				<fmt:message key="label.retake.survey" />
 			</html:button>
 		</c:if>
 
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
-			<div class="small-space-top">
-				<h2><fmt:message key="title.reflection" /></h2>
-				<strong>
-					<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true"/>
-				</strong>
+			<div class="voffset10 panel panel-default">
+				<div class="panel-heading panel-title">
+					<fmt:message key="title.reflection" />
+				</div>
+				<div class="panel-body">
+					<div class="panel">
+						<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
+					</div>
 
-				<c:choose>
-					<c:when test="${empty sessionMap.reflectEntry}">
-						<p>
-							<em> <fmt:message key="message.no.reflection.available" /></em>
-						</p>
-					</c:when>
-					<c:otherwise>
-						<p>
-							<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
-						</p>
-					</c:otherwise>
-				</c:choose>
+					<c:choose>
+						<c:when test="${empty sessionMap.reflectEntry}">
+							<p>
+								<fmt:message key="message.no.reflection.available" />
+							</p>
+						</c:when>
+						<c:otherwise>
+							<div class="panel-body bg-warning">
+								<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
+							</div>
+						</c:otherwise>
+					</c:choose>
 
-				<html:button property="ContinueButton" onclick="return continueReflect()" styleClass="button">
-					<fmt:message key="label.edit" />
-				</html:button>
+					<html:button property="ContinueButton" onclick="return continueReflect()" styleClass="button">
+						<fmt:message key="label.edit" />
+					</html:button>
+				</div>
 			</div>
 		</c:if>
-		
+
 		<%-- other users personal results--%>
 		<c:if test="${sessionMap.showOtherUsersAnswers}">
-			<h2 id="other-users-answers-title">
+			<h4 id="other-users-answers-title">
 				<fmt:message key="label.other.answers" />
-			</h2>
-			
+			</h4>
+
 			<div>
-				<fmt:message key="label.total.responses" >
+				<fmt:message key="label.total.responses">
 					<fmt:param>${countFinishedUser}</fmt:param>
 				</fmt:message>
 			</div>
-		
+
 			<c:forEach var="question" items="${answerDtos}" varStatus="queStatus">
-			<table class="alternative-color">
-				<tr>
-					<th class="first" colspan="2">
-						<c:out value="${question.shortTitle}"/> 
-						
-						<%-- Only show pie/bar chart when question is single/multiple choics type --%>
-						<c:if test="${question.type != 3}">
-							<div style="float:right">
-								<c:set var="chartURL" value="${tool}showChart.do?toolSessionID=${sessionMap.toolSessionID}&questionUid=${question.uid}" />
-								<img src='<c:out value="${tool}"/>includes/images/piechart.gif'
-									title="<fmt:message key='message.view.pie.chart'/>"
-									style="cursor: pointer; width: 30px; border: none"
-									onclick="javascript:drawChart('pie', 'chartDiv${queStatus.index}', '${chartURL}')">
-							</div>
-						</c:if>
-					</th>
-				</tr>
-				
-				<c:set var="optSize" value="${fn:length(question.options)}" />
-				<c:forEach var="option" items="${question.options}"  varStatus="optStatus">
-					<tr>
-						<td><c:out value="${option.description}" escapeXml="true"/></td>
-						<td>
-							<c:set var="imgTitle">
-								<fmt:message key="message.learner.choose.answer.percentage">
-									<fmt:param>${option.response}</fmt:param>
-								</fmt:message>
-							</c:set>
-							<c:set var="imgIdx">
-								${optStatus.index % 5 + 1}
-							</c:set>			
-							<img src="${tool}/includes/images/bar${imgIdx}.gif" height="10" width="${option.response * 2}" title="${imgTitle}">
-							${option.responseCount} (${option.responseFormatStr}%)
-						</td>
-					</tr>
-				</c:forEach>
-				<tr>
-					<td id="chartDiv${queStatus.index}" style="height: 220px; display: none; padding: 0;" colspan="2">
-					</td>
-				</tr>
-				<c:if test="${question.appendText}">
-					<tr>
-						<td><fmt:message key="label.open.response"/></td>
-						<td>
-							<c:set var="imgTitle">
-								<fmt:message key="message.learner.choose.answer.percentage">
-									<fmt:param>${question.openResponseFormatStr}</fmt:param>
-								</fmt:message>
-							</c:set>
-							<c:set var="imgIdx">
+				<div class="table-responsive">
+					<table class="table table-hover table-condensed">
+						<tr>
+							<th class="first" colspan="2"><c:out value="${question.shortTitle}" /> <%-- Only show pie/bar chart when question is single/multiple choics type --%>
+								<c:if test="${question.type != 3}">
+									<div class="pull-right">
+										<c:set var="chartURL"
+											value="${tool}showChart.do?toolSessionID=${sessionMap.toolSessionID}&questionUid=${question.uid}" />
+										<a class="fa fa-lg fa-pie-chart text-primary btn btn-md btn-primary"
+											title="<fmt:message key='message.view.pie.chart'/>"
+											onclick="javascript:drawChart('pie', 'chartDiv${queStatus.index}', '${chartURL}')"></a>
+									</div>
+								</c:if></th>
+						</tr>
+
+						<c:set var="optSize" value="${fn:length(question.options)}" />
+						<c:forEach var="option" items="${question.options}" varStatus="optStatus">
+							<tr>
+								<td><c:out value="${option.description}" escapeXml="true" /></td>
+								<td class="text-center"><c:set var="imgTitle">
+										<fmt:message key="message.learner.choose.answer.percentage">
+											<fmt:param>${option.response}</fmt:param>
+										</fmt:message>
+									</c:set> ${option.responseCount} (${option.responseFormatStr}%)</td>
+							</tr>
+						</c:forEach>
+						<tr>
+							<td id="chartDiv${queStatus.index}" colspan="2"></td>
+						</tr>
+						<c:if test="${question.appendText}">
+							<tr>
+								<td><fmt:message key="label.open.response" /></td>
+								<td class="text-center"><c:set var="imgTitle">
+										<fmt:message key="message.learner.choose.answer.percentage">
+											<fmt:param>${question.openResponseFormatStr}</fmt:param>
+										</fmt:message>
+									</c:set> <c:set var="imgIdx">
 								${(optSize % 5)  + 1}
-							</c:set>						
-							<img src="${tool}/includes/images/bar${imgIdx}.gif" height="10" width="${question.openResponse * 2}" title="${imgTitle}">
-							${question.openResponseCount} (${question.openResponseFormatStr}%)
-						</td>
-					</tr>
-				</c:if>
-				<c:if test="${question.type == 3}">
-					<tr>
-						<td colspan="2">
-							<table class="tablesorter" data-question-uid="${question.uid}">
-								<thead>
-									<tr>
-										<th title="<fmt:message key='label.sort.by.answer'/>" style="background-color: #D2E1DF; color: black; height: 15px;">
-											<fmt:message key="label.answer" />
-										</th>
-									</tr>
-								</thead>
-								<tbody>
-			
-								</tbody>
-							</table>
-								
-							<!-- pager -->
-							<div class="pager">
-								<form>
-								   	<img class="tablesorter-first"/>
-							    	<img class="tablesorter-prev"/>
-							    	<span class="pagedisplay"></span> 
-							   		<img class="tablesorter-next"/>
-							    	<img class="tablesorter-last"/>
-							    	<select class="pagesize">
-							      		<option selected="selected" value="10">10</option>
-							      		<option value="20">20</option>
-							      		<option value="30">30</option>
-							      		<option value="40">40</option>
-							      		<option value="50">50</option>
-							      		<option value="100">100</option>
-							    	</select>
-							  </form>
-							</div>	
-						</td>
-					</tr>
-				</c:if>
-				
-				</table>
-	
+							</c:set> ${question.openResponseCount} (${question.openResponseFormatStr}%)</td>
+							</tr>
+						</c:if>
+						<c:if test="${question.type == 3}">
+							<tr>
+								<td colspan="2">
+									<table class="tablesorter" data-question-uid="${question.uid}">
+										<thead>
+											<tr>
+												<th title="<fmt:message key='label.sort.by.answer'/>"
+													style="background-color: #D2E1DF; color: black; height: 15px;"><fmt:message key="label.answer" /></th>
+											</tr>
+										</thead>
+										<tbody>
+
+										</tbody>
+									</table> <!-- pager -->
+									<div class="pager">
+										<form>
+											<img class="tablesorter-first" /> <img class="tablesorter-prev" /> <span class="pagedisplay"></span> <img
+												class="tablesorter-next" /> <img class="tablesorter-last" /> <select class="pagesize">
+												<option selected="selected" value="10">10</option>
+												<option value="20">20</option>
+												<option value="30">30</option>
+												<option value="40">40</option>
+												<option value="50">50</option>
+												<option value="100">100</option>
+											</select>
+										</form>
+									</div>
+								</td>
+							</tr>
+						</c:if>
+
+					</table>
 			</c:forEach>
 		</c:if>
 
 		<c:if test="${sessionMap.mode != 'teacher'}">
-			<table>
-				<tr>
-					<td>
-						<span class="right-buttons">
-							<c:choose>
-							
-								<c:when test="${sessionMap.reflectOn}">
-									<html:button property="ContinueButton" onclick="return continueReflect()" styleClass="button">
-										<fmt:message key="label.continue" />
-									</html:button>
-								</c:when>
-								
-								<c:otherwise>
-									<html:link href="#nogo" property="FinishButton" styleId="finishButton"
-										onclick="return finishSession()" styleClass="button">
-										<span class="nextActivity">
-											<c:choose>
-							 					<c:when test="${sessionMap.activityPosition.last}">
-							 						<fmt:message key="label.submit" />
-							 					</c:when>
-							 					
-							 					<c:otherwise>
-							 		 				<fmt:message key="label.finished" />
-							 					</c:otherwise>
-							 				</c:choose>
-							 			</span>
-									</html:link>
-								</c:otherwise>
-							</c:choose> 
-						</span>
-					</td>
-				</tr>
-			</table>
-		</c:if>
-	</div>
-	<!--closes content-->
+			<div class="voffset10">
+				<c:choose>
 
-	<div id="footer"></div>
-	<!--closes footer-->
+					<c:when test="${sessionMap.reflectOn}">
+						<html:button property="ContinueButton" onclick="return continueReflect()" styleClass="button">
+							<fmt:message key="label.continue" />
+						</html:button>
+					</c:when>
 
+					<c:otherwise>
+						<html:link href="#nogo" property="FinishButton" styleId="finishButton" onclick="return finishSession()"
+							styleClass="btn btn-sm btn-primary pull-right na">
+							<span class="nextActivity"> <c:choose>
+									<c:when test="${sessionMap.activityPosition.last}">
+										<fmt:message key="label.submit" />
+									</c:when>
+
+									<c:otherwise>
+										<fmt:message key="label.finished" />
+									</c:otherwise>
+								</c:choose>
+							</span>
+						</html:link>
+					</c:otherwise>
+				</c:choose>
+			</div>
+		</c:if>
+
+		<div id="footer"></div>
+		<!--closes footer-->
+	</lams:Page>
 </body>
 </lams:html>
 
Index: lams_tool_survey/web/pages/learning/submissionDeadline.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -raf1051520a59e1945b25b8be64c5c6a0f7820baf
--- lams_tool_survey/web/pages/learning/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_survey/web/pages/learning/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision af1051520a59e1945b25b8be64c5c6a0f7820baf)
@@ -1,92 +1,91 @@
 <!DOCTYPE html>
-        
 
+
 <%@include file="/common/taglibs.jsp"%>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 <lams:html>
 <lams:head>
 	<%@ include file="/common/header.jsp"%>
 
 	<script type="text/javascript">
-		function finishSession(){
+		function finishSession() {
 			document.getElementById("finishButton").disabled = true;
-			document.location.href ='<c:url value="/learning/finish.do?sessionMapID=${sessionMapID}"/>';
+			document.location.href = '<c:url value="/learning/finish.do?sessionMapID=${sessionMapID}"/>';
 			return false;
 		}
-		function continueReflect(){
-			document.location.href='<c:url value="/learning/newReflection.do?sessionMapID=${sessionMapID}"/>';
-		} 
-    </script>
+		function continueReflect() {
+			document.location.href = '<c:url value="/learning/newReflection.do?sessionMapID=${sessionMapID}"/>';
+		}
+	</script>
 </lams:head>
 
 <body class="stripes">
-	<div id="content">
+	<lams:Page type="learner" title="${sessionMap.title}">
 
-		<h1>
-			<c:out value="${sessionMap.title}"/>
-		</h1>
-		
-		<div class="warning">
-			<fmt:message key="authoring.info.teacher.set.restriction" >
-				<fmt:param><lams:Date value="${sessionMap.submissionDeadline}" /></fmt:param>
+		<lams:Alert id="submissionDeadline" class>
+			<fmt:message key="authoring.info.teacher.set.restriction">
+				<fmt:param>
+					<lams:Date value="${sessionMap.submissionDeadline}" />
+				</fmt:param>
 			</fmt:message>
-		</div>
+		</lams:Alert>
 
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
-			<div class="small-space-top">
-				<h2>
-					<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true"/>
-				</h2>
+			<div class="panel panel-default voffset10">
+				<div class="panel-heading panel-title">
 
-				<c:choose>
-					<c:when test="${empty sessionMap.reflectEntry}">
-						<p>
-							<em> <fmt:message key="message.no.reflection.available" />
-							</em>
-						</p>
-					</c:when>
-					<c:otherwise>
-						<p>
-							<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
-						</p>
-					</c:otherwise>
-				</c:choose>
+					<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
+				</div>
+				<div class="panel-body">
 
-				<html:button property="ContinueButton"
-					onclick="return continueReflect()" styleClass="button">
-					<fmt:message key="label.edit" />
-				</html:button>
+					<c:choose>
+						<c:when test="${empty sessionMap.reflectEntry}">
+							<p>
+								<fmt:message key="message.no.reflection.available" />
+
+							</p>
+						</c:when>
+						<c:otherwise>
+							<div class="panel-body bg-warning">
+								<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
+							</div>
+						</c:otherwise>
+					</c:choose>
+
+					<html:button property="ContinueButton" onclick="return continueReflect()" styleClass="voffset5 btn btn-sm btn-default">
+						<fmt:message key="label.edit" />
+					</html:button>
+				</div>
 			</div>
 		</c:if>
 
 
-		<div class="space-bottom-top align-right">
+		<div class="voffset10">
 			<c:choose>
-				<c:when
-					test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
-					<html:link href="#nogo" property="FinishButton"
-						onclick="return continueReflect()" styleClass="button">
+				<c:when test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
+					<html:link href="#nogo" property="FinishButton" onclick="return continueReflect()"
+						styleClass="btn btn-primary pull-right">
 						<fmt:message key="label.continue" />
 					</html:link>
 				</c:when>
 				<c:otherwise>
-					<html:link href="#nogo" property="FinishButton" styleId="finishButton"
-						onclick="return finishSession()" styleClass="button">
-						<span class="nextActivity">
-							<c:choose>
-			 					<c:when test="${sessionMap.activityPosition.last}">
-			 						<fmt:message key="label.submit" />
-			 					</c:when>
-			 					<c:otherwise>
-			 		 				<fmt:message key="label.finished" />
-			 					</c:otherwise>
-			 				</c:choose>
-			 			</span>
+					<html:link href="#nogo" property="FinishButton" styleId="finishButton" onclick="return finishSession()"
+						styleClass="btn btn-primary pull-right na">
+						<span class="nextActivity"> <c:choose>
+								<c:when test="${sessionMap.activityPosition.last}">
+									<fmt:message key="label.submit" />
+								</c:when>
+								<c:otherwise>
+									<fmt:message key="label.finished" />
+								</c:otherwise>
+							</c:choose>
+						</span>
 					</html:link>
 				</c:otherwise>
 			</c:choose>
 		</div>
-	</div>
-	<!--closes footer-->
+
+		<!--closes footer-->
+	</lams:Page>
 </body>
 </lams:html>