Index: lams_tool_survey/web/WEB-INF/tags/AdvancedAccordian.tag
===================================================================
diff -u
--- lams_tool_survey/web/WEB-INF/tags/AdvancedAccordian.tag	(revision 0)
+++ lams_tool_survey/web/WEB-INF/tags/AdvancedAccordian.tag	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -0,0 +1,53 @@
+<%
+	 /****************************************************************
+	 * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+	 * =============================================================
+	 * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+	 * 
+	 * This program is free software; you can redistribute it and/or modify
+	 * it under the terms of the GNU General Public License version 2.0
+	 * as published by the Free Software Foundation.
+	 * 
+	 * This program is distributed in the hope that it will be useful,
+	 * but WITHOUT ANY WARRANTY; without even the implied warranty of
+	 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	 * GNU General Public License for more details.
+	 * 
+	 * You should have received a copy of the GNU General Public License
+	 * along with this program; if not, write to the Free Software
+	 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+	 * USA
+	 * 
+	 * http://www.gnu.org/licenses/gpl.txt
+	 * ****************************************************************
+	 */
+
+	/**
+	 * AdvancedAccordian.tag
+	 *	Author: Fiona Malikoff
+	 *	Description: Creates the show/hide entry for the Advanced Settings in Montoring.
+	 * Wiki: 
+	 */
+%>
+<%@ attribute name="title" required="true" rtexprvalue="true"%>
+
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+
+<div class="panel-group" id="accordionAdvanced" role="tablist" aria-multiselectable="true"> 
+    <div class="panel panel-default" >
+        <div class="panel-heading collapsable-icon-left" id="headingAdvanced">
+        	<span class="panel-title">
+	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced" >
+          	${title}
+        	</a>
+      		</span>
+        </div>
+
+        <div id="collapseAdvanced" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingAdvanced">
+		<jsp:doBody />
+		</div>
+	</div>
+</div>
+		
\ No newline at end of file
Index: lams_tool_survey/web/WEB-INF/tags/Arrow.tag
===================================================================
diff -u
--- lams_tool_survey/web/WEB-INF/tags/Arrow.tag	(revision 0)
+++ lams_tool_survey/web/WEB-INF/tags/Arrow.tag	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -0,0 +1,35 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%-- state = up: up arrow;  state = down: down arrow --%>
+<%@ attribute name="state" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="onclick" required="false" rtexprvalue="true"%>
+
+<c:choose>
+	<c:when test="${not empty title}">
+		<c:set var="fullTitle">title="${title}"</c:set>
+	</c:when>
+	<c:otherwise>
+		<c:set var="fullTitle" value=""/>
+	</c:otherwise>
+</c:choose>
+
+<c:choose>
+	<c:when test="${not empty onclick}">
+		<c:set var="fullOnclick">onclick="${onclick}"</c:set>
+	</c:when>
+	<c:otherwise>
+		<c:set var="fullOnclick" value=""/>
+	</c:otherwise>
+</c:choose>
+
+<c:choose>
+	<c:when test="${fn:containsIgnoreCase(state, 'up')}">
+		<i class="fa fa-long-arrow-up fa-pull-left" ${fullTitle} ${fullOnclick}></i>
+	</c:when>
+	<c:otherwise>
+		<i class="fa fa-long-arrow-down fa-pull-right"  ${fullTitle} ${fullOnclick}></i>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_survey/web/WEB-INF/tags/AuthoringButton.tag
===================================================================
diff -u -r29fac4bd0bdf28bcaaeee7aae4020ccb15b6e520 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/WEB-INF/tags/AuthoringButton.tag	(.../AuthoringButton.tag)	(revision 29fac4bd0bdf28bcaaeee7aae4020ccb15b6e520)
+++ lams_tool_survey/web/WEB-INF/tags/AuthoringButton.tag	(.../AuthoringButton.tag)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -122,12 +122,12 @@
     	window.close();
     }  				
 </script>	
-<p id="saveCancelButtons" >
-		<html:link href="javascript:;" property="cancel" onclick="javascript:doCancel()" styleClass="button right-buttons space-left">
-			<span class="cancelIcon"><fmt:message key="${cancelButtonLabelKey}" /></span>
-		</html:link>
-		<html:link href="javascript:doSubmit_Form_Only();" property="submit" styleClass="button right-buttons space-left">
+<div id="saveCancelButtons" >
+		<html:link href="javascript:doSubmit_Form_Only();" property="submit" styleClass="btn btn-primary pull-right">
 			<span class="okIcon"><fmt:message key="${saveButtonLabelKey}" /></span>
 		</html:link>
-</p>
+		<html:link href="javascript:;" property="cancel" onclick="javascript:doCancel()" styleClass="btn btn-default roffset5 pull-right">
+			<span class="cancelIcon"><fmt:message key="${cancelButtonLabelKey}" /></span>
+		</html:link>
+</div>
 <!-- end tab content -->
\ No newline at end of file
Index: lams_tool_survey/web/WEB-INF/tags/AuthoringRatingCriteria.tag
===================================================================
diff -u
--- lams_tool_survey/web/WEB-INF/tags/AuthoringRatingCriteria.tag	(revision 0)
+++ lams_tool_survey/web/WEB-INF/tags/AuthoringRatingCriteria.tag	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -0,0 +1,349 @@
+<% 
+ /**
+  * AuthoringRatingCriteria.tag
+  *	Author: Andrey Balan
+  *	Description: Creates list of rating criterias for authoring page
+  */
+ %>
+<%@ tag body-content="scriptless" %>
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<%@ taglib uri="tags-html" prefix="html" %>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+<c:set var="lams"><lams:LAMSURL/></c:set>
+
+<%@ attribute name="criterias" required="true" rtexprvalue="true" type="java.util.Collection" %>
+
+<%-- Optional attribute --%>
+<%@ attribute name="hasRatingLimits" required="false" rtexprvalue="true" %>
+<%@ attribute name="formContentPrefix" required="false" rtexprvalue="true" %>
+<%@ attribute name="styleId" required="false" rtexprvalue="true" %>
+<%@ attribute name="headerLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="addLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="deleteLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="upLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="downLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="minimumLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="maximumLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="noMinimumLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="noMaximumLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="jsWarningLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="allowCommentsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+
+<%-- Default value for message key --%>
+<c:if test="${empty hasRatingLimits}">
+	<c:set var="hasRatingLimits" value="false" scope="request"/>
+</c:if>
+<c:if test="${not empty formContentPrefix}">
+	<c:set var="formContentPrefix" value="${formContentPrefix}."/>
+</c:if>
+<c:if test="${empty headerLabel}">
+	<c:set var="headerLabel" value="label.rating.criterias" scope="request"/>
+</c:if>
+<c:if test="${empty addLabel}">
+	<c:set var="addLabel" value="label.add.criteria" scope="request"/>
+</c:if>
+<c:if test="${empty deleteLabel}">
+	<c:set var="deleteLabel" value="label.delete" scope="request"/>
+</c:if>
+<c:if test="${empty upLabel}">
+	<c:set var="upLabel" value="label.move.up" scope="request"/>
+</c:if>
+<c:if test="${empty downLabel}">
+	<c:set var="downLabel" value="label.move.down" scope="request"/>
+</c:if>
+<c:if test="${empty minimumLabel}">
+	<c:set var="minimumLabel" value="label.minimum" scope="request"/>
+</c:if>
+<c:if test="${empty maximumLabel}">
+	<c:set var="maximumLabel" value="label.maximum" scope="request"/>
+</c:if>
+<c:if test="${empty noMinimumLabel}">
+	<c:set var="noMinimumLabel" value="label.no.minimum" scope="request"/>
+</c:if>
+<c:if test="${empty noMaximumLabel}">
+	<c:set var="noMaximumLabel" value="label.no.maximum" scope="request"/>
+</c:if>
+<c:if test="${empty jsWarningLabel}">
+	<c:set var="jsWarningLabel" value="js.warning.max.min.limit" scope="request"/>
+</c:if>
+<c:if test="${empty allowCommentsLabel}">
+	<c:set var="allowCommentsLabel" value="label.allow.comments" scope="request"/>
+</c:if>
+<c:if test="${empty minNumberWordsLabel}">
+	<c:set var="minNumberWordsLabel" value="label.minimum.number.words" scope="request"/>
+</c:if>
+
+<!-- calculate whether isCommentsAllowed is true -->
+<c:set var="isCommentsEnabled" value="false"/>
+<c:set var="commentsMinWordsLimit" value="0"/>
+<c:forEach var="criteria" items="${criterias}" varStatus="status">
+	<c:if test="${criteria.commentsEnabled}">
+		<c:set var="isCommentsEnabled" value="true"/>
+		<c:set var="commentsMinWordsLimit" value="${criteria.commentsMinWordsLimit}"/>
+	</c:if>
+</c:forEach>
+
+<!-- begin tab content -->
+<script type="text/javascript">
+$(document).ready(function() { 
+	
+	// find max orderId
+	<c:set var="maxOrderId" value="0"/>
+	<c:forEach var="criteria" items="${criterias}" varStatus="status">
+		<c:if test="${criteria.orderId > maxOrderId}">
+			<c:set var="maxOrderId" value="${criteria.orderId}"/>
+		</c:if>
+	</c:forEach>
+	var maxOrderId = ${maxOrderId};
+	
+	function addCriteria() {
+		//increase maxOrderId by 1
+		maxOrderId++;
+		$("#criteria-max-order-id").val(maxOrderId);
+		
+		jQuery('<tr/>').append(jQuery('<td/>', {
+			'class': 'criteria-info',
+		    html: '<input type="hidden" name="criteriaOrderId' + maxOrderId + '" value="' + maxOrderId + '">' + 
+		    		'<input type="text" name="criteriaTitle' + maxOrderId + '" value="" class="form-control">'
+		    		
+		})).append(jQuery('<td/>', {
+			width: '40px',
+			html: '<div class="arrow-up fa fa-long-arrow-up fa-pull-left" title="<fmt:message key="${upLabel}"/>" />' + 
+		    		'<div class="arrow-down fa fa-long-arrow-down fa-pull-right" title="<fmt:message key="${downLabel}"/>" />'
+		    		
+		})).append(jQuery('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		})).appendTo('#criterias-table');
+		
+		reactivateArrows();
+	}
+	<c:if test="${empty criterias}">
+		addCriteria(); 
+		addCriteria();
+	</c:if>
+	reactivateArrows();
+	
+	function reactivateArrows() {
+		$('#criterias-table tr').each(function() {
+
+		    $this = $(this); // cache $(this)
+		    
+		    if ($this.is(':first-child')) {
+		    	$(".arrow-up", $this).removeClass("fa fa-long-arrow-up fa-pull-left");
+		    } else {
+		    	$(".arrow-up", $this).addClass("fa fa-long-arrow-up fa-pull-left");
+		    }
+		    
+		    if ($this.is(':last-child')) {
+		    	$(".arrow-down", $this).removeClass("fa fa-long-arrow-down fa-pull-right");
+		    } else {
+		    	$(".arrow-down", $this).addClass("fa fa-long-arrow-down fa-pull-right");
+		    }
+		});
+	}
+	
+	//upCriteria
+	 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		var currentRow = $(this).closest('tr');
+		var currentCriteriaTd = $( ".criteria-info", currentRow);
+		var currentOrderId = $( "input[name^='criteriaOrderId']", currentCriteriaTd);
+		//var textEl1 = $( "input[id^='criteria-title-']", currentRow);
+		var prevRow = currentRow.prev();
+		var prevCriteriaTd = $( ".criteria-info", prevRow);
+		var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
+		//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+		
+		//swap orderIds
+		var temp = currentOrderId.val();
+		currentOrderId.val(prevOrderId.val());
+		prevOrderId.val(temp);
+		
+		//swap elements
+		currentCriteriaTd.detach().prependTo(prevRow);
+		prevCriteriaTd.detach().prependTo(currentRow);
+		
+		reactivateArrows();
+	 } );
+	 
+	//downCriteria
+	 $( "body" ).on( "click", ".fa-long-arrow-down", function() {
+		var currentRow = $(this).closest('tr');
+		var currentCriteriaTd = $( ".criteria-info", currentRow);
+		var currentOrderId = $( "input[name^='criteriaOrderId']", currentCriteriaTd);
+		//var textEl1 = $( "input[id^='criteria-title-']", currentRow);
+		var nextRow = currentRow.next();
+		var nextCriteriaTd = $( ".criteria-info", nextRow);
+		var nextOrderId = $( "input[name^='criteriaOrderId']", nextCriteriaTd);
+		//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+		
+		//swap orderIds
+		var temp = currentOrderId.val();
+		currentOrderId.val(nextOrderId.val());
+		nextOrderId.val(temp);
+		
+		//swap elements
+		currentCriteriaTd.detach().prependTo(nextRow);
+		nextCriteriaTd.detach().prependTo(currentRow);
+		
+		reactivateArrows();
+	 });
+	 
+	 //deleteCriteria
+	 $( "body" ).on( "click", ".fa-times", function() {
+		var currentRow = $(this).closest('tr');
+		currentRow.remove();
+		
+		reactivateArrows();
+	});
+	 
+	 //addCriteria
+	 $( "body" ).on( "click", "#add-criteria", function() {
+		 addCriteria();
+	});
+	 
+ 	//spinner
+ 	var minimumWordsSpinner = $("#comments-min-words-limit").spinner({ 
+ 		min: 0,
+ 		disabled: ${!isCommentsEnabled}
+ 	});
+ 	$("#enable-comments").click(function() {
+ 		if ( minimumWordsSpinner.spinner( "option", "disabled" ) ) {
+ 			minimumWordsSpinner.spinner( "enable" );
+ 			$("#comments-min-words-limit-label").removeClass("gray-color");
+ 		} else {
+ 			minimumWordsSpinner.spinner( "disable" );
+ 			$("#comments-min-words-limit-label").addClass("gray-color");
+ 		}
+     });
+	 
+})
+
+	//check minimum is not bigger than maximum
+	function validateRatingLimits(isMinimum) {
+		var minRateDropDown = document.getElementById("minimum-rates");
+		var minLimit = parseInt(minRateDropDown.options[minRateDropDown.selectedIndex].value);
+		var maxRateDropDown = document.getElementById("maximum-rates");
+		var maxLimit = parseInt(maxRateDropDown.options[maxRateDropDown.selectedIndex].value);
+
+		if ((minLimit > maxLimit) && !(maxLimit == 0)) {
+			if (isMinimum) {
+				minRateDropDown.selectedIndex = maxRateDropDown.selectedIndex;
+			} else {
+				maxRateDropDown.selectedIndex = minRateDropDown.selectedIndex;
+			}
+
+			alert('<fmt:message key="js.warning.max.min.limit"/>');
+		}
+	}
+</script>
+
+<div class="rating-criteria-tag" style="${styleId}">
+
+	<div class="panel panel-default voffset5">
+		<div class="panel-heading panel-title">
+			<label><fmt:message key="${headerLabel}" /></label>
+		</div>
+	
+		<div class="form-group roffset10 loffset10">
+			<input type="hidden" name="criteriaMaxOrderId" id="criteria-max-order-id" value="${maxOrderId}">
+			<table class="table table-condensed table-no-border" id="criterias-table">
+		
+				<c:forEach var="criteria" items="${criterias}" varStatus="status">
+					<c:if test="${!criteria.commentsEnabled}">
+						<tr>
+							
+							<td class="criteria-info">
+								<input type="hidden" name="criteriaOrderId${criteria.orderId}" value="${criteria.orderId}">
+								<input type="text" name="criteriaTitle${criteria.orderId}" value="${criteria.title}" class="form-control">
+							</td>
+							
+							<td width="40px">
+								<div class="arrow-up" title="<fmt:message key="${upLabel}"/>"></div>
+								<div class="arrow-down" title="<fmt:message key="${downLabel}"/>"></div>
+							</td>
+			                
+							<td width="20px">
+								<i class="fa fa-times" title="<fmt:message key="${deleteLabel}" />"></i>
+							</td>
+						</tr>
+					</c:if>
+				</c:forEach>
+			</table>
+	
+			<div style="height: 25px; margin-top: -10px;">
+				<a href="#nogo" class="btn btn-default btn-xs pull-right" id="add-criteria">
+					<i class="fa fa-plus"></i>&nbsp;<fmt:message key="${addLabel}" /> 
+				</a>
+			</div>
+	
+			<c:if test="${hasRatingLimits}">
+				<div>
+					<label for="minimum-rates">
+						<fmt:message key="${minimumLabel}" />
+					</label>
+					<html:select property="${formContentPrefix}minimumRates" styleId="minimum-rates" onmouseup="validateRatingLimits(true);" 
+							styleClass="form-control form-control-inline">
+						<html:option value="0">
+							<fmt:message key="${noMinimumLabel}" />
+						</html:option>
+						<html:option value="1">1</html:option>
+						<html:option value="2">2</html:option>
+						<html:option value="3">3</html:option>
+						<html:option value="4">4</html:option>
+						<html:option value="5">5</html:option>
+						<html:option value="6">6</html:option>
+						<html:option value="7">7</html:option>
+						<html:option value="8">8</html:option>
+						<html:option value="9">9</html:option>
+						<html:option value="10">10</html:option>
+					</html:select>
+				
+					<label for="maximum-rates">
+						<fmt:message key="${maximumLabel}" />
+					</label>
+					<html:select property="${formContentPrefix}maximumRates" styleId="maximum-rates" onmouseup="validateRatingLimits(false);" 
+							styleClass="form-control form-control-inline">
+						<html:option value="0">
+							<fmt:message key="${noMaximumLabel}" />
+						</html:option>
+						<html:option value="1">1</html:option>
+						<html:option value="2">2</html:option>
+						<html:option value="3">3</html:option>
+						<html:option value="4">4</html:option>
+						<html:option value="5">5</html:option>
+						<html:option value="6">6</html:option>
+						<html:option value="7">7</html:option>
+						<html:option value="8">8</html:option>
+						<html:option value="9">9</html:option>
+						<html:option value="10">10</html:option>
+					</html:select>
+				</div>
+			</c:if>
+	
+			<div class="checkbox">
+				<label for="enable-comments">
+					<input type="checkbox" name="isCommentsEnabled" value="true" class="noBorder" id="enable-comments"
+						<c:if test="${isCommentsEnabled}">checked="checked"</c:if>
+					/>
+					<fmt:message key="${allowCommentsLabel}" />
+				</label>
+			</div>
+	
+			<div>
+				<label for="comments-min-words-limit" id="comments-min-words-limit-label"
+					<c:if test="${!isCommentsEnabled}">class="gray-color"</c:if>
+				>
+					<fmt:message key="${minNumberWordsLabel}" >
+						<fmt:param> </fmt:param>
+					</fmt:message>
+				</label>
+				<input type="text" name="commentsMinWordsLimit" id="comments-min-words-limit" value="${commentsMinWordsLimit}" class="form-control-sm"/>
+			</div>
+		</div>
+	</div>
+</div>
+<!-- end tab content -->
\ No newline at end of file
Index: lams_tool_survey/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdc884b8e6274ebbc664d1ee940e565803445bb26 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dc884b8e6274ebbc664d1ee940e565803445bb26)
+++ lams_tool_survey/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -10,7 +10,12 @@
 <%@ attribute name="contentFolderID" required="false" rtexprvalue="true"%>
 <%@ attribute name="displayExpanded" required="false" rtexprvalue="true"%>
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
+<%@ attribute name="method" required="false" rtexprvalue="true"%>
 
+<c:if test="${empty method}">
+	<c:set var="method" value="inline" />
+</c:if>
+
 <c:set var="language">
 	<lams:user property="fckLanguageMapping" />
 </c:set>
@@ -19,6 +24,10 @@
 	<c:set var="toolbarSet" value="Default" />
 </c:if>
 
+<c:if test="${fn:containsIgnoreCase(method,'Inline')}">
+	<c:set var="toolbarSet">${toolbarSet}Inline</c:set>
+</c:if>
+
 <c:if test="${empty displayExpanded}">
 	<c:set var="displayExpanded" value="true" />
 </c:if>
@@ -33,10 +42,10 @@
 <c:set var="fixedValue" value="${fn:replace(value,'&lt','&amp;lt')}"/>
 <c:set var="fixedValue" value="${fn:replace(fixedValue,'&gt','&amp;gt')}"/>
 
-<textarea id="${id}" name="${id}" style="display: none; visibility: hidden; height: 0px;">${fixedValue}</textarea>
+<textarea id="${id}" name="${id}" style="display: none; visibility: hidden; height: 0px;" placeholder="${placeholder}">${fixedValue}</textarea>
 
 <c:if test="${empty ckEditorBasePath}">
-	<c:set scope="request" var="ckEditorBasePath"><lams:LAMSURL/>ckeditor/</c:set>
+	<c:set scope="request" var="ckEditorBasePath">/lams/ckeditor/</c:set>
 	<script type="text/javascript" src="${ckEditorBasePath}ckeditor.js"></script>
 </c:if>
 
@@ -59,10 +68,9 @@
 	    var editor = CKEDITOR.instances["${id}"];
 	    if (editor) { editor.destroy(true); }
 	    
-		var instance = CKEDITOR.replace( "${id}", {
+		var instance = CKEDITOR.${method}( "${id}", {
 				width                         : "${width}",
 				height                        : "${height}",
-				autoGrow_minHeight            : "${height}".replace("px", ""),
 				toolbar                       : "${toolbarSet}",
 				language                      : "${language}",
 				defaultLangugage              : "en",
Index: lams_tool_survey/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u
--- lams_tool_survey/web/WEB-INF/tags/Comments.tag	(revision 0)
+++ lams_tool_survey/web/WEB-INF/tags/Comments.tag	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -0,0 +1,47 @@
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="toolSessionId" required="true" rtexprvalue="true"%>
+<%@ attribute name="toolSignature" required="true" rtexprvalue="true"%>
+<%@ attribute name="height" required="false" rtexprvalue="true"%>
+<%@ attribute name="width" required="false" rtexprvalue="true"%>
+<%@ attribute name="mode" required="false" rtexprvalue="true"%>
+<%@ attribute name="likeAndDislike" required="false" rtexprvalue="true"%>
+<%@ attribute name="readOnly" required="false" rtexprvalue="true"%>
+<%@ attribute name="pageSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty width}">
+	<c:set var="width" value="100%" />
+</c:if>
+
+<c:if test="${empty height}">
+	<c:set var="height" value="auto" />
+</c:if>
+
+<c:set var="modeStr" value=""/>
+<c:if test="${!empty mode}">
+	<c:set var="modeStr">&mode=${mode}</c:set>
+</c:if>
+
+<c:if test="${empty likeAndDislike}">
+	<c:set var="likeAndDislike" value="false" />
+</c:if>
+
+<c:if test="${empty readOnly}">
+	<c:set var="readOnly" value="false" />
+</c:if>
+
+<c:if test="${empty sortBy}">
+	<c:set var="sortBy" value="0" /> <!-- 0: date, 1: likes -->
+</c:if>
+
+<div id="commentFrame" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
+<script>
+$(document).ready(function(){
+	var url='<lams:LAMSURL/>comments/comments.do?externalID=${toolSessionId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}';
+	$('#commentFrame').load(url);
+});
+</script>
\ No newline at end of file
Index: lams_tool_survey/web/WEB-INF/tags/CommentsAuthor.tag
===================================================================
diff -u
--- lams_tool_survey/web/WEB-INF/tags/CommentsAuthor.tag	(revision 0)
+++ lams_tool_survey/web/WEB-INF/tags/CommentsAuthor.tag	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -0,0 +1,51 @@
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-html" prefix="html"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+
+<%@ attribute name="allowCommentsVariableName" required="false" rtexprvalue="true"%>
+<%@ attribute name="allowCommentLabelKey" required="false" rtexprvalue="true"%>
+<%@ attribute name="likeDislikeVariableName" required="false" rtexprvalue="true"%>
+<%@ attribute name="likeOnlyCommentLabelKey" required="false" rtexprvalue="true"%>
+<%@ attribute name="likeDislikeLabelKey" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty allowCommentsVariableName}">
+	<c:set var="allowCommentsVariableName" value="allowComments" />
+</c:if>
+<c:if test="${empty allowCommentLabelKey}">
+	<c:set var="allowCommentLabelKey" value="advanced.allow.comments" />
+</c:if>
+<c:if test="${empty likeDislikeVariableName}">
+	<c:set var="likeDislikeVariableName" value="commentsLikeAndDislike" />
+</c:if>
+<c:if test="${empty likeOnlyCommentLabelKey}">
+	<c:set var="likeOnlyCommentLabelKey" value="advanced.comments.like.only" />
+</c:if>
+<c:if test="${empty likeDislikeLabelKey}">
+	<c:set var="likeDislikeLabelKey" value="advanced.comments.like.and.dislike" />
+</c:if>
+
+<div class="checkbox">
+	<label>
+	<html:checkbox property="${allowCommentsVariableName}" value="1"
+		styleId="${allowCommentsVariableName}">
+	</html:checkbox>
+	<fmt:message key="${allowCommentLabelKey}"/>
+	</label>
+</div>
+<div class="loffset20" id="likedislike">
+		<html:radio property="${likeDislikeVariableName}" value="false" />&nbsp;<fmt:message key="${likeOnlyCommentLabelKey}" /> &nbsp;
+		<html:radio property="${likeDislikeVariableName}" value="true" />&nbsp;<fmt:message key="${likeDislikeLabelKey}" /> 
+</div>
+
+<script>
+jQuery( document ).ready(function( $ ) {
+	if (! $("#${allowCommentsVariableName}").is(':checked')) {
+		$("#likedislike").hide();
+	}
+	$("#${allowCommentsVariableName}").click(function() {
+		$("#likedislike").toggle('slow');
+	});
+});
+</script>
+
+
Index: lams_tool_survey/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -re5688be8da56dbbc69bb5441cace7491712cd13b -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision e5688be8da56dbbc69bb5441cace7491712cd13b)
+++ lams_tool_survey/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -12,25 +12,38 @@
 <div class="row no-gutter">
 	<div class="col-xs-12">
 		<div class="container" id="content">
+		
+		<c:choose>
+		<c:when test='${type == "navbar"}'>
+			<jsp:doBody />
+		</c:when> 
+		<c:otherwise>
 			<div class="panel panel-default panel-${type}-page">
-				<div class="panel-heading">
-					<c:if test="${not empty title}">
+				<c:if test="${not empty title}">
+					<div class="panel-heading">
 						<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>
+						<c:if test="${not empty headingContent}">
+							<c:out value="${headingContent}" escapeXml="true" />
+						</c:if>
+					</div>
+				</c:if>
 				<div class="panel-body panel-${type}-body">
 					<jsp:doBody />
 				</div>
 			</div>
+		</c:otherwise>
+		</c:choose>
+			
 		</div>
 		<!-- End content container -->
 	</div>
 </div>
+
+
+		
+			
Index: lams_tool_survey/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u
--- lams_tool_survey/web/WEB-INF/tags/Rating.tag	(revision 0)
+++ lams_tool_survey/web/WEB-INF/tags/Rating.tag	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -0,0 +1,194 @@
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
+<%@ tag body-content="scriptless" %>
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<%@ taglib uri="tags-html" prefix="html" %>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+<c:set var="lams"><lams:LAMSURL/></c:set>
+
+<%@ attribute name="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
+
+<%-- Optional attribute --%>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
+<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
+<%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
+<%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="showComments" required="false" rtexprvalue="true" %>
+
+<%-- Default value for message key --%>
+<c:if test="${empty disabled}">
+	<c:set var="disabled" value="false" scope="request"/>
+</c:if>
+<c:if test="${empty isItemAuthoredByUser}">
+	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+</c:if>
+<c:if test="${empty maxRates}">
+	<c:set var="maxRates" value="0" scope="request"/>
+</c:if>
+<c:if test="${empty countRatedItems}">
+	<c:set var="countRatedItems" value="0" scope="request"/>
+</c:if>
+<c:if test="${empty yourRatingLabel}">
+	<c:set var="yourRatingLabel" value="label.your.rating" scope="request"/>
+</c:if>
+<c:if test="${empty averageRatingLabel}">
+	<c:set var="averageRatingLabel" value="label.average.rating" scope="request"/>
+</c:if>
+<c:if test="${empty minNumberWordsLabel}">
+	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
+</c:if>
+<c:if test="${empty showComments}">
+	<c:set var="showComments" value="true" scope="request"/>
+</c:if>
+<c:set var="isCommentsEnabled" value="${itemRatingDto.commentsEnabled && showComments}"/>
+
+<c:if test="${isCommentsEnabled}">
+	<c:set var="userId"><lams:user property="userID" /></c:set>
+	<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
+		<c:if test="${comment.userId == userId}">
+			<c:set var="commentLeftByUser" value="${comment}"/>
+		</c:if>
+	</c:forEach>
+</c:if>
+
+<%--Rating stars area---------------------------------------%>
+
+<div class="extra-controls-inner">
+<div class="rating-stars-holder text-center center-block">
+
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
+	
+		<c:choose>
+			<c:when test='${disabled || isItemAuthoredByUser || (maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating || !isCriteriaNotRatedByUser}'>
+				<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+			</c:when>
+			<c:otherwise>
+				<c:set var="ratingStarsClass" value="rating-stars"/>
+			</c:otherwise>
+		</c:choose>
+			
+		<strong>
+			${criteriaDto.ratingCriteria.title}
+		</strong>
+			
+		<c:choose>
+			<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
+				<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
+			</c:when>
+			<c:otherwise>
+				<c:set var="ratingDataAverage" value="0"/>
+			</c:otherwise>
+		</c:choose>
+		
+		<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
+		</div>
+			
+		<c:choose>
+			<c:when test="${isItemAuthoredByUser}">
+				<div class="rating-stars-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
+					<c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
+							<span id="user-rating-${objectId}">
+								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
+							</span>
+						</fmt:param>			
+						<fmt:param>
+							<span id="average-rating-${objectId}">
+								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+							</span>
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+				
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
+
+</div>
+
+</div>
+
+<%--Comments area---------------------------------------%>
+<c:if test="${isCommentsEnabled}">
+	<div id="comments-area-${itemRatingDto.itemId}">
+	
+		<c:choose>
+			<c:when test='${isItemAuthoredByUser}'>
+				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
+					<div class="rating-comment">
+						<c:out value="${comment.comment}" escapeXml="false" />
+					</div>
+				</c:forEach>
+			</c:when>
+			
+			<c:when test='${not empty commentLeftByUser}'>
+				<div class="rating-comment">
+					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
+				</div>
+			</c:when>
+			
+			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
+				<div id="add-comment-area-${itemRatingDto.itemId}">
+			
+					<!-- Comment min words limit -->
+					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
+					
+						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+							<fmt:message key="${minNumberWordsLabel}">
+								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
+							</fmt:message>
+						</lams:Alert>
+					</c:if>		
+				
+					<div class="no-gutter">
+						<div class="col-xs-12 col-sm-11 ">
+						<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" onfocus="if(this.value==this.defaultValue)this.value='';" 
+								onblur="if(this.value=='')this.value=this.defaultValue;" 
+								class="form-control"><fmt:message key="label.comment.textarea.tip"/></textarea>
+						</div>
+						<div class="button add-comment add-comment-new col-xs-12 col-sm-1 " data-item-id="${itemRatingDto.itemId}" data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}">
+						</div>
+					</div>		
+				</div>			
+			</c:when>
+		</c:choose>
+			
+	</div>	
+</c:if>
\ No newline at end of file
Index: lams_tool_survey/web/WEB-INF/tags/RestrictedUsageAccordian.tag
===================================================================
diff -u
--- lams_tool_survey/web/WEB-INF/tags/RestrictedUsageAccordian.tag	(revision 0)
+++ lams_tool_survey/web/WEB-INF/tags/RestrictedUsageAccordian.tag	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -0,0 +1,54 @@
+<%
+	 /****************************************************************
+	 * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+	 * =============================================================
+	 * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+	 * 
+	 * This program is free software; you can redistribute it and/or modify
+	 * it under the terms of the GNU General Public License version 2.0
+	 * as published by the Free Software Foundation.
+	 * 
+	 * This program is distributed in the hope that it will be useful,
+	 * but WITHOUT ANY WARRANTY; without even the implied warranty of
+	 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	 * GNU General Public License for more details.
+	 * 
+	 * You should have received a copy of the GNU General Public License
+	 * along with this program; if not, write to the Free Software
+	 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+	 * USA
+	 * 
+	 * http://www.gnu.org/licenses/gpl.txt
+	 * ****************************************************************
+	 */
+
+	/**
+	 * AdvancedAccordian.tag
+	 *	Author: Fiona Malikoff
+	 *	Description: Creates the show/hide entry for the Restricted Usage Settings in Monitoring.
+	 * Wiki: 
+	 */
+%>
+<%@ attribute name="title" required="true" rtexprvalue="true"%>
+
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+
+<div class="panel-group" id="accordionRestrictUsageDiv" role="tablist" aria-multiselectable="true"> 
+    <div class="panel panel-default" >
+        <div class="panel-heading collapsable-icon-left" id="headingRestrictedUsageDiv">
+        	<span class="panel-title">
+	    	<a class="collapsed" role="button" data-toggle="collapse" href="#restrictUsageDiv" aria-expanded="false" aria-controls="restrictUsageDiv" >
+          	${title}
+        	</a>
+      		</span>
+        </div>
+
+
+		<div id="restrictUsageDiv" class="panel-body panel-collapse collapse" role="tabpanel" aria-labelledby="headingRestrictedUsageDiv">
+		<jsp:doBody />
+		</div>
+	</div>
+</div>
+		
\ No newline at end of file
Index: lams_tool_survey/web/WEB-INF/tags/TSTable.tag
===================================================================
diff -u
--- lams_tool_survey/web/WEB-INF/tags/TSTable.tag	(revision 0)
+++ lams_tool_survey/web/WEB-INF/tags/TSTable.tag	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} form-horizontal">
+	        <button type="button" class="btn btn-xs first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-xs prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-xs next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-xs last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<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>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_survey/web/WEB-INF/tags/Tab.tag
===================================================================
diff -u -rac6c077d83ef253fa3f07a515edc49077317029a -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/WEB-INF/tags/Tab.tag	(.../Tab.tag)	(revision ac6c077d83ef253fa3f07a515edc49077317029a)
+++ lams_tool_survey/web/WEB-INF/tags/Tab.tag	(.../Tab.tag)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -1,85 +1,89 @@
-<%
-	 /****************************************************************
-	 * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
-	 * =============================================================
-	 * License Information: http://lamsfoundation.org/licensing/lams/2.0/
-	 * 
-	 * This program is free software; you can redistribute it and/or modify
-	 * it under the terms of the GNU General Public License version 2.0
-	 * as published by the Free Software Foundation.
-	 * 
-	 * This program is distributed in the hope that it will be useful,
-	 * but WITHOUT ANY WARRANTY; without even the implied warranty of
-	 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-	 * GNU General Public License for more details.
-	 * 
-	 * You should have received a copy of the GNU General Public License
-	 * along with this program; if not, write to the Free Software
-	 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
-	 * USA
-	 * 
-	 * http://www.gnu.org/licenses/gpl.txt
-	 * ****************************************************************
-	 */
-
-	/**
-	 * Tab.tag
-	 *	Author: Mitchell Seaton
-	 *	Description: Creates a tab element.
-	 * Wiki: 
-	 */
-%>
-<%@ tag body-content="empty"%>
-<%@ attribute name="id" required="true" rtexprvalue="true"%>
-<%@ attribute name="value" required="false" rtexprvalue="true"%>
-<%@ attribute name="key" required="false" rtexprvalue="true"%>
-<%@ attribute name="inactive" required="false" rtexprvalue="true"%>
-<%@ attribute name="methodCall" required="false" rtexprvalue="true"%>
-
-<%@ taglib uri="tags-core" prefix="c"%>
-<%@ taglib uri="tags-fmt" prefix="fmt"%>
-<%@ taglib uri="tags-lams" prefix="lams"%>
-
-<%-- Check if  bundle is set --%>
-<c:if test="${not empty bundle}">
-	<fmt:setBundle basename="${bundle}"/>
-</c:if>
-
-<c:set var="lams">
-	<lams:LAMSURL />
-</c:set>
-
-<c:set var="tabTitle" value="${value}" />
-
-<%--
-	Usually methodCall is selectTab, but the calling code can override methodCall if desired.
-	this is handy if the page needs different logic on initialisation and user switching tabs
---%>
-
-<c:if test="${methodCall == null}">
-	<c:choose>
-		<c:when test="${dControl}">
-			<c:set var="methodCall" value="doSelectTab" />
-		</c:when>
-		<c:otherwise>
-			<c:set var="methodCall" value="selectTab" />
-		</c:otherwise>
-	</c:choose>
-</c:if>
-
-<c:if test="${key != null && value == null}">
-	<c:set var="tabTitle">
-		<fmt:message key="${key}" />
-	</c:set>
-</c:if>
-
-<div class="nav-box">
-	<div class="tab-left" id="tab-left-${id}"></div>
-	<div class="tab-middle" id="tab-middle-${id}">
-		<a class="tab-middle-link" id="tab-middle-link-${id}" href="#"
-			onclick="${methodCall}(${id});return false;">
-			${tabTitle}
-		</a>
-	</div>
-	<div class="tab-right" id="tab-right-${id}"></div>
-</div>
+<%
+	 /****************************************************************
+	 * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+	 * =============================================================
+	 * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+	 * 
+	 * This program is free software; you can redistribute it and/or modify
+	 * it under the terms of the GNU General Public License version 2.0
+	 * as published by the Free Software Foundation.
+	 * 
+	 * This program is distributed in the hope that it will be useful,
+	 * but WITHOUT ANY WARRANTY; without even the implied warranty of
+	 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	 * GNU General Public License for more details.
+	 * 
+	 * You should have received a copy of the GNU General Public License
+	 * along with this program; if not, write to the Free Software
+	 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+	 * USA
+	 * 
+	 * http://www.gnu.org/licenses/gpl.txt
+	 * ****************************************************************
+	 */
+
+	/**
+	 * Tab.tag
+	 *	Author: Fiona Malikoff
+	 *	Description: Creates a tab element within the Hybrid Tab Header.
+	 * Wiki: 
+	 */
+%>
+<%@ tag body-content="empty"%>
+<%@ attribute name="id" required="true" rtexprvalue="true"%>
+<%@ attribute name="value" required="false" rtexprvalue="true"%>
+<%@ attribute name="key" required="false" rtexprvalue="true"%>
+<%@ attribute name="inactive" required="false" rtexprvalue="true"%>
+<%@ attribute name="methodCall" required="false" rtexprvalue="true"%>
+
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+
+<%-- Check if  bundle is set --%>
+<c:if test="${not empty bundle}">
+	<fmt:setBundle basename="${bundle}"/>
+</c:if>
+
+<c:set var="lams">
+	<lams:LAMSURL />
+</c:set>
+
+<c:set var="tabTitle" value="${value}" />
+
+<%--
+	Usually methodCall is selectTab, but the calling code can override methodCall if desired.
+	this is handy if the page needs different logic on initialisation and user switching tabs
+	
+	-- 			onclick="${methodCall}(${id});return false;">
+	
+--%>
+
+<c:if test="${methodCall == null}">
+	<c:choose>
+		<c:when test="${dControl}">
+			<c:set var="methodCall" value="doSelectTab" />
+		</c:when>
+		<c:otherwise>
+			<c:set var="methodCall" value="selectTab" />
+		</c:otherwise>
+	</c:choose>
+</c:if>
+
+<c:if test="${key != null && value == null}">
+	<c:set var="tabTitle">
+		<fmt:message key="${key}" />
+	</c:set>
+</c:if>
+
+<c:set var="class" value=""/>
+<c:if test="${id == 1}">
+	<c:set var="class">class="active"</c:set>
+</c:if>
+	
+<c:set var="disabled" value=""/>
+<c:if test="${inactive}">
+	<c:set var="class">class="disabled"</c:set>
+</c:if>
+
+<li role="presentation" ${class}><a href="#t${id}" aria-controls="t${id}" role="tab" onclick="${methodCall}(${id});return false;">${tabTitle}</a></li>
Index: lams_tool_survey/web/WEB-INF/tags/TabBody.tag
===================================================================
diff -u -r9481bb9c6f8c0e4d6fbed6b230a41c77feda64c6 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/WEB-INF/tags/TabBody.tag	(.../TabBody.tag)	(revision 9481bb9c6f8c0e4d6fbed6b230a41c77feda64c6)
+++ lams_tool_survey/web/WEB-INF/tags/TabBody.tag	(.../TabBody.tag)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -1,52 +1,44 @@
-<%/****************************************************************
- * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
- * =============================================================
- * License Information: http://lamsfoundation.org/licensing/lams/2.0/
- * 
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License version 2.0
- * as published by the Free Software Foundation.
- * 
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- * 
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
- * USA
- * 
- * http://www.gnu.org/licenses/gpl.txt
- * ****************************************************************
- */
-
-/**
- * TabBody.tag
- *	Author: Mitchell Seaton
- *	Description: Creates the body container for a tab element
- * Wiki: 
- */
-
-		%>
-<%@ tag body-content="scriptless"%>
-<%@ attribute name="id" required="true" rtexprvalue="true"%>
-<%@ attribute name="tabTitle" required="false" rtexprvalue="true"%>
-<%@ attribute name="titleKey" required="false" rtexprvalue="true"%>
-<%@ attribute name="page" required="false" rtexprvalue="true"%>
-<%@ taglib uri="tags-core" prefix="c"%>
-<%@ taglib uri="tags-bean" prefix="bean"%>
-
-<!-- begin tab content -->
-<div class="box" id="tabbody${id}">
-	<c:choose>
-		<c:when test="${page != null}">
-			<jsp:include page="${page}" />
-		</c:when>
-		<c:otherwise>
-			<jsp:doBody />
-		</c:otherwise>
-	</c:choose>
-
-</div>
-<!-- end tab content -->
+<%/****************************************************************
+ * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+ * =============================================================
+ * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+ * 
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 2.0
+ * as published by the Free Software Foundation.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+ * USA
+ * 
+ * http://www.gnu.org/licenses/gpl.txt
+ * ****************************************************************
+ */
+
+/**
+ * TabBody.tag
+ *	Author: Mitchell Seaton
+ *	Description: Creates the body container for a tab element
+ * Wiki: 
+ */
+
+%>
+<%@ attribute name="id" required="true" rtexprvalue="true"%>
+<%@ attribute name="tabTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleKey" required="false" rtexprvalue="true"%>
+<%@ attribute name="page" required="false" rtexprvalue="true"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-bean" prefix="bean"%>
+
+<c:set var="class" value=""/>
+<c:if test="${id == 1}">
+	<c:set var="class">active</c:set>
+</c:if>
+
+<div role="tabpanel" class="tab-pane ${class}" id="t${id}"><jsp:include page="${page}"/></div>
Index: lams_tool_survey/web/WEB-INF/tags/TabBodyArea.tag
===================================================================
diff -u
--- lams_tool_survey/web/WEB-INF/tags/TabBodyArea.tag	(revision 0)
+++ lams_tool_survey/web/WEB-INF/tags/TabBodyArea.tag	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -0,0 +1,39 @@
+<%/****************************************************************
+ * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+ * =============================================================
+ * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+ * 
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 2.0
+ * as published by the Free Software Foundation.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+ * USA
+ * 
+ * http://www.gnu.org/licenses/gpl.txt
+ * ****************************************************************
+ */
+
+/**
+ * TabBodyArea.tag
+ *	Author: Fiona Malikoff
+ *	Description: Creates the panel body area for a nav bar screen
+ * Wiki: 
+ */
+
+%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-bean" prefix="bean"%>
+
+<div class="panel-body panel-monitor-body">
+	 <jsp:doBody />
+</div>
+
+</div> <!--  close tab opened in TabHeader -->
\ No newline at end of file
Index: lams_tool_survey/web/WEB-INF/tags/TabBodys.tag
===================================================================
diff -u
--- lams_tool_survey/web/WEB-INF/tags/TabBodys.tag	(revision 0)
+++ lams_tool_survey/web/WEB-INF/tags/TabBodys.tag	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -0,0 +1,37 @@
+<%/****************************************************************
+ * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+ * =============================================================
+ * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+ * 
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 2.0
+ * as published by the Free Software Foundation.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+ * USA
+ * 
+ * http://www.gnu.org/licenses/gpl.txt
+ * ****************************************************************
+ */
+
+/**
+ * TabBodys.tag
+ *	Author: Fiona Malikoff
+ *	Description: Create a tabbody list from nested TabBody tags.
+ * Wiki: 
+ */
+
+		%>
+<%@ tag body-content="scriptless"%>
+
+<!-- tab body holder table -->
+<div class="tab-content">
+	<jsp:doBody />
+</div>
Index: lams_tool_survey/web/WEB-INF/tags/TabName.tag
===================================================================
diff -u -r7329c82c5388fbb86b6a0a2b27a71151ee8f116e -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/WEB-INF/tags/TabName.tag	(.../TabName.tag)	(revision 7329c82c5388fbb86b6a0a2b27a71151ee8f116e)
+++ lams_tool_survey/web/WEB-INF/tags/TabName.tag	(.../TabName.tag)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -1,59 +1,59 @@
-<%/****************************************************************
- * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
- * =============================================================
- * License Information: http://lamsfoundation.org/licensing/lams/2.0/
- * 
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License version 2.0
- * as published by the Free Software Foundation.
- * 
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- * 
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
- * USA
- * 
- * http://www.gnu.org/licenses/gpl.txt
- * ****************************************************************
- */
-
-/**
- * TabName Tag
- *	Author: Mitchell Seaton
- *	Description: Shortens name that are too long to fit inside a tab
- */
-
-		%>
-<%@ tag body-content="scriptless" %>
-
-<%@ attribute name="url" required="true" rtexprvalue="true"%>
-<%@ attribute name="highlight" required="false" rtexprvalue="true" %>
-
-<%@ taglib uri="tags-core" prefix="c"%>
-<%@ taglib uri="tags-function" prefix="fn"%>
-
-<c:set var="limit">12</c:set>
-<c:set var="fullname"><jsp:doBody/></c:set>
-<c:set var="titleValue" value=""/>
-
-<c:choose>
-	<c:when test="${fn:length(fullname) > limit}">
-			<c:set var="titleValue" value="${fullname}"/>
-			<c:set var="tabname" value="${fn:substring(fullname, 0, limit-2)}..."/>
-	</c:when>
-	<c:otherwise>
-		<c:set var="tabname" value="${fullname}"/>
-	</c:otherwise>
-</c:choose>
-
-<c:if test="${highlight eq true}">
-	<c:set var="classVar" value="tab-link-highlight" />
-</c:if>
-
-<a class="tab-middle-link ${classVar}" href="<c:out value='${url}' />" title="<c:out value='${titleValue}'/>" style="border:0;">
-	<c:out value="${tabname}" escapeXml="false"/>	
+<%/****************************************************************
+ * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+ * =============================================================
+ * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+ * 
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 2.0
+ * as published by the Free Software Foundation.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+ * USA
+ * 
+ * http://www.gnu.org/licenses/gpl.txt
+ * ****************************************************************
+ */
+
+/**
+ * TabName Tag
+ *	Author: Mitchell Seaton
+ *	Description: Shortens name that are too long to fit inside a tab
+ */
+
+		%>
+<%@ tag body-content="scriptless" %>
+
+<%@ attribute name="url" required="true" rtexprvalue="true"%>
+<%@ attribute name="highlight" required="false" rtexprvalue="true" %>
+
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-function" prefix="fn"%>
+
+<c:set var="limit">12</c:set>
+<c:set var="fullname"><jsp:doBody/></c:set>
+<c:set var="titleValue" value=""/>
+
+<c:choose>
+	<c:when test="${fn:length(fullname) > limit}">
+			<c:set var="titleValue" value="${fullname}"/>
+			<c:set var="tabname" value="${fn:substring(fullname, 0, limit-2)}..."/>
+	</c:when>
+	<c:otherwise>
+		<c:set var="tabname" value="${fullname}"/>
+	</c:otherwise>
+</c:choose>
+
+<c:if test="${highlight eq true}">
+	<c:set var="classVar" value="tab-link-highlight" />
+</c:if>
+
+<a class="tab-middle-link ${classVar}" href="<c:out value='${url}' />" title="<c:out value='${titleValue}'/>" style="border:0;">
+	<c:out value="${tabname}" escapeXml="false"/>	
 </a>
\ No newline at end of file
Index: lams_tool_survey/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -r9481bb9c6f8c0e4d6fbed6b230a41c77feda64c6 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision 9481bb9c6f8c0e4d6fbed6b230a41c77feda64c6)
+++ lams_tool_survey/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -1,69 +1,92 @@
-<%/****************************************************************
- * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
- * =============================================================
- * License Information: http://lamsfoundation.org/licensing/lams/2.0/
- * 
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License version 2.0
- * as published by the Free Software Foundation.
- * 
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- * 
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
- * USA
- * 
- * http://www.gnu.org/licenses/gpl.txt
- * ****************************************************************
- */
-
-/**
- * Tabs.tag
- *	Author: Mitchell Seaton
- *	Description: Create a tab list from a input collection or nested Tab tags.
- * Wiki: 
- */
-
-		%>
-<%@ tag body-content="scriptless"%>
-<%@ attribute name="collection" type="java.util.Collection" required="false" rtexprvalue="true"%>
-<%@ attribute name="control" required="false" rtexprvalue="true"%>
-<%@ attribute name="useKey" required="false" rtexprvalue="true"%>
-<%@ taglib uri="tags-core" prefix="c"%>
-<%@ taglib uri="tags-lams" prefix="lams"%>
-<c:set var="dControl" value="false" scope="request" />
-<c:if test="${control}">
-	<c:set var="dControl" value="${control}" scope="request" />
-</c:if>
-
-<c:set var="dUseKey" value="false" scope="request" />
-<c:if test="${useKey}">
-	<c:set var="dUseKey" value="${useKey}" scope="request" />
-</c:if>
-
-<!-- tab holder table -->
-<div id="nav">
-	<c:choose>
-		<c:when test="${collection != null}">
-			<c:set var="count" value="0" />
-			<c:forEach var="tab" begin="0" items="${collection}">
-				<c:set var="count" value="${count+1}" />
-				<c:choose>
-					<c:when test="${dUseKey}">
-						<lams:Tab id="${count}" key="${tab}" />
-					</c:when>
-					<c:otherwise>
-						<lams:Tab id="${count}" value="${tab}" />
-					</c:otherwise>
-				</c:choose>
-			</c:forEach>
-		</c:when>
-		<c:otherwise>
-			<jsp:doBody />
-		</c:otherwise>
-	</c:choose>
-</div>
+<%/****************************************************************
+ * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+ * =============================================================
+ * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+ * 
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 2.0
+ * as published by the Free Software Foundation.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+ * USA
+ * 
+ * http://www.gnu.org/licenses/gpl.txt
+ * ****************************************************************
+ */
+
+/**
+ * Tabs.tag
+ *	Author: Fiona Malikoff
+ *	Description: Create a hybrid panel header that contains a nav bar that acts like tabs.
+ */
+
+%>
+<%@ attribute name="control" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refreshOnClickAction" required="false" rtexprvalue="true"%>
+<%@ attribute name="helpToolSignature" required="false" rtexprvalue="true"%>
+<%@ attribute name="helpModule" required="false" rtexprvalue="true"%>
+<%@ attribute name="extraControl" required="false" rtexprvalue="true"%>
+
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+
+<c:set var="useActions" value="false" scope="request" />
+<c:if test="${not empty helpToolSignature or not empty helpModule or not empty refreshOnClickAction or not empty extraControl}">
+	<c:set var="useActions" value="true" scope="request" />
+</c:if>
+
+<c:set var="dControl" value="false" scope="request" />
+<c:if test="${control}">
+	<c:set var="dControl" value="${control}" scope="request" />
+</c:if>
+
+<!-- navbar combined with tabs -->
+<div class="panel panel-default panel-monitor-page">
+<div class="panel-heading navbar-heading">
+
+ 	<nav class="navbar navbar-default navbar-heading">
+	<div class="container-fluid">
+    	<!-- Brand and toggle get grouped for better mobile display -->
+		<div class="navbar-header">
+	      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
+	        <span class="sr-only">Toggle navigation</span>
+	        <span class="icon-bar"></span>
+	        <span class="icon-bar"></span>
+	        <span class="icon-bar"></span>
+	      </button>
+	      <span class="navbar-brand">${title}</span>
+		</div>
+		<div class="collapse navbar-collapse" id="navbar-collapse-1" role="navigation">
+         <ul class="nav navbar-nav" id="page-tabs">
+	         <li role="separator" class="divider"></li>
+	          <jsp:doBody />
+         </ul>
+         <c:if test="${useActions}">
+         <ul class="nav navbar-nav navbar-right" id="page-actions">
+		     <li role="separator" class="divider"></li>
+		     <c:if test="${not empty refreshOnClickAction}">
+             <li class="navbar-text" ><span onclick="${refreshOnClickAction}"><i class="fa fa-refresh"></i></span></li>
+             </c:if>
+             <c:if test="${not empty helpToolSignature or not empty helpModule}">
+             <li class="navbar-text" ><lams:help toolSignature="${helpToolSignature}" module="${helpModule}" style="small"/></li>
+             </c:if>
+             <c:if test="${not empty extraControl}">
+             <li class="navbar-text" >${extraControl}</li>
+             </c:if>
+         </ul>
+         </c:if>
+ 	    
+ 		</div>
+	 </div>
+     </nav>
+     <!-- /top nav -->
+</div>
+<!-- panel div closed by TabBodyArea -->
\ No newline at end of file
Index: lams_tool_survey/web/WEB-INF/tags/headItems.tag
===================================================================
diff -u -r613f0d0d76eb497ed58d7e6836eda34a245425a9 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/WEB-INF/tags/headItems.tag	(.../headItems.tag)	(revision 613f0d0d76eb497ed58d7e6836eda34a245425a9)
+++ lams_tool_survey/web/WEB-INF/tags/headItems.tag	(.../headItems.tag)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -41,7 +41,9 @@
 	<lams:WebAppURL />
 </c:set>
 
-<lams:css style="main"/>
+<lams:css/>
 
 <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/bootstrap.tabcontroller.js"></script>
Index: lams_tool_survey/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -raf1051520a59e1945b25b8be64c5c6a0f7820baf -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision af1051520a59e1945b25b8be64c5c6a0f7820baf)
+++ lams_tool_survey/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -178,7 +178,7 @@
       <name>css</name>
       <tag-class>org.lamsfoundation.lams.web.tag.CssTag</tag-class>
       <body-content>empty</body-content>
-
+      
       <attribute>
          <description>Output stylesheet based on the user preferences.</description>
          <name>style</name>
@@ -408,18 +408,34 @@
        <path>/WEB-INF/tags/TabBody.tag</path>
    	</tag-file>
    	<tag-file>
+       <name>TabBodys</name>
+       <path>/WEB-INF/tags/TabBodys.tag</path>
+   	</tag-file>
+   	<tag-file>
        <name>TabName</name>
        <path>/WEB-INF/tags/TabName.tag</path>
    	</tag-file>
    	<tag-file>
+       <name>TabBodyArea</name>
+       <path>/WEB-INF/tags/TabBodyArea.tag</path>
+   	</tag-file>
+   	<tag-file>
        <name>CKEditor</name>
        <path>/WEB-INF/tags/CKEditor.tag</path>
    	</tag-file>
    	<tag-file>
        <name>AuthoringButton</name>
        <path>/WEB-INF/tags/AuthoringButton.tag</path>
-   	</tag-file>   	
+   	</tag-file>   
    	<tag-file>
+       <name>AuthoringRatingCriteria</name>
+       <path>/WEB-INF/tags/AuthoringRatingCriteria.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>Rating</name>
+       <path>/WEB-INF/tags/Rating.tag</path>
+   	</tag-file>    		
+   	<tag-file>
        <name>headItems</name>
        <path>/WEB-INF/tags/headItems.tag</path>
    	</tag-file>
@@ -438,8 +454,24 @@
    	<tag-file>
 	    <name>Page</name>
 		<path>/WEB-INF/tags/Page.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable</name>
+		<path>/WEB-INF/tags/TSTable.tag</path>
+   	</tag-file>    
+  	<tag-file>
+	    <name>Arrow</name>
+		<path>/WEB-INF/tags/Arrow.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>AdvancedAccordian</name>
+       <path>/WEB-INF/tags/AdvancedAccordian.tag</path>
    	</tag-file>  
    	<tag-file>
+   		<name>RestrictedUsageAccordian</name>
+   		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
+   	</tag-file>
+   	<tag-file>
 	    <name>ImgButtonWrapper</name>
 		<path>/WEB-INF/tags/ImgButtonWrapper.tag</path>
    	</tag-file>
@@ -481,5 +513,13 @@
 		<name>head</name>
 	    <path>/WEB-INF/tags/Head.tag</path>
 	</tag-file>
+   	<tag-file>
+       <name>Comments</name>
+       <path>/WEB-INF/tags/Comments.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>CommentsAuthor</name>
+       <path>/WEB-INF/tags/CommentsAuthor.tag</path>
+   	</tag-file>
 
 </taglib>
Index: lams_tool_survey/web/common/tabbedheader.jsp
===================================================================
diff -u -r613f0d0d76eb497ed58d7e6836eda34a245425a9 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/common/tabbedheader.jsp	(.../tabbedheader.jsp)	(revision 613f0d0d76eb497ed58d7e6836eda34a245425a9)
+++ lams_tool_survey/web/common/tabbedheader.jsp	(.../tabbedheader.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -3,13 +3,4 @@
 <c:set var="tool"><lams:WebAppURL/></c:set>
 <c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request"/>
 
- 	<!-- ********************  CSS ********************** -->
-	<lams:css style="main"/>
-
-
- 	<!-- ********************  javascript ********************** -->
-	<script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/prototype.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>    
-
-	
+<lams:headItems/>
Index: lams_tool_survey/web/includes/javascript/surveyitem.js
===================================================================
diff -u -r8b97231e320c0c5b674f07c14da711f232ba9e1c -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/includes/javascript/surveyitem.js	(.../surveyitem.js)	(revision 8b97231e320c0c5b674f07c14da711f232ba9e1c)
+++ lams_tool_survey/web/includes/javascript/surveyitem.js	(.../surveyitem.js)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -1,44 +1,27 @@
 	/*
-	 This is Survey Item instrcution area.
+	 This is Survey Item instruction area.
 	 */
-    var instructionTargetDiv = "instructionArea";
 // Please set these 2 variables in JSP file for using tag reason:
 //    var removeInstructionUrl = "<c:url value='/authoring/removeInstruction.do'/>";
 //    var addInstructionUrl = "<c:url value='/authoring/newInstruction.do'/>";
 	function removeInstruction(idx){
-		//var id = "instructionItem" + idx;
-		//Element.remove(id);
- 		var url= removeInstructionUrl;
 	    var reqIDVar = new Date();
-	    var param = Form.serialize("instructionForm")+"&removeIdx="+idx+"&reqID="+reqIDVar.getTime();
-	    removeInstructionLoading();
-	    var myAjax = new Ajax.Updater(
-		    	instructionTargetDiv,
-		    	url,
-		    	{
-		    		method:'post',
-		    		parameters:param,
-		    		onComplete:removeInstructionComplete,
-		    		evalScripts:true
-		    	}
-	    );
+	    var param = $("#instructionForm").serialize()+"&removeIdx="+idx+"&reqID="+reqIDVar.getTime();
+ 		var url= removeInstructionUrl+"?"+param;
+	    showInstructionBusy();
+	    $('#instructionArea').load(url,function(data) {
+	    	hideInstructionBusy();
+	    });
 	}
 	
 	function addInstruction(){
-		var url= addInstructionUrl;
 	    var reqIDVar = new Date();
-	    var param = Form.serialize("instructionForm")+"&reqID="+reqIDVar.getTime();
-		addInstructionLoading();
-	    var myAjax = new Ajax.Updater(
-		    	instructionTargetDiv,
-		    	url,
-		    	{
-		    		method:'post',
-		    		parameters:param,
-		    		onComplete:addInstructionComplete,
-		    		evalScripts:true
-		    	}
-	    );
+	    var param = $("#instructionForm").serialize()+"&reqID="+reqIDVar.getTime();
+		var url= addInstructionUrl+"?"+param;
+	    showInstructionBusy();
+	    $('#instructionArea').load(url,function() {
+	    	hideInstructionBusy();
+	    });
 	}
 	function upItem(itemIdx){
 		if(itemIdx == 0)
@@ -55,50 +38,41 @@
 		switchValue(currId,repId);
 	}
 	function switchValue(currId,repId){
-		var temp = $(repId).value;
-		$(repId).value =  $(currId).value;
-		$(currId).value= temp;
+		var current = document.getElementById(currId);
+		var rep = document.getElementById(repId);
+		var temp = rep.value;
+		rep.value = current.value;
+		current.value= temp;
 	}
-	function removeInstructionLoading(){
-		showBusy(instructionTargetDiv);
+	function showInstructionBusy(){
+		$('#instructionAreaBusy').show();
 	}
-	function removeInstructionComplete(){
-		hideBusy(instructionTargetDiv);
-		
+	function hideInstructionBusy(){
+		$('#instructionAreaBusy').hide();
 	}
 	
-	function addInstructionLoading(){
-		showBusy(instructionTargetDiv);
+	function refreshCKEditors() {
+		// make sure all the ckeditors are refreshed, not just the validated ones
+		for (var i in CKEDITOR.instances) {
+       		CKEDITOR.instances[i].updateElement();
+   		}
 	}
-	function addInstructionComplete(){
-		hideBusy(instructionTargetDiv);
-		
-	}
-	function showBusy(targetDiv){
-		if($(targetDiv+"_Busy") != null){
-			Element.show(targetDiv+"_Busy");
+
+	function submitSurveyItem(){
+		refreshCKEditors();
+		if (document.getElementById("instructionForm")) {
+			document.getElementById("instructionList").value = $("#instructionForm").serialize();
 		}
+		$.ajax({
+			data: $("#surveyItemForm").serialize(),
+	       	type: $("#surveyItemForm").attr('method'),
+			url: $("#surveyItemForm").attr('action'),
+			success: function(data) {
+	           $('#questionInputArea').html(data);
+			}
+		});
 	}
-	function hideBusy(targetDiv){
-		if($(targetDiv+"_Busy") != null){
-			Element.hide(targetDiv+"_Busy");
-		}				
-	}
 	
-	function submitSurveyItem(){
-		if($("instructionList") != null)
-			$("instructionList").value = Form.serialize("instructionForm");
-		$("surveyItemForm").submit();
-	}
-	
 	function cancelSurveyItem(){
-		var win = null;
-		if (window.hideMessage) { 
-			win = window;
-		} else if (window.parent && window.parent.hideMessage) {
-			win = window.parent;
-		} else {
-			win = window.top;
-		}
-		win.hideMessage();
+		hideMessage();
 	}
Index: lams_tool_survey/web/pages/authoring/addCondition.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/authoring/addCondition.jsp	(.../addCondition.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_survey/web/pages/authoring/addCondition.jsp	(.../addCondition.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -2,59 +2,42 @@
 		
 <%@ include file="/common/taglibs.jsp"%>
 
-<lams:html>
-	<lams:head>
-		<%@ include file="/common/header.jsp"%>
-		<script type="text/javascript" src="${lams}includes/javascript/prototype.js"></script>
-		<lams:css style="main" />
-		<script type="text/javascript"> 
-			function callHideConditionMessage() {
-				try {
-					if (window.parent && window.parent.hideConditionMessage) {
-						window.parent.hideConditionMessage();
-					} else if (window.top && window.top.hideConditionMessage) {
-						window.top.hideConditionMessage();
-					}
-				} catch(err) {
-					// mute cross-domain iframe access errors
-				}
-			}
-		</script>
-	</lams:head>
-	<body class="tabpart">
-		<!-- Basic Info Form-->
-		<%@ include file="/common/messages.jsp"%>
-		<html:form action="/authoring/saveOrUpdateCondition" method="post" styleId="surveyConditionForm" focus="displayName" >
-			<html:hidden property="orderId" />
-			<h2 class="no-space-left">
-				<fmt:message key="label.authoring.conditions.add.condition" />
-			</h2>
+<div class="panel panel-default">
+<div class="panel-heading">
+	<div class="panel-title"><fmt:message key="label.authoring.conditions.add.condition" /></div>
+</div>
 
-			<div class="field-name">
-            	<fmt:message key="label.authoring.conditions.condition.name" />
-			</div>
+<div class="panel-body">	
 
-			<div class="small-space-bottom">
-         		<html:text property="displayName" size="51"/>
-			</div>
-			<%-- Text search form fields are being included --%>
-			<lams:TextSearch wrapInFormTag="false" sessionMapID="${sessionMapID}"  />
-			<h4 class="no-space-left"><fmt:message key="textsearch.questions" /></h4>
-			<logic:iterate name="surveyConditionForm" id="itemE" property="possibleItems">
-			  	<html:multibox property="selectedItems">
-			    	<bean:write name="itemE" property="value" />
-			  	</html:multibox>
-			    <bean:write name="itemE" property="label" />
-			    <br />
-			</logic:iterate>
+	<%@ include file="/common/messages.jsp"%>
+	<html:form action="/authoring/saveOrUpdateCondition" method="post" styleId="surveyConditionForm" focus="displayName" >
+		<html:hidden property="orderId" />
+		
+		<div class="form-group">
+		    <label for="displayName"><fmt:message key="label.authoring.conditions.condition.name" /></label>
+       		<html:text property="displayName" size="51"  styleClass="form-control"/>
+		</div>
 
-		</html:form>
+		<%-- Text search form fields are being included --%>
+		<lams:TextSearch wrapInFormTag="false" sessionMapID="${sessionMapID}"  />
+		<h4><fmt:message key="textsearch.questions" /></h4>
+		<logic:iterate name="surveyConditionForm" id="itemE" property="possibleItems">
+			<div class="checkbox">
+			<label>
+		  	<html:multibox property="selectedItems">
+		    	<bean:write name="itemE" property="value" />
+		  	</html:multibox>
+		    <bean:write name="itemE" property="label" />
+		    </label>
+		    </div>
+		</logic:iterate>
+	
+	</html:form>
 
-		<lams:ImgButtonWrapper>
-			<a href="javascript:;" onclick="javascript:surveyConditionForm.submit();" class="button-add-item"><fmt:message
-					key="label.save" /> </a>
-			<a href="javascript:;" onclick="javascript:callHideConditionMessage()"
-				class="button space-left"><fmt:message key="label.cancel" /> </a>
-		</lams:ImgButtonWrapper>
-	</body>
-</lams:html>
+	<div class="voffset5">
+		<a href="#" onclick="submitCondition();" class="btn btn-default btn-xs"><fmt:message key="label.save" /> </a>
+		<a href="#" onclick="hideConditionMessage();" class="btn btn-default btn-xs"><fmt:message key="button.cancel" /> </a>
+	</div>
+
+</div>
+</div>
\ No newline at end of file
Index: lams_tool_survey/web/pages/authoring/advance.jsp
===================================================================
diff -u -r098d686653002409f33aff0f69b1183e07c1eab3 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/authoring/advance.jsp	(.../advance.jsp)	(revision 098d686653002409f33aff0f69b1183e07c1eab3)
+++ lams_tool_survey/web/pages/authoring/advance.jsp	(.../advance.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -3,44 +3,44 @@
 
 <!-- Advance Tab Content -->
 
-<p class="small-space-top">
-	<html:checkbox property="survey.lockWhenFinished" styleClass="noBorder" styleId="lockWhenFinished"/>
+<div class="checkbox">
 	<label for="lockWhenFinished">
+	<html:checkbox property="survey.lockWhenFinished" styleId="lockWhenFinished"/>
 		<fmt:message key="label.authoring.advance.lock.on.finished" />
 	</label>
-</p>
+</div>
 
-<p>
-	<html:checkbox property="survey.showOnePage" styleClass="noBorder" styleId="showOnePage"/>
+<div class="checkbox">
 	<label for="showOnePage">
+	<html:checkbox property="survey.showOnePage" styleId="showOnePage"/>
 		<fmt:message key="label.authoring.advance.show.on.one.page" />
 	</label>
-</p>
+</div>
 
-<p>
-	<html:checkbox property="survey.showOtherUsersAnswers" styleClass="noBorder" styleId="showOtherUsersAnswers"/>
+<div class="checkbox">
 	<label for="showOtherUsersAnswers">
+	<html:checkbox property="survey.showOtherUsersAnswers" styleId="showOtherUsersAnswers"/>
 		<fmt:message key="label.show.answers.from.other.users" />
 	</label>
-</p>
+</div>
 
-<p>
-	<html:checkbox property="survey.notifyTeachersOnAnswerSumbit" styleClass="noBorder" styleId="notifyTeachersOnAnswerSumbit"/>
+<div class="checkbox">
 	<label for="notifyTeachersOnAnswerSumbit">
+	<html:checkbox property="survey.notifyTeachersOnAnswerSumbit" styleId="notifyTeachersOnAnswerSumbit"/>
 		<fmt:message key="label.authoring.advanced.notify.onanswersubmit" />
 	</label>
-</p>
+</div>
 
-<p>
-	<html:checkbox property="survey.reflectOnActivity" styleClass="noBorder" styleId="reflectOn"/>
+<div class="checkbox">
 	<label for="reflectOn">
+	<html:checkbox property="survey.reflectOnActivity" styleId="reflectOn"/>
 		<fmt:message key="label.authoring.advanced.reflectOnActivity" />
 	</label>
-</p>
+</div>
 
-<p>
-	<html:textarea property="survey.reflectInstructions" styleId="reflectInstructions" cols="30" rows="3" />
-</p>
+<div class="form-group">
+	<html:textarea property="survey.reflectInstructions" styleId="reflectInstructions" rows="3" styleClass="form-control"/>
+</div>
 
 <script type="text/javascript">
 <!--
Index: lams_tool_survey/web/pages/authoring/authoring.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/authoring/authoring.jsp	(.../authoring.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_survey/web/pages/authoring/authoring.jsp	(.../authoring.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -10,7 +10,6 @@
 
 	<%@ include file="/common/tabbedheader.jsp"%>
 
-	<script type="text/javascript" src="${lams}includes/javascript/prototype.js"></script>
 	<script>
         function init(){
             var tag = document.getElementById("currentTab");
@@ -32,53 +31,52 @@
 
 </lams:head>
 <body class="stripes" onLoad="init()">
-<div id="page">
-		<h1>
-			<fmt:message key="label.authoring.heading" />
-		</h1>
-<div id="header">
-		<lams:Tabs useKey="true" control="true">
-			<lams:Tab id="1" key="label.authoring.heading.basic" />
-			<lams:Tab id="2" key="label.authoring.heading.advance" />
-			<lams:Tab id="3" key="label.authoring.heading.conditions" />
-		</lams:Tabs>
-</div>
-		<!-- start tabs -->
-<div id="content">
-		<!-- end tab buttons -->
-		<%@ include file="/common/messages.jsp"%>
-		<html:form action="authoring/update" method="post" styleId="authoringForm" enctype="multipart/form-data">
+
+	<html:form action="authoring/update" method="post" styleId="authoringForm" enctype="multipart/form-data">
 		<c:set var="formBean" value="<%= request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY) %>" />
 		<html:hidden property="survey.contentId" />
 		<html:hidden property="sessionMapID" />
 		<html:hidden property="contentFolderID" />
 		<html:hidden property="currentTab" styleId="currentTab" />
-
-		<lams:help toolSignature="<%= SurveyConstants.TOOL_SIGNATURE %>" module="authoring"/>
-
-			<!-- tab content 1 (Basic) -->
-			<lams:TabBody id="1" titleKey="label.authoring.heading.basic.desc" page="basic.jsp" />
-			<!-- end of content (Basic) -->
-
-			<!-- tab content 2 (Advanced) -->
-			<lams:TabBody id="2" titleKey="label.authoring.heading.advance.desc" page="advance.jsp" />
-			<!-- end of content (Advanced) -->
+	
+		<c:set var="title"><fmt:message key="activity.title" /></c:set>
+		<lams:Page title="${title}" type="navbar">
+		
+			<lams:Tabs control="true" title="${title}" helpToolSignature="<%= SurveyConstants.TOOL_SIGNATURE %>" helpModule="authoring">
+				<lams:Tab id="1" key="label.authoring.heading.basic" />
+				<lams:Tab id="2" key="label.authoring.heading.advance" />
+				<lams:Tab id="3" key="label.authoring.heading.conditions" />
+			</lams:Tabs>
+	
+			<lams:TabBodyArea>
 			
-			<!-- tab content 4 (Conditions) -->
-			<lams:TabBody id="3" titleKey="label.authoring.heading.conditions.desc" page="conditions.jsp" />
-			<!-- end of content (Conditions) -->
-
-			<!-- Button Row -->
-			<lams:AuthoringButton formID="authoringForm" clearSessionActionUrl="/clearsession.do" 
-				toolSignature="<%=SurveyConstants.TOOL_SIGNATURE%>" toolContentID="${formBean.survey.contentId}" 
-				 customiseSessionID="${formBean.sessionMapID}"
-				 contentFolderID="${formBean.contentFolderID}" />
+				<%@ include file="/common/messages.jsp"%>
+	
+				<lams:TabBodys>
+					<!-- tab content 1 (Basic) -->
+					<lams:TabBody id="1" titleKey="label.authoring.heading.basic.desc" page="basic.jsp" />
+					<!-- end of content (Basic) -->
+		
+					<!-- tab content 2 (Advanced) -->
+					<lams:TabBody id="2" titleKey="label.authoring.heading.advance.desc" page="advance.jsp" />
+					<!-- end of content (Advanced) -->
+					
+					<!-- tab content 4 (Conditions) -->
+					<lams:TabBody id="3" titleKey="label.authoring.heading.conditions.desc" page="conditions.jsp" />
+					<!-- end of content (Conditions) -->
+				</lams:TabBodys>
+				
+				<!-- Button Row -->
+				<lams:AuthoringButton formID="authoringForm" clearSessionActionUrl="/clearsession.do" 
+					toolSignature="<%=SurveyConstants.TOOL_SIGNATURE%>" toolContentID="${formBean.survey.contentId}" 
+					 customiseSessionID="${formBean.sessionMapID}"
+					 contentFolderID="${formBean.contentFolderID}" />
+			</lams:TabBodyArea>
+			
+			<div id="footer"></div>
+			
+		</lams:Page>
 	</html:form>
 
-</div>
-
-<div id="footer"></div>
-<!-- end page div -->
-</div>
 </body>
 </lams:html>
Index: lams_tool_survey/web/pages/authoring/basic.jsp
===================================================================
diff -u -rfb9d13eb115f5281b03ab1624ec10a22ba3b81b7 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/authoring/basic.jsp	(.../basic.jsp)	(revision fb9d13eb115f5281b03ab1624ec10a22ba3b81b7)
+++ lams_tool_survey/web/pages/authoring/basic.jsp	(.../basic.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -9,32 +9,15 @@
 	 * Launches the popup window for the instruction files
 	 */
 	function showMessage(url) {
-		var area=document.getElementById("questionInputArea");
-		if(area != null){
-			area.style.width="100%";
-			area.src=url;
-			area.style.display="block";
-		}
-		var elem = document.getElementById("saveCancelButtons");
-		if (elem != null) {
-			elem.style.display="none";
-		}
-		
-		location.hash = "questionInputArea";
+		$("#questionInputArea").load(url, function() {
+			$(this).show();
+			$("#saveCancelButtons").hide();
+		});
 	}
 	function hideMessage(){
-		var area=document.getElementById("questionInputArea");
-		if(area != null){
-			area.style.width="0px";
-			area.style.height="0px";
-			area.style.display="none";
-		}
-		var elem = document.getElementById("saveCancelButtons");
-		if (elem != null) {
-			elem.style.display="block";
-		}
+		$("#questionInputArea").hide();
+		$("#saveCancelButtons").show();
 	}
-
 	
 	function editItem(idx,itemType,sessionMapID,contentFolderID){
 		var reqIDVar = new Date();
@@ -49,123 +32,56 @@
 	}
 	
 	//The panel of survey list panel
-	var surveyListTargetDiv = "surveyListArea";
 	function deleteItem(idx,sessionMapID){
-		var url = "<c:url value="/authoring/removeItem.do"/>";
 	    var reqIDVar = new Date();
 		var param = "itemIndex=" + idx +"&reqID="+reqIDVar.getTime()+"&sessionMapID="+sessionMapID;;
+		var url = "<c:url value="/authoring/removeItem.do"/>?"+param;
 		deleteItemLoading();
-	    var myAjax = new Ajax.Updater(
-		    	surveyListTargetDiv,
-		    	url,
-		    	{
-		    		method:'get',
-		    		parameters:param,
-		    		onComplete:deleteItemComplete,
-		    		evalScripts:true
-		    	}
-	    );
+		$("#surveyListArea").load(url,deleteItemComplete);
 	}
+	
 	function upQuestion(idx,sessionMapID){
-		var url = "<c:url value="/authoring/upItem.do"/>";
 	    var reqIDVar = new Date();
 		var param = "itemIndex=" + idx +"&reqID="+reqIDVar.getTime()+"&sessionMapID="+sessionMapID;;
+		var url = "<c:url value="/authoring/upItem.do"/>?"+param;
 		deleteItemLoading();
-	    var myAjax = new Ajax.Updater(
-		    	surveyListTargetDiv,
-		    	url,
-		    	{
-		    		method:'get',
-		    		parameters:param,
-		    		onComplete:deleteItemComplete,
-		    		evalScripts:true
-		    	}
-	    );
+		$("#surveyListArea").load(url, deleteItemComplete);
 	}
 	function downQuestion(idx,sessionMapID){
-		var url = "<c:url value="/authoring/downItem.do"/>";
 	    var reqIDVar = new Date();
 		var param = "itemIndex=" + idx +"&reqID="+reqIDVar.getTime()+"&sessionMapID="+sessionMapID;;
+		var url = "<c:url value="/authoring/downItem.do"/>?"+param;
 		deleteItemLoading();
-	    var myAjax = new Ajax.Updater(
-		    	surveyListTargetDiv,
-		    	url,
-		    	{
-		    		method:'get',
-		    		parameters:param,
-		    		onComplete:deleteItemComplete,
-		    		evalScripts:true
-		    	}
-	    );
+		$("#surveyListArea").load(url,deleteItemComplete);
 	}
 	function deleteItemLoading(){
-		showBusy(surveyListTargetDiv);
+		$("#resourceListArea_Busy").show();
 	}
 	function deleteItemComplete(){
-		hideBusy(surveyListTargetDiv);
+		$("#resourceListArea_Busy").hide();
 	}
-
-	function showBusy(targetDiv){
-		if($(targetDiv+"_Busy") != null){
-			Element.show(targetDiv+"_Busy");
-		}
-	}
-	function hideBusy(targetDiv){
-		if($(targetDiv+"_Busy") != null){
-			Element.hide(targetDiv+"_Busy");
-		}				
-	}
-
-	function resizeOnMessageFrameLoad(){
-		var messageAreaFrame = document.getElementById("questionInputArea");
-		messageAreaFrame.style.height=messageAreaFrame.contentWindow.document.body.scrollHeight+'px';
-	}
-
 </script>
+
 <!-- Basic Tab Content -->
-<table>
-	<tr>
-		<td colspan="2">
-			<div class="field-name">
-				<fmt:message key="label.authoring.basic.title"></fmt:message>
-			</div>
-			<html:text property="survey.title" style="width: 99%;"></html:text>
-		</td>
-	</tr>
-	<tr>
-		<td colspan="2">
-			<div class="field-name">
-				<fmt:message key="label.authoring.basic.instruction"></fmt:message>
-			</div>
-			<lams:CKEditor id="survey.instructions"
-				value="${formBean.survey.instructions}"
-				contentFolderID="${formBean.contentFolderID}"></lams:CKEditor>
-		</td>
-	</tr>
+<div class="form-group">
+    <label for="survey.title"><fmt:message key="label.authoring.basic.title"/></label>
+    <html:text property="survey.title" styleClass="form-control"></html:text>
+</div>
+<div class="form-group">
+    <label for="survey.instructions"><fmt:message key="label.authoring.basic.instruction" /></label>
+    <lams:CKEditor id="survey.instructions" value="${formBean.survey.instructions}" contentFolderID="${formBean.contentFolderID}"></lams:CKEditor>
+</div>
 
-</table>
 <div id="surveyListArea">
 	<c:set var="sessionMapID" value="${formBean.sessionMapID}" />
 	<%@ include file="/pages/authoring/parts/itemlist.jsp"%>
 </div>
 
-<p align="center">
-	<a
-		href="javascript:showMessage('<html:rewrite page="/authoring/newItemInit.do?itemType=1&contentFolderID=${formBean.contentFolderID}&sessionMapID=${formBean.sessionMapID}"/>');">
-		<fmt:message key="label.authoring.basic.add.survey.question" /> </a>
+<a href="javascript:showMessage('<html:rewrite page="/authoring/newItemInit.do?itemType=1&contentFolderID=${formBean.contentFolderID}&sessionMapID=${formBean.sessionMapID}"/>');"
+	class="btn btn-default">
+	<i class="fa fa-plus"></i>&nbsp; <fmt:message key="label.authoring.basic.add.survey.question"/> </a>
 
-	<a
-		href="javascript:showMessage('<html:rewrite page="/authoring/newItemInit.do?itemType=3&contentFolderID=${formBean.contentFolderID}&sessionMapID=${formBean.sessionMapID}"/>');"
-		class="space-left"> <fmt:message
-			key="label.authoring.basic.add.survey.open.question" /> </a>
-</p>
+<a href="javascript:showMessage('<html:rewrite page="/authoring/newItemInit.do?itemType=3&contentFolderID=${formBean.contentFolderID}&sessionMapID=${formBean.sessionMapID}"/>');"
+	class="btn btn-default"> <i class="fa fa-plus"></i>&nbsp; <fmt:message key="label.authoring.basic.add.survey.open.question" /> </a>
 
-<p>
-	<iframe
-		onload="javascript:resizeOnMessageFrameLoad();"
-		id="questionInputArea" name="questionInputArea"
-		style="width:0px;height:0px;border:0px;display:none" frameborder="no"
-		scrolling="no">
-	</iframe>
-</p>
-
+<div id="questionInputArea" name="questionInputArea" class="voffset10"></div>
Index: lams_tool_survey/web/pages/authoring/conditionList.jsp
===================================================================
diff -u -r21ce4d0194e8b81e613f4f6e14eb4e8bf53bdf59 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/authoring/conditionList.jsp	(.../conditionList.jsp)	(revision 21ce4d0194e8b81e613f4f6e14eb4e8bf53bdf59)
+++ lams_tool_survey/web/pages/authoring/conditionList.jsp	(.../conditionList.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -1,18 +1,16 @@
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request" />
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 
 <c:set var="tool">
 	<lams:WebAppURL />
 </c:set>
 
 <div id="conditionList">
-	<h2 class="spacer-left">
-		<fmt:message key="label.authoring.conditions.list.title" />
-		<img src="${ctxPath}/includes/images/indicator.gif"	style="display:none" id="conditionListArea_Busy" />
-	</h2>
+	<div>
+		<i class="fa fa-spinner" style="display: none" id="conditionListArea_Busy" /></i>
+	</div>
 	
-	<table class="alternative-color" id="conditionTable" cellspacing="0">
+	<table class="table table-striped table-condensed" id="conditionTable" >
 		<tr>
 			<th width="14%" align="left">
 				<fmt:message key="label.authoring.conditions.order" />
@@ -40,62 +38,33 @@
 					${condition.displayName}
 				</td>
 
-				<td width="40px" align="center">
+				<td class="arrows" style="width:5%">
+					<!-- Don't display up icon if first line -->
 					<c:if test="${not status.first}">
-						<img src="${tool}includes/images/uparrow.gif"
-							border="0" title="<fmt:message key="label.up"/>"
-							onclick="upCondition(${status.index},'${sessionMapID}')">
-						<c:if test="${status.last}">
-							<img
-								src="${tool}includes/images/downarrow_disabled.gif"
-								border="0" title="<fmt:message key="label.down"/>">
-						</c:if>
-					</c:if>
-
+						<c:set var="title"><fmt:message key='label.authoring.up'/></c:set>
+		 				<lams:Arrow state="up" title="${title}" onclick="upCondition(${status.index},'${sessionMapID}')"/>
+		 			</c:if>
+					<!-- Don't display down icon if last line -->
 					<c:if test="${not status.last}">
-						<c:if test="${status.first}">
-							<img
-								src="${tool}includes/images/uparrow_disabled.gif"
-								border="0" title="<fmt:message key="label.up"/>">
-						</c:if>
-
-						<img src="${tool}includes/images/downarrow.gif"
-							border="0" title="<fmt:message key="label.down"/>"
-							onclick="downCondition(${status.index},'${sessionMapID}')">
-					</c:if>
+					<c:set var="title"><fmt:message key='label.authoring.down'/></c:set>
+						<lams:Arrow state="down" title="${title}" onclick="downCondition(${status.index},'${sessionMapID}')"/>
+		 			</c:if>
 				</td>
 				
-				<td width="20px">
-					<img src="${tool}includes/images/edit.gif"
-						title="<fmt:message key="label.edit" />"
-						onclick="editCondition(${status.index},'${sessionMapID}')" />
-                </td>
-                
-				<td width="20px">
-					<img src="${tool}includes/images/cross.gif"
-						title="<fmt:message key="label.delete" />"
-						onclick="deleteCondition(${status.index},'${sessionMapID}')" />
-				</td>
+				<td align="center" style="width:5%"><i class="fa fa-pencil"	title="<fmt:message key="label.edit" />"
+					onclick="editCondition(${status.index},'${sessionMapID}')"></i></td>
+					
+				<td  align="center" style="width:5%"><i class="fa fa-times"	title="<fmt:message key="label.delete" />" 
+					onclick="deleteCondition(${status.index},'${sessionMapID}')"></i></td>
+
 			</tr>
 		</c:forEach>
 	</table>
 </div>
 
-<%-- This script will works when a new resoruce Condition submit in order to refresh "TaskList List" panel. --%>
+<%-- This script will works when a new resource Condition submit in order to refresh "TaskList List" panel. --%>
 <script type="text/javascript">
-	var win = null;
-	try {
-		if (window.parent && window.parent.hideConditionMessage) {
-			win = window.parent;
-		} else if (window.top && window.top.hideConditionMessage) {
-			win = window.top;
-		}
-	} catch(err) {
-		// mute cross-domain iframe access errors
-	}
-	if (win) {
-		win.hideConditionMessage();
-		var obj = win.document.getElementById('conditionsArea');
-		obj.innerHTML= document.getElementById("conditionList").innerHTML;
-	}
+	hideConditionMessage();
+	var obj = document.getElementById('conditionsArea');
+	obj.innerHTML= document.getElementById("conditionList").innerHTML;
 </script>
Index: lams_tool_survey/web/pages/authoring/conditions.jsp
===================================================================
diff -u -r7b79396263b36a933d66390fb9ab12821956d59d -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/authoring/conditions.jsp	(.../conditions.jsp)	(revision 7b79396263b36a933d66390fb9ab12821956d59d)
+++ lams_tool_survey/web/pages/authoring/conditions.jsp	(.../conditions.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -2,109 +2,61 @@
 <c:set var="formBean"
 	value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
 <script type="text/javascript">
-<!-- Common Javascript functions for LAMS -->
-
-	/**
-	 * Launches the popup window for the instruction files
-	 */
+	
 	function showConditionMessage(url) {
-		var area=document.getElementById("conditionInputArea");
-		if(area != null){
-			area.style.width="650px";
-			area.style.height="100%";
-			area.src=url;
-			area.style.display="block";
-		}
-		var elem = document.getElementById("saveCancelButtons");
-		if (elem != null) {
-			elem.style.display="none";
-		}
-		location.hash = "conditionInputArea";
+		$("#conditionInputArea").load(url, function() {
+			$(this).show();
+			$("#saveCancelButtons").hide();
+		});
 	}
 	function hideConditionMessage(){
-		var area=document.getElementById("conditionInputArea");
-		if(area != null){
-			area.style.width="0px";
-			area.style.height="0px";
-			area.style.display="none";
-		}
-		var elem = document.getElementById("saveCancelButtons");
-		if (elem != null) {
-			elem.style.display="block";
-		}
+		$("#conditionInputArea").hide();
+		$("#saveCancelButtons").show();
 	}
-
+	
 	function editCondition(orderId,sessionMapID){
-		 var reqIDVar = new Date();
-		var url = "<c:url value="/authoring/editCondition.do?orderId="/>" + orderId +"&sessionMapID="+sessionMapID;;
+		var url = "<c:url value="/authoring/editCondition.do?orderId="/>" + orderId +"&sessionMapID="+sessionMapID;
 		showConditionMessage(url);
 	}
-	//The panel of taskList list panel
-	var conditionListTargetDiv = "conditionsArea";
-	function deleteCondition(orderId,sessionMapID){
-		var url = "<c:url value="/authoring/removeCondition.do"/>";
-	    var reqIDVar = new Date();
-		var param = "orderId=" + orderId +"&sessionMapID="+sessionMapID;;
-	    var myAjax = new Ajax.Updater(
-		    	conditionListTargetDiv,
-		    	url,
-		    	{
-		    		method:'get',
-		    		parameters:param,
-		    		evalScripts:true
-		    	}
-	    );
+	
+	function deleteCondition(orderId, sessionMapID){
+		$("#conditionsArea").load("<c:url value='/authoring/removeCondition.do'/>",{
+			'orderId' : orderId,
+			'sessionMapID' : sessionMapID
+		});
 	}
 	
 	function upCondition(orderId,sessionMapID){
-		var url = "<c:url value="/authoring/upCondition.do"/>";
-	    var reqIDVar = new Date();
-		var param = "orderId=" + orderId + "&sessionMapID="+sessionMapID;;
-	    var myAjax = new Ajax.Updater(
-		    	conditionListTargetDiv,
-		    	url,
-		    	{
-		    		method:'get',
-		    		parameters:param,
-		    		evalScripts:true
-		    	}
-	    );
+		$("#conditionsArea").load("<c:url value='/authoring/upCondition.do'/>",{
+			'orderId' : orderId,
+			'sessionMapID' : sessionMapID
+		});
 	}
 	function downCondition(orderId,sessionMapID){
-		var url = "<c:url value="/authoring/downCondition.do"/>";
-	    var reqIDVar = new Date();
-		var param = "orderId=" + orderId + "&sessionMapID="+sessionMapID;;
-	    var myAjax = new Ajax.Updater(
-		    	conditionListTargetDiv,
-		    	url,
-		    	{
-		    		method:'get',
-		    		parameters:param,
-		    		evalScripts:true
-		    	}
-	    );
+		$("#conditionsArea").load("<c:url value='/authoring/downCondition.do'/>",{
+			'orderId' : orderId,
+			'sessionMapID' : sessionMapID
+		});
 	}
-
+	
+	//Packs additional elements and submits the question form
+	function submitCondition(){
+		var form = $('#surveyConditionForm');
+		$('#conditionInputArea').load(form.attr('action'), form.serialize());
+	} 
+	
 </script>
 
 <!-- Conditions Tab Content -->
 
 <div id="conditionsArea">
 	<c:set var="sessionMapID" value="${formBean.sessionMapID}" />
-	<%@ include file="/pages/authoring/conditionList.jsp"%>
+	<%@ include file="conditionList.jsp"%>
 </div>
+  
+ <div class="form-inline">
+	<a href="javascript:showConditionMessage('<html:rewrite page="/authoring/newConditionInit.do?sessionMapID=${formBean.sessionMapID}"/>');" 
+		class="btn btn-default btn-sm"><i class="fa fa-plus"></i>&nbsp;<fmt:message key="label.authoring.conditions.add.condition" /></a> 
+</div>
 
-<p class="small-space-bottom">
-	<a href="javascript:showConditionMessage('<html:rewrite page="/authoring/newConditionInit.do?sessionMapID=${formBean.sessionMapID}"/>');" class="button-add-item">
-	<fmt:message key="label.authoring.conditions.add.condition" /></a> 
-</p>
-
-
-<p>
-	<iframe
-		onload="javascript:this.style.height=this.contentWindow.document.body.scrollHeight+'px'"
-		id="conditionInputArea" name="conditionInputArea"
-		style="width:0px;height:0px;border:0px;display:none" frameborder="no"
-		scrolling="no">
-	</iframe>
-</p>
+<div id="conditionInputArea" name="conditionInputArea" class="voffset10"></div>
Index: lams_tool_survey/web/pages/authoring/definelater.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/authoring/definelater.jsp	(.../definelater.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_survey/web/pages/authoring/definelater.jsp	(.../definelater.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -5,11 +5,6 @@
 <%@ page import="java.util.HashSet"%>
 <%@ page import="org.lamsfoundation.lams.tool.survey.SurveyConstants"%>
 <%@ page import="java.util.Set"%>
-<%Set tabs = new HashSet();
-			tabs.add("label.authoring.heading.basic");
-			pageContext.setAttribute("tabs", tabs);
-
-			%>
 <lams:html>
 <lams:head>
 	<title><fmt:message key="label.author.title" /></title>
@@ -20,12 +15,6 @@
         
         function init(){
             selectTab(1); //select the default tab;
-            
-            initEditor("Title");
-            initEditor("Instructions");
-            initEditor("OnlineInstruction");
-            initEditor("OfflineInstruction");
-            
         }     
         
         function doSelectTab(tabId) {
@@ -43,43 +32,41 @@
 
 </lams:head>
 <body class="stripes" onLoad="init()">
-<div id="page">
+
 	<html:form action="authoring/update" method="post" styleId="authoringForm" enctype="multipart/form-data">
 		<c:set var="formBean" value="<%= request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY) %>" />
 		<html:hidden property="survey.contentId" />
 		<html:hidden property="mode" value="teacher"/>
-		<html:hidden property="contentFolderID" />
 		<html:hidden property="sessionMapID" />
+		<html:hidden property="contentFolderID" />
+	
+		<c:set var="title"><fmt:message key="activity.title" /></c:set>
+		<lams:Page title="${title}" type="navbar">
 		
-		<h1>
-			<fmt:message key="label.authoring.heading" />
-		</h1>
-<div id="header">
-		<!-- start tabs -->
-		<lams:Tabs collection="${tabs}" useKey="true" control="true" />
-</div>
-<div id="content">
-		<%@ include file="/common/messages.jsp"%>
-		
-		<lams:help toolSignature="<%= SurveyConstants.TOOL_SIGNATURE %>" module="authoring"/>
-		<!-- end tab buttons -->
-		<div class="tabbody">
-			<!-- tab content 1 (Basic) -->
-			<lams:TabBody id="1" titleKey="label.authoring.heading.basic.desc" page="basic.jsp" />
-			<!-- end of content (Basic) -->
-
-
-			<!-- Button Row -->
-			<lams:AuthoringButton formID="authoringForm" clearSessionActionUrl="/clearsession.do" toolSignature="<%=SurveyConstants.TOOL_SIGNATURE%>" 
-				toolContentID="${formBean.survey.contentId}"  accessMode="teacher" defineLater="yes"  
-				customiseSessionID="${formBean.sessionMapID}" contentFolderID="${formBean.contentFolderID}"/>
-		</div>
-
-
+			<lams:Tabs control="true" title="${title}" helpToolSignature="<%= SurveyConstants.TOOL_SIGNATURE %>" helpModule="authoring">
+				<lams:Tab id="1" key="label.authoring.heading.basic" />
+			</lams:Tabs>
+	
+			<lams:TabBodyArea>
+			
+				<%@ include file="/common/messages.jsp"%>
+	
+				<lams:TabBodys>
+					<!-- tab content 1 (Basic) -->
+					<lams:TabBody id="1" titleKey="label.authoring.heading.basic.desc" page="basic.jsp" />
+					<!-- end of content (Basic) -->
+				</lams:TabBodys>
+				
+				<!-- Button Row -->
+				<lams:AuthoringButton formID="authoringForm" clearSessionActionUrl="/clearsession.do" toolSignature="<%=SurveyConstants.TOOL_SIGNATURE%>" 
+					toolContentID="${formBean.survey.contentId}"  accessMode="teacher" defineLater="yes"  
+					customiseSessionID="${formBean.sessionMapID}" contentFolderID="${formBean.contentFolderID}"/>
+			</lams:TabBodyArea>
+			
+			<div id="footer"></div>
+			
+		</lams:Page>
 	</html:form>
 	
-</div>
-<div id="footer"></div>
-</div>
 </body>
 </lams:html>
\ No newline at end of file
Index: lams_tool_survey/web/pages/authoring/parts/addchoicequestion.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/authoring/parts/addchoicequestion.jsp	(.../addchoicequestion.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_survey/web/pages/authoring/parts/addchoicequestion.jsp	(.../addchoicequestion.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -1,91 +1,80 @@
-<!DOCTYPE html>
-		
-
 <%@ include file="/common/taglibs.jsp"%>
 
-<lams:html>
-	<lams:head>
-		<%@ include file="/common/header.jsp"%>
-		<lams:css style="main" />
-		
-		<script type="text/javascript" src="${lams}includes/javascript/prototype.js"></script>
-		<%-- used for  surveyitem.js --%>
-		<script type="text/javascript">
-		   var removeInstructionUrl = "<c:url value='/authoring/removeInstruction.do'/>";
-	       var addInstructionUrl = "<c:url value='/authoring/newInstruction.do'/>";
-		</script>
-		<script type="text/javascript"
-			src="<html:rewrite page='/includes/javascript/surveyitem.js'/>"></script>
-	</lams:head>
-	<body>
-		<!-- Basic Info Form-->
+	<%-- used for  surveyitem.js --%>
+	<script type="text/javascript">
+	   var removeInstructionUrl = "<c:url value='/authoring/removeInstruction.do'/>";
+       var addInstructionUrl = "<c:url value='/authoring/newInstruction.do'/>";
+	</script>
+	<script type="text/javascript"
+		src="<html:rewrite page='/includes/javascript/surveyitem.js'/>"></script>
 
-		<%@ include file="/common/messages.jsp"%>
-		<html:form action="/authoring/saveOrUpdateItem" method="post"
-			styleId="surveyItemForm">
-			<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
-			<%-- This field is not belong STRUTS form --%>
-			<input type="hidden" name="instructionList" id="instructionList" />
-			<html:hidden property="sessionMapID" />
-			<html:hidden property="itemIndex" />
-			<html:hidden property="contentFolderID" />
-			<%-- This value should be 1 or 2 --%>
-			<html:hidden property="itemType" value="1" />
-
-			<h2 class="no-space-left">
+		<!-- Basic Info Form-->
+		<div class="panel panel-default add-file">
+			<div class="panel-heading panel-title">
 				<fmt:message key="label.authoring.basic.add.survey.question" />
-			</h2>
-
-			<div class="field-name">
-				<fmt:message key="label.question" />
 			</div>
+			<div class="panel-body">
 
-			<lams:CKEditor id="question.description" value="${formBean.question.description}"
-				contentFolderID="${formBean.contentFolderID}" width="99%"
-				resizeParentFrameName="questionInputArea">	
-			</lams:CKEditor>
+			<%@ include file="/common/messages.jsp"%>
+	
+			<html:form action="/authoring/saveOrUpdateItem" method="post"
+				styleId="surveyItemForm">
+				<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
+				<%-- This field is not belong STRUTS form --%>
+				<input type="hidden" name="instructionList" id="instructionList" />
+				<html:hidden property="sessionMapID" />
+				<html:hidden property="itemIndex" />
+				<html:hidden property="contentFolderID" />
+				<%-- This value should be 1 or 2 --%>
+				<html:hidden property="itemType" value="1" />
 
-			<div class="space-top">
-				<html:checkbox property="question.optional" styleClass="noBorder"
-					styleId="questionOptional">
-				</html:checkbox>
+				<div class="form-group">
+					<label for="question.description"><fmt:message key="label.question" /></label>
+					<lams:CKEditor id="question.description" value="${formBean.question.description}"
+						contentFolderID="${formBean.contentFolderID}">	
+					</lams:CKEditor>
+				</div>
 
-				<label for="questionOptional">
+				<div class="checkbox">
+					<label for="questionOptional">
+					<html:checkbox property="question.optional" styleId="questionOptional">
+					</html:checkbox>
 					<fmt:message key="label.authoring.basic.question.optional" />
-				</label>
-			</div>
+					</label>
+				</div>
 
-			<div class="space-top">
-				<a href="javascript:;" onclick="addInstruction()" class="button"><fmt:message
-						key="label.authoring.basic.add.option" /> </a>
-				<img src="${ctxPath}/includes/images/indicator.gif"
-					style="display:none" id="instructionArea_Busy" />
+				<div class="voffset5 form-inline">
+					<a href="javascript:;" onclick="addInstruction()" class="btn btn-default btn-sm">
+						<fmt:message key="label.authoring.basic.add.option" /> </a>
+					<i class="fa fa-spinner" style="display: none" id="instructionArea_Busy" />
 
-				<span class="space-left"> <html:checkbox
-						property="question.allowMultipleAnswer"
-						styleId="questionAllowMultipleAnswer" styleClass="noBorder">
-					</html:checkbox> <label for="questionAllowMultipleAnswer">
-						<fmt:message
-							key="label.authoring.basic.question.allow.muli.answer" />
-					</label> <html:checkbox property="question.appendText"
-						styleClass="noBorder" styleId="questionAppendText">
-					</html:checkbox> <label for="questionAppendText">
+					<div class="checkbox loffset5"> 
+						<label for="question.allowMultipleAnswer">
+						<html:checkbox	property="question.allowMultipleAnswer" styleId="questionAllowMultipleAnswer">
+						</html:checkbox> 
+						<fmt:message key="label.authoring.basic.question.allow.muli.answer" />
+						</label> 
+					</div>
+					
+					<div class="checkbox loffset5"> 
+						<label for="question.appendText">
+						<html:checkbox property="question.appendText" styleId="questionAppendText">
+						</html:checkbox> 
 						<fmt:message key="label.authoring.basic.question.append.text" />
-					</label> </span>
-			</div>
+						</label>
+					</div>
+				</div>
 
-		</html:form>
+			</html:form>
 		<!-- Instructions -->
 
 		<%@ include file="instructions.jsp"%>
 
-		<lams:ImgButtonWrapper>
-			<a href="#" onclick="submitSurveyItem()" class="button-add-item">
-				<fmt:message key="label.authoring.basic.add.question" /> </a>
+		<a href="#" onclick="submitSurveyItem()" class="btn btn-default btn-sm">
+			<i class="fa fa-plus"></i>&nbsp; <fmt:message key="label.authoring.basic.add.question" /> </a>
 
-			<a href="javascript:;" onclick="cancelSurveyItem()"
-				class="button space-left"> <fmt:message key="label.cancel" /> </a>
-		</lams:ImgButtonWrapper>
+		<a href="javascript:;" onclick="cancelSurveyItem()"
+			class="btn btn-default btn-sm"> <fmt:message key="label.cancel" /> </a>
 
-	</body>
-</lams:html>
+		</div>
+	</div>
Index: lams_tool_survey/web/pages/authoring/parts/addopenquestion.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/authoring/parts/addopenquestion.jsp	(.../addopenquestion.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_survey/web/pages/authoring/parts/addopenquestion.jsp	(.../addopenquestion.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -1,80 +1,47 @@
-<!DOCTYPE html>
-		
-
 <%@ include file="/common/taglibs.jsp"%>
+<%-- user for  surveysurveyitem.js --%>
+<script type="text/javascript">
+  		var removeInstructionUrl = "<c:url value='/authoring/removeInstruction.do'/>";
+     		var addInstructionUrl = "<c:url value='/authoring/newInstruction.do'/>";
+</script>
+<script type="text/javascript" src="<html:rewrite page='/includes/javascript/surveyitem.js'/>"></script>
 
-<lams:html>
-	<lams:head>
-		<%@ include file="/common/header.jsp"%>
-		<lams:css style="main" />
+	<div class="panel panel-default add-file">
+		<div class="panel-heading panel-title">
+			<fmt:message key="label.authoring.basic.add.survey.question" />
+		</div>
+		<div class="panel-body">
 
-		<script type="text/javascript" src="${lams}includes/javascript/prototype.js"></script>
-		<%-- user for  surveysurveyitem.js --%>
-		<script type="text/javascript">
-	   		var removeInstructionUrl = "<c:url value='/authoring/removeInstruction.do'/>";
-       		var addInstructionUrl = "<c:url value='/authoring/newInstruction.do'/>";
-		</script>
-		<script type="text/javascript" src="<html:rewrite page='/includes/javascript/surveyitem.js'/>"></script>
-		
-		
-		<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.js"></script>
-		<script type="text/javascript">
-			$.noConflict();
-			jQuery(function() {
-				//change size of an iframe on ckeditor's autogrow 
-				CKEDITOR.instances["question.description"].on("instanceReady", function(e) {
-				    e.editor.on('resize', function(reEvent){
-				    	var iframe = window.parent.document.getElementById("questionInputArea");
-				    	iframe.style.height = eval(iframe.contentWindow.document.body.scrollHeight) + 'px';
-				    });
-				});
-			});
-		</script>
-
-	</lams:head>
-	<body>
-
-		<!-- Basic Info Form-->
-
 		<%@ include file="/common/messages.jsp"%>
+
 		<html:form action="/authoring/saveOrUpdateItem" method="post" styleId="surveyItemForm">
 			<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
 			<html:hidden property="sessionMapID" />
 			<html:hidden property="contentFolderID" />
 			<html:hidden property="itemIndex" />
 			<html:hidden property="itemType" value="3" />
 
-			<h2 class="no-space-left">
-				<fmt:message key="label.authoring.basic.add.survey.question" />
-			</h2>
-
-			<div class="field-name">
-				<fmt:message key="label.question" />
+			<div class="form-group">
+				<label for="question.description"><fmt:message key="label.question" /></label>
+				<lams:CKEditor id="question.description" value="${formBean.question.description}"
+					contentFolderID="${formBean.contentFolderID}">
+				</lams:CKEditor>
 			</div>
 
-			<lams:CKEditor id="question.description" value="${formBean.question.description}"
-				contentFolderID="${formBean.contentFolderID}" width="99%"
-				resizeParentFrameName="questionInputArea">
-			</lams:CKEditor>
-
-			<div class="space-top">
-				<html:checkbox property="question.optional" styleClass="noBorder"
-					styleId="questionOptional">
-				</html:checkbox>
-
+			<div class="checkbox">
 				<label for="questionOptional">
-					<fmt:message key="label.authoring.basic.question.optional" />
+				<html:checkbox property="question.optional" styleId="questionOptional">
+				</html:checkbox>
+				<fmt:message key="label.authoring.basic.question.optional" />
 				</label>
 			</div>
 
 		</html:form>
 
-		<lams:ImgButtonWrapper>
-			<a href="#" onclick="submitSurveyItem()" class="button-add-item">
-				<fmt:message key="label.authoring.basic.add.question" /> </a>
-			<a href="javascript:;" onclick="cancelSurveyItem()"
-				class="button space-left"> <fmt:message key="label.cancel" /> </a>
-		</lams:ImgButtonWrapper>
+		<a href="#" onclick="submitSurveyItem()" class="btn btn-default btn-sm">
+			<fmt:message key="label.authoring.basic.add.question" /> </a>
+		<a href="javascript:;" onclick="cancelSurveyItem()"
+			class="btn btn-default btn-sm"> <fmt:message key="label.cancel" /> </a>
 		
-	</body>
-</lams:html>
+		</div>
+	</div>
\ No newline at end of file
Index: lams_tool_survey/web/pages/authoring/parts/instructions.jsp
===================================================================
diff -u -r40c565b9307a4b3fcc2f724b1baf104c6c8a2dcf -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/authoring/parts/instructions.jsp	(.../instructions.jsp)	(revision 40c565b9307a4b3fcc2f724b1baf104c6c8a2dcf)
+++ lams_tool_survey/web/pages/authoring/parts/instructions.jsp	(.../instructions.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -3,74 +3,43 @@
 	scope="request" />
 <c:set var="listSize" value="${fn:length(instructionList)}" />
 <div id="instructionArea">
+	<script type="text/javascript"></script>
+	
 	<form id="instructionForm">
 		<input type="hidden" name="instructionCount" id="instructionCount">
-		<table id="questionTable">
+		<table id="questionTable" class="table table-condensed table-no-border">
 			<c:forEach var="item" items="${instructionList}" varStatus="status">
 				<c:set var="item">
 					<c:out value="${item}" escapeXml="true"/>
 				</c:set>
 					
 				<tr id="instructionItem${status.index}">
-					<td width="3px">
+					<td width="5%">
 						${status.index+1}
 					</td>
 					<td width="100px">
 						<input type="text" name="instructionItemDesc${status.index}"
-							id="instructionItemDesc${status.index}" size="60" value="${item}">
+							id="instructionItemDesc${status.index}" size="60" value="${item}" class="form-control">
 					</td>
 
-					<td width="40px">
-						<%-- Don't display down icon if last line --%>
-						<c:choose>
-							<c:when test="${0 != status.index}">
-								<img src="<html:rewrite page='/includes/images/uparrow.gif'/>"
-									border="0" title="<fmt:message key="label.up"/>"
-									onclick="upItem('${status.index}')">
-							</c:when>
-							<c:otherwise>
-								<img
-									src="<html:rewrite page='/includes/images/uparrow_disabled.gif'/>"
-									border="0" title="<fmt:message key="label.up"/>">
-							</c:otherwise>
-						</c:choose>
-
-
-						<c:choose>
-							<c:when test="${listSize != status.count}">
-								<img src="<html:rewrite page='/includes/images/downarrow.gif'/>"
-									border="0" title="<fmt:message key="label.down"/>"
-									onclick="downItem('${status.index}','${listSize}')">
-							</c:when>
-							<c:otherwise>
-								<img
-									src="<html:rewrite page='/includes/images/downarrow_disabled.gif'/>"
-									border="0" title="<fmt:message key="label.down"/>">
-							</c:otherwise>
-						</c:choose>
-
-						<%-- Don't display down icon if last line --%>
+					<td class="arrows" style="width:5%">
+						<c:if test="${not status.first}">
+							<c:set var="title"><fmt:message key="label.up"/></c:set>
+							<lams:Arrow state="up" title="${title}" onclick="upItem('${status.index}')"/>
+						</c:if>
+						<c:if test="${not status.last}">
+							<c:set var="title"><fmt:message key="label.down"/></c:set>
+							<lams:Arrow state="down" title="${title}" onclick="downItem('${status.index}')"/>
+						</c:if>
 					</td>
-					<td width="30px" align="center">
-						<img src="<html:rewrite page='/includes/images/cross.gif'/>"
-							border="0" title="<fmt:message key="label.delete"/>"
-							onclick="removeInstruction('${status.index}')">
+					<td class="text-center" style="width:5%"><i class="fa fa-times"	title="<fmt:message key="label.delete"/>"
+							onclick="removeInstruction('${status.index}')"></i>
 					</td>
 				</tr>
 			</c:forEach>
 		</table>
 	</form>
 </div>
-
-<%-- This script will adjust survey item input area height according to the new instruction item amount. --%>
 <script type="text/javascript">
-	$("instructionCount").value="${listSize}";
-	var obj = window.document.getElementById('questionInputArea');
-	if (!obj && window.parent) {
-		 obj = window.parent.document.getElementById('questionInputArea');
-	}  
-	if (!obj) {
-		obj = window.top.document.getElementById('questionInputArea');
-	}
-	obj.style.height=obj.contentWindow.document.body.scrollHeight+'px';
+	document.getElementById("instructionCount").value="${listSize}";
 </script>
Index: lams_tool_survey/web/pages/authoring/parts/itemlist.jsp
===================================================================
diff -u -r21ce4d0194e8b81e613f4f6e14eb4e8bf53bdf59 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/authoring/parts/itemlist.jsp	(.../itemlist.jsp)	(revision 21ce4d0194e8b81e613f4f6e14eb4e8bf53bdf59)
+++ lams_tool_survey/web/pages/authoring/parts/itemlist.jsp	(.../itemlist.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -2,19 +2,19 @@
 <c:set var="ctxPath" value="${pageContext.request.contextPath}"
 	scope="request" />
 <div id="itemList">
-	<h2 class="spacer-left">
+
+<div class="panel panel-default voffset5">
+	<div class="panel-heading panel-title">
 		<fmt:message key="label.authoring.basic.survey.list.title" />
-		<img src="${ctxPath}/includes/images/indicator.gif"
-			style="display:none" id="surveyListArea_Busy" />
-	</h2>
+		<i class="fa fa-spinner" style="display: none" id="resourceListArea_Busy"></i>
+	</div>
 
-	<table id="itemTable" class="alternative-color" cellspacing="0">
+	<table class="table table-striped table-condensed" id="itemTable">
 		<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 
-		<c:forEach var="question" items="${sessionMap.questionList}"
-			varStatus="status">
+		<c:forEach var="question" items="${sessionMap.questionList}" varStatus="status">
 			<tr>
-				<td width="20px" align="center">
+				<td width="20px" class="text-center">
 					<c:choose>
 						<c:when test="${question.type == 1}">
 							<img src="${ctxPath}/includes/images/icon_single.gif" />
@@ -32,79 +32,45 @@
 					<c:out value="${question.shortTitle}" escapeXml="true"/>
 				</td>
 
-				<td width="80px" align="center">
+				<td width="80px" class="text-center">
 					<c:if test="${question.optional}">
 						<fmt:message key="label.optional" />
 					</c:if>
 				</td>
 
-				<td width="40px" align="center">
+				<td class="arrows" style="width:5%">
 					<c:if test="${not status.first}">
-						<img src="<html:rewrite page='/includes/images/uparrow.gif'/>"
-							border="0" title="<fmt:message key="label.up"/>"
-							onclick="upQuestion(${status.index},'${sessionMapID}')">
-						<c:if test="${status.last}">
-							<img
-								src="<html:rewrite page='/includes/images/downarrow_disabled.gif'/>"
-								border="0" title="<fmt:message key="label.down"/>">
-						</c:if>
+						<c:set var="title"><fmt:message key="label.up"/></c:set>
+						<lams:Arrow state="up" title="${title}" onclick="upQuestion(${status.index},'${sessionMapID}')"/>
 					</c:if>
-
 					<c:if test="${not status.last}">
-						<c:if test="${status.first}">
-							<img
-								src="<html:rewrite page='/includes/images/uparrow_disabled.gif'/>"
-								border="0" title="<fmt:message key="label.up"/>">
-						</c:if>
-
-						<img src="<html:rewrite page='/includes/images/downarrow.gif'/>"
-							border="0" title="<fmt:message key="label.down"/>"
-							onclick="downQuestion(${status.index},'${sessionMapID}')">
+						<c:set var="title"><fmt:message key="label.down"/></c:set>
+						<lams:Arrow state="down" title="${title}" onclick="downQuestion(${status.index},'${sessionMapID}')"/>
 					</c:if>
 				</td>
 
-				<td width="20px" align="center">
-
-					<img src="<html:rewrite page='/includes/images/edit.gif'/>"
-						border="0"
+				<td class="text-center" style="width:5%"><i class="fa fa-pencil"	
 						title="<fmt:message key="label.authoring.basic.survey.edit"/>"
-						onclick="editItem(${status.index},${question.type},'${sessionMapID}','${contentFolderID}')">
+						onclick="editItem(${status.index},${question.type},'${sessionMapID}','${contentFolderID}')"></i>
 
 				</td>
-				<td width="20px" align="center">
-
-					<img src="<html:rewrite page='/includes/images/page_copy.png'/>"
-						border="0"
+				<td  class="text-center"  style="width:5%"><i class="fa fa-clone"	
 						title="<fmt:message key="label.copy"/>"
 						onclick="copyItem(${status.index},${question.type},'${sessionMapID}','${contentFolderID}')">
-
 				</td>
-				<td width="20px" align="center">
-
-					<img src="<html:rewrite page='/includes/images/cross.gif'/>" border="0"
-						title="<fmt:message
-							key="label.authoring.basic.survey.delete" />"
-						onclick="deleteItem(${status.index},'${sessionMapID}')">
+				<td  class="text-center"  style="width:5%"><i class="fa fa-times"	
+						title="<fmt:message	key="label.authoring.basic.survey.delete" />"
+						onclick="deleteItem(${status.index},'${sessionMapID}')"></i>
 				</td>
 			</tr>
 		</c:forEach>
 	</table>
 </div>
-<%-- This script will works when a new resoruce item submit in order to refresh "Survey List" panel. --%>
+</div>
+
+<%-- This script will works when a new resource item submit in order to refresh "Survey List" panel. --%>
 <script lang="javascript">
-	var win = null;
-	try {
-		if (window.parent && window.parent.hideMessage) {
-			win = window.parent;
-		} else if (window.top && window.top.hideMessage) {
-			win = window.top;
-		}
-	} catch(err) {
-		// mute cross-domain iframe access errors
-	}
-	if (win) {
-		win.hideMessage();
-		var obj = win.document.getElementById('surveyListArea');
-		obj.innerHTML= document.getElementById("itemList").innerHTML;
-	}
+	hideMessage();
+	var obj = document.getElementById('surveyListArea');
+	obj.innerHTML= document.getElementById("itemList").innerHTML;
 </script>
Index: lams_tool_survey/web/pages/monitoring/advanceoptions.jsp
===================================================================
diff -u -r098d686653002409f33aff0f69b1183e07c1eab3 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/monitoring/advanceoptions.jsp	(.../advanceoptions.jsp)	(revision 098d686653002409f33aff0f69b1183e07c1eab3)
+++ lams_tool_survey/web/pages/monitoring/advanceoptions.jsp	(.../advanceoptions.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -1,14 +1,7 @@
-<h1 style="padding-bottom: 10px;">
-	<img src="<lams:LAMSURL/>/images/tree_closed.gif" id="treeIcon" onclick="javascript:toggleAdvancedOptionsVisibility(document.getElementById('advancedDiv'), document.getElementById('treeIcon'), '<lams:LAMSURL/>');" />
-
-	<a href="javascript:toggleAdvancedOptionsVisibility(document.getElementById('advancedDiv'), document.getElementById('treeIcon'),'<lams:LAMSURL/>');" >
-		<fmt:message key="monitor.summary.th.advancedSettings" />
-	</a>
-</h1>
-<br />
-
-<div class="monitoring-advanced" id="advancedDiv" style="display:none">
-	<table class="alternative-color">
+<c:set var="adTitle"><fmt:message key="monitor.summary.th.advancedSettings" /></c:set>
+<lams:AdvancedAccordian title="${adTitle}">
+             
+<table class="table table-striped table-condensed">
 		<tr>
 			<td>
 				<fmt:message key="label.authoring.advance.lock.on.finished" />
@@ -108,4 +101,4 @@
 			</c:when>
 		</c:choose>
 	</table>
-</div>
\ No newline at end of file
+</lams:AdvancedAccordian>
\ No newline at end of file
Index: lams_tool_survey/web/pages/monitoring/daterestriction.jsp
===================================================================
diff -u -r13b73687bb274100057f20c3e95518d005a11675 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/monitoring/daterestriction.jsp	(.../daterestriction.jsp)	(revision 13b73687bb274100057f20c3e95518d005a11675)
+++ lams_tool_survey/web/pages/monitoring/daterestriction.jsp	(.../daterestriction.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -1,43 +1,29 @@
 <%@include file="/common/taglibs.jsp"%>
 
-<h1 style="padding-bottom: 10px;">
-	<img src="<lams:LAMSURL/>/images/tree_closed.gif" id="restrictUsageTreeIcon" onclick="javascript:toggleAdvancedOptionsVisibility(document.getElementById('restrictUsageDiv'), document.getElementById('restrictUsageTreeIcon'), '<lams:LAMSURL/>');" />
+<c:set var="ddTitle"><fmt:message key="monitor.summary.date.restriction" /></c:set>
+<lams:RestrictedUsageAccordian title="${ddTitle}">
 
-	<a href="javascript:toggleAdvancedOptionsVisibility(document.getElementById('restrictUsageDiv'), document.getElementById('restrictUsageTreeIcon'),'<lams:LAMSURL/>');" >
-		<fmt:message key="monitor.summary.date.restriction" />
-	</a>
-</h1>
-<br />
-
-<div class="monitoring-advanced" id="restrictUsageDiv" style="display:none; ">
-
-	<div>
-		<fmt:message key="monitor.summary.when.date.restriction.is.set" />
-	</div>
+	<p><fmt:message key="monitor.summary.when.date.restriction.is.set" /></p>
 		
 	<div id="datetimeDiv" <c:if test='${not empty sessionMap.submissionDeadline}'> style="display: none;" </c:if>>
-		<span>
-			<fmt:message key="monitor.summary.after.date" />
-		</span>
-		
-		<input type="text" name="datetime" id="datetime" value=""/>
-				
-		<html:link	href="javascript:setSubmissionDeadline();" styleClass="button">
+		<div class="form-group">
+		<label for="datetime"><fmt:message key="monitor.summary.after.date" />&nbsp;
+		<input type="text" name="datetime" id="datetime" value="" class="form-control form-control-inline"/>
+		</label>							
+		<html:link	href="javascript:setSubmissionDeadline();" styleClass="btn btn-default">
 			<fmt:message key="monitor.summary.set.restriction" />
 		</html:link>
+		</div>
 	</div>
 
 	<div id="dateInfoDiv" <c:if test='${empty sessionMap.submissionDeadline}'> style="display: none;" </c:if>>
-		<span>
-			<fmt:message key="monitor.summary.after.date" />
-		</span>
-		
+		<label><fmt:message key="monitor.summary.after.date" /></span>
 		<span id="dateInfo">
 		</span>
-				
-		<html:link	href="javascript:removeSubmissionDeadline();" styleClass="button">
+		</label>
+		<html:link	href="javascript:removeSubmissionDeadline();" styleClass="btn btn-default">
 			<fmt:message key="monitor.summary.unset.restriction" />
 		</html:link>
 	</div>
 
-</div>
\ No newline at end of file
+</lams:RestrictedUsageAccordian>
Index: lams_tool_survey/web/pages/monitoring/editactivity.jsp
===================================================================
diff -u -r61d957b69e2230effe4ab96242233c281e0bba44 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision 61d957b69e2230effe4ab96242233c281e0bba44)
+++ lams_tool_survey/web/pages/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -1,8 +1,15 @@
 <%@ include file="/common/taglibs.jsp"%>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="survey" value="${sessionMap.survey}"/>
+<c:set var="isPageEditable" value="${sessionMap.isPageEditable}" />
 
-<table cellpadding="0">
+<c:if test="${!isPageEditable}">
+	<lams:Alert type="warn" id="no-edit" close="false">
+		<fmt:message key="message.monitoring.edit.activity.not.editable" />
+	</lams:Alert>
+</c:if>
+
+<table class="table table-condensed">
 	<tr>
 		<td nowrap width="10%">
 			<fmt:message key="label.authoring.basic.title" />
@@ -22,26 +29,15 @@
 			<c:out value="${survey.instructions}" escapeXml="false" />
 		</td>
 	</tr>
-
-	<tr>
-		<td colspan="2">
-			<c:set var="isPageEditable" value="${sessionMap.isPageEditable}" />
-			<c:choose>
-				<c:when test='${isPageEditable == "true"}'>
-					<c:url  var="authoringUrl" value="/definelater.do">
-						<c:param name="toolContentID" value="${sessionMap.toolContentID}" />
-						<c:param name="contentFolderID" value="${sessionMap.contentFolderID}" />
-					</c:url>
-					<html:link href="javascript:;" onclick="launchPopup('${authoringUrl}','definelater')" styleClass="button">
-						<fmt:message key="label.monitoring.edit.activity.edit" />
-					</html:link>
-				</c:when>
-				<c:otherwise>
-					<div class="warning">
-						<fmt:message key="message.monitoring.edit.activity.not.editable" />
-					</div>
-				</c:otherwise>
-			</c:choose>
-		</td>
-	</tr>
 </table>
+
+
+<c:if test="${isPageEditable}">
+	<c:url  var="authoringUrl" value="/definelater.do">
+		<c:param name="toolContentID" value="${sessionMap.toolContentID}" />
+		<c:param name="contentFolderID" value="${sessionMap.contentFolderID}" />
+	</c:url>
+	<html:link href="javascript:;" onclick="launchPopup('${authoringUrl}','definelater')" styleClass="btn btn-default">
+		<fmt:message key="label.monitoring.edit.activity.edit" />
+	</html:link>
+</c:if>
Index: lams_tool_survey/web/pages/monitoring/listanswers.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/monitoring/listanswers.jsp	(.../listanswers.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_survey/web/pages/monitoring/listanswers.jsp	(.../listanswers.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -7,7 +7,7 @@
 <lams:html>
 <lams:head>
 	    <%@ include file="/common/header.jsp" %>
-	    <link type="text/css" href="${lams}css/jquery.tablesorter.theme-blue.css" rel="stylesheet">
+	    <link type="text/css" href="${lams}css/jquery.tablesorter.theme.bootstrap.css" rel="stylesheet">
 		<link type="text/css" href="${lams}css/jquery.tablesorter.pager.css" rel="stylesheet">
 
 		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
@@ -43,10 +43,11 @@
 	$(document).ready(function(){
 	    
 		$(".tablesorter").tablesorter({
-			theme: 'blue',
+			theme: 'bootstrap',
+			headerTemplate : '{content} {icon}',
 		    sortInitialOrder: 'desc',
             sortList: [[0]],
-            widgets: [ "resizable", "filter" ],
+            widgets: [ "uitheme", "resizable", "filter" ],
             headers: { ${filterString} }, 
             widgetOptions: {
             	resizable: true,
@@ -60,7 +61,11 @@
 		$(".tablesorter").each(function() {
 			$(this).tablesorterPager({
 				savePages: false,
-				ajaxUrl : "<c:url value='/monitoring/getAnswersJSON.do'/>?page={page}&size={size}&{sortList:column}&{filterList:fcol}&questionUid=${question.uid}&toolSessionID=" + $(this).attr('data-session-id'),
+                container: $(this).find(".ts-pager"),
+                output: '{startRow} to {endRow} ({totalRows})',
+                cssPageDisplay: '.pagedisplay',
+                cssPageSize: '.pagesize',
+                cssDisabled: 'disabled',				ajaxUrl : "<c:url value='/monitoring/getAnswersJSON.do'/>?page={page}&size={size}&{sortList:column}&{filterList:fcol}&questionUid=${question.uid}&toolSessionID=" + $(this).attr('data-session-id'),
 				ajaxProcessing: function (data, table) {
 					if (data && data.hasOwnProperty('rows')) {
 			    		var rows = [],
@@ -101,40 +106,28 @@
 						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
+				}
 			})
 		});
   	})
 </script>
 </lams:head>
 <body class="stripes">
-		<div id="content">
-		<h1>
-			<fmt:message key="title.chart.report"/>
-		</h1>
 
-		<h2><fmt:message key="label.question"/></h2>
+	<c:set var="title"><fmt:message key="title.chart.report"/></c:set>
+	<c:set var="optionShortHeader"><%= SurveyConstants.OPTION_SHORT_HEADER %></c:set>
+	<lams:Page type="learner" title="${title}">
 
-		<table  class="tablesorter-blue" cellspacing="0">
+		<h4><fmt:message key="label.question"/></h4>
+
+		<table  class="table table-condensed table-striped table-bordered">
 		<tr>
 			<th colspan="2" class="first"><c:out value="${question.description}" escapeXml="false"/></th>
 		</tr>
 		<c:forEach var="option" items="${question.options}" varStatus="optStatus">
 			<tr>
-				<td  width="100px">
-					<%= SurveyConstants.OPTION_SHORT_HEADER %>${optStatus.count}
+				<td width="30%">
+					${optionShortHeader}${optStatus.count}
 				</td>
 				<td>
 					<c:out value="${option.description}" escapeXml="true"/>
@@ -143,15 +136,14 @@
 		</c:forEach>
 		<c:if test="${question.appendText ||question.type == 3}">
 			<tr>
-				<td  width="100px">
+				<td colspan="2">
 					<fmt:message key="label.open.response"/>
 				</td>
-				<td>&nbsp;</td>
 			</tr>
 		</c:if>
 		</table>
 
-		<h2><fmt:message key="label.answer"/></h2>
+		<h4><fmt:message key="label.answer"/></h4>
 
 		<c:choose>
 			<c:when test="${!(question.appendText || question.type==3)}">
@@ -161,50 +153,32 @@
 				<c:set var="nameWidth"></c:set>
 			</c:otherwise>
 		</c:choose>
+	
+		<c:set var="numColumns" value="${fn:length(question.options)+1}"/>
+		<c:if test="${question.appendText || question.type == 3}">
+			<c:set var="numColumns" value="${numColumns+1}"/>
+		</c:if>
 
-		<div class="tablesorter-holder">
-		<table class="tablesorter" data-session-id="${toolSessionID}">
-			<thead>
-				<tr>
- 					<th align="left" ${nameWidth}>
-						<fmt:message key="label.learner"/>
-					</th>
-					<c:forEach var="option" items="${question.options}" varStatus="optStatus">
-					<th>
-						<%= SurveyConstants.OPTION_SHORT_HEADER %>${optStatus.count}
-					</th>
-					</c:forEach>
-					<c:if test="${question.appendText || question.type == 3}">
-					<th>
-						<fmt:message key="label.open.response"/>
-					</th>
-					</c:if>
-				</tr>
-			</thead>
-			<tbody>
-			</tbody>
-		</table>
-		
-		<!-- pager -->
-		<div class="pager">
-			<form>
-				<img class="tablesorter-first"/>
-				<img class="tablesorter-prev"/>
-				<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
-				<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>
-		</div>
-		
-	</div>
+		<lams:TSTable numColumns="${numColumns}" dataId='data-session-id="${toolSessionID}"'> 
+			<th align="left" ${nameWidth}>
+				<fmt:message key="label.learner"/>
+			</th>
+			<c:forEach var="option" items="${question.options}" varStatus="optStatus">
+			<th>
+				${optionShortHeader}${optStatus.count}
+			</th>
+			</c:forEach>
+			<c:if test="${question.appendText || question.type == 3}">
+			<th>
+				<fmt:message key="label.open.response"/>
+			</th>
+			</c:if>
+		</lams:TSTable>
+
+		<a href="javascript:window.close();" class="btn btn-default btn-sm">
+		<fmt:message key="button.close"/>
+		</a>
+
+	</lams:Page>
 </body>
 </lams:html>
Index: lams_tool_survey/web/pages/monitoring/listreflections.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/monitoring/listreflections.jsp	(.../listreflections.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_survey/web/pages/monitoring/listreflections.jsp	(.../listreflections.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -7,7 +7,7 @@
 <lams:html>
 <lams:head>
 	    <%@ include file="/common/header.jsp" %>
-	    <link type="text/css" href="${lams}css/jquery.tablesorter.theme-blue.css" rel="stylesheet">
+	    <link type="text/css" href="${lams}css/jquery.tablesorter.theme.bootstrap.css" rel="stylesheet">
 		<link type="text/css" href="${lams}css/jquery.tablesorter.pager.css" rel="stylesheet">
 
 		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
@@ -20,10 +20,11 @@
 	$(document).ready(function(){
 	    
 		$(".tablesorter").tablesorter({
-			theme: 'blue',
+			theme: 'bootstrap',
+			headerTemplate : '{content} {icon}',
 		    sortInitialOrder: 'desc',
             sortList: [[0]],
-            widgets: [ "resizable", "filter" ],
+            widgets: [ "uitheme", "resizable", "filter" ],
             headers: { 1: { sorter: false, filter: false} }, 
             widgetOptions: {
             	resizable: true,
@@ -37,6 +38,11 @@
 		$(".tablesorter").each(function() {
 			$(this).tablesorterPager({
 				savePages: false,
+                container: $(this).find(".ts-pager"),
+                output: '{startRow} to {endRow} ({totalRows})',
+                cssPageDisplay: '.pagedisplay',
+                cssPageSize: '.pagesize',
+                cssDisabled: 'disabled',
 				ajaxUrl : "<c:url value='/monitoring/getReflectionsJSON.do'/>?page={page}&size={size}&{sortList:column}&{filterList:fcol}&toolSessionID=" + $(this).attr('data-session-id'),
 				ajaxProcessing: function (data, table) {
 					if (data && data.hasOwnProperty('rows')) {
@@ -67,59 +73,25 @@
 						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
+				}
 			})
 		});
   	})
 </script>
 <body class="stripes">
-	<div id="content">
-		<h1><fmt:message key="title.reflection"/></h1>
 
-		<div class="tablesorter-holder">
-		<table class="tablesorter" data-session-id="${param.toolSessionID}">
-			<thead>
-				<tr>
-					<th><fmt:message key="monitoring.user.fullname"/></th>
-					<th><fmt:message key="monitoring.user.reflection"/></th>
-				</tr>
-			</thead>
-			<tbody>
-			</tbody>
-		</table>
-		
-		<!-- pager -->
-		<div class="pager">
-			<form>
-				<img class="tablesorter-first"/>
-				<img class="tablesorter-prev"/>
-				<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
-				<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>
-		</div>
+	<c:set var="title"><fmt:message key="title.reflection"/></c:set>
+	<lams:Page type="learner" title="${title}">
+
+		<lams:TSTable numColumns="2" dataId='data-session-id="${param.toolSessionID}"'> 
+			<th><fmt:message key="monitoring.user.fullname"/></th>
+			<th><fmt:message key="monitoring.user.reflection"/></th>
+		</lams:TSTable>
 				
-	</div>
+		<a href="javascript:window.close();" class="btn btn-default btn-sm">
+		<fmt:message key="button.close"/>
+		</a>
+
+	</lams:Page>
 </body>
 </lams:html>
Index: lams_tool_survey/web/pages/monitoring/monitoring.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_survey/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -1,12 +1,43 @@
 <!DOCTYPE html>
-        
-
 <%@ include file="/common/taglibs.jsp"%>
 <%@ page import="org.lamsfoundation.lams.tool.survey.SurveyConstants"%>
 
+<c:set var="lams"><lams:LAMSURL/></c:set>
+
 <lams:html>
 	<lams:head>
-		 <%@ include file="/common/tabbedheader.jsp" %>
+
+	<lams:css/>
+	
+	<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 type="text/javascript" src="${lams}includes/javascript/jquery-ui.timepicker.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.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/bootstrap.min.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.tabcontroller.js"></script>
+	
+	<script type="text/javascript">
+	//pass settings to monitorToolSummaryAdvanced.js
+	<c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
+	var submissionDeadlineSettings = {
+		lams: '${lams}',
+		submissionDeadline: '${sessionMap.submissionDeadline}',
+		setSubmissionDeadlineUrl: '<c:url value="/monitoring/setSubmissionDeadline.do"/>',
+		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" />'
+	};	
+	</script>
+	<script type="text/javascript" src="${lams}/includes/javascript/monitorToolSummaryAdvanced.js" ></script>
+
+	<link type="text/css" href="${lams}/css/jquery-ui-smoothness-theme.css" rel="stylesheet">
+	<link type="text/css" href="${lams}/css/jquery-ui.timepicker.css" rel="stylesheet"> 
+	<link type="text/css" href="${lams}/css/chart.css" rel="stylesheet" />
+		
 	 <script>
 			var initialTabId = "${initialTabId}";
 	 
@@ -30,26 +61,27 @@
 	    </script>		 
 	</lams:head>
 	<body class="stripes" onLoad="init()">
-	<div id="page">
-		<h1>
-			<fmt:message key="label.monitoring.heading" />
-		</h1>
-	<div id="header">
-		<lams:Tabs>
+	
+	<c:set var="title"><fmt:message key="activity.title" /></c:set>
+	<lams:Page title="${title}" type="navbar">
+	
+		<lams:Tabs title="${title}" control="true" helpToolSignature="<%= SurveyConstants.TOOL_SIGNATURE %>" helpModule="monitoring">
 			<lams:Tab id="1" key="monitoring.tab.summary" />
 			<lams:Tab id="2" key="monitoring.tab.edit.activity" />			
 			<lams:Tab id="3" key="monitoring.tab.statistics" />
 		</lams:Tabs>
-	</div>
-	<div id="content">
-			<lams:help toolSignature="<%= SurveyConstants.TOOL_SIGNATURE %>" module="monitoring"/>
-	
+		
+		<lams:TabBodyArea>
+		<lams:TabBodys>
 			<lams:TabBody id="1" titleKey="monitoring.tab.summary" page="summary.jsp" />
 			<lams:TabBody id="2" titleKey="monitoring.tab.edit.activity" page="editactivity.jsp" />			
 			<lams:TabBody id="3" titleKey="monitoring.tab.statistics" page="statistic.jsp" />
-	</div>
-	<div id="footer"></div>
-	
-	</div>
+		</lams:TabBodys>
+		</lams:TabBodyArea>
+		
+		<div id="footer" />
+		
+	</lams:Page>
+
 	</body>
 </lams:html>
Index: lams_tool_survey/web/pages/monitoring/statistic.jsp
===================================================================
diff -u -racc5f651c03bd0895c8b189c932ea35dea91dc7d -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/monitoring/statistic.jsp	(.../statistic.jsp)	(revision acc5f651c03bd0895c8b189c932ea35dea91dc7d)
+++ lams_tool_survey/web/pages/monitoring/statistic.jsp	(.../statistic.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -1,22 +1,30 @@
 <%@ include file="/common/taglibs.jsp"%>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
-<c:set var="tool"><lams:WebAppURL/></c:set>
 
-<table  class="alternative-color" cellspacing="0">
-	<tr>
-		<th class="first">
-			<fmt:message key="label.session.name"/>
-		</th>
-		<th class="first">
-			<fmt:message key="label.number.learners"/>
-		</th>
-	</tr>
-	<c:forEach var="entry" items="${sessionMap.statistic}">
-		<c:set var="session" value="${entry.key}"/>
-		<c:set var="usersInSession" value="${entry.value}"/>
+<c:choose>
+<c:when test="${empty sessionMap.statistic}">
+	<lams:Alert type="info" id="no-session-summary" close="false">
+		<fmt:message key="message.monitoring.summary.no.session" />
+	</lams:Alert>
+</c:when>
+<c:otherwise>	
+	<table class="table table-condensed table-no-border">
 		<tr>
-			<td>${session.sessionName}</td>
-			<td>${usersInSession}</td>
+			<th class="first">
+				<fmt:message key="label.session.name"/>
+			</th>
+			<th class="first">
+				<fmt:message key="label.number.learners"/>
+			</th>
 		</tr>
-	</c:forEach>
-</table>
+		<c:forEach var="entry" items="${sessionMap.statistic}">
+			<c:set var="session" value="${entry.key}"/>
+			<c:set var="usersInSession" value="${entry.value}"/>
+			<tr>
+				<td>${session.sessionName}</td>
+				<td>${usersInSession}</td>
+			</tr>
+		</c:forEach>
+	</table>
+</c:otherwise>
+</c:choose>
\ No newline at end of file
Index: lams_tool_survey/web/pages/monitoring/summary.jsp
===================================================================
diff -u -r0012f4c60038db0a2c4754b641f95c24ddd0d84a -r230631757ce5657c02733128542f738928cc514e
--- lams_tool_survey/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 0012f4c60038db0a2c4754b641f95c24ddd0d84a)
+++ lams_tool_survey/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 230631757ce5657c02733128542f738928cc514e)
@@ -8,30 +8,7 @@
  		<lams:LAMSURL />
 </c:set>
 
-<link type="text/css" href="${lams}/css/jquery-ui-smoothness-theme.css" rel="stylesheet">
-<link type="text/css" href="${lams}/css/jquery-ui.timepicker.css" rel="stylesheet"> 
-<link type="text/css" href="${lams}/css/chart.css" rel="stylesheet" />
-
 <script type="text/javascript">
-	//pass settings to monitorToolSummaryAdvanced.js
-	var submissionDeadlineSettings = {
-		lams: '${lams}',
-		submissionDeadline: '${sessionMap.submissionDeadline}',
-		setSubmissionDeadlineUrl: '<c:url value="/monitoring/setSubmissionDeadline.do"/>',
-		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" />'
-	};	
-</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 type="text/javascript" src="${lams}includes/javascript/jquery-ui.timepicker.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.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/monitorToolSummaryAdvanced.js" ></script>
-<script type="text/javascript">
 	function exportSurvey(sessionId){
 		var url = "<c:url value="/monitoring/exportSurvey.do"/>";
 	    var reqIDVar = new Date();
@@ -41,48 +18,70 @@
 	}
 </script>
 
-<h1>
-	<c:out value="${survey.title}" escapeXml="true" />
-</h1>
-<div class="instructions small-space-top">
-	<c:out value="${survey.instructions}" escapeXml="false"/>
+<div class="panel">
+	<h4>
+	    <c:out value="${survey.title}" escapeXml="true"/>
+	</h4>
+	<div class="instructions voffset5">
+	    <c:out value="${survey.instructions}" escapeXml="false"/>
+	</div>
+	
+	<c:if test="${empty summaryList}">
+		<lams:Alert type="info" id="no-session-summary" close="false">
+			<fmt:message key="message.monitoring.summary.no.session" />
+		</lams:Alert>
+	</c:if>
+	
+
 </div>
-<br/>
 
-<c:if test="${empty summaryList}">
-	<div align="center">
-		<b> <fmt:message key="message.monitoring.summary.no.session" /> </b>
-	</div>
+<c:set var="sessionButtonSize">btn-sm</c:set>
+<c:if test="${sessionMap.isGroupedActivity}">
+<div class="panel-group" id="accordionSessions" role="tablist" aria-multiselectable="true"> 
+<c:set var="sessionButtonSize">btn-xs</c:set>
 </c:if>
 
-	<c:forEach var="group" items="${summaryList}" varStatus="firstGroup">
+	<c:forEach var="group" items="${summaryList}" varStatus="status">
 		<c:set var="surveySession"  value="${group.key}"/>
 		<c:set var="questions"  value="${group.value}"/>
+
+		<c:set var="sessionButtons">
+			<c:if test="${sessionMap.survey.reflectOnActivity}">
+				<c:set var="listReflections"><c:url value="/pages/monitoring/listreflections.jsp?toolSessionID=${surveySession.sessionId}"/></c:set>
+				<html:link href="javascript:launchPopup('${listReflections}')" styleClass="btn btn-default ${sessionButtonSize}">
+					<fmt:message key="page.title.monitoring.view.reflection" />
+				</html:link>
+			</c:if>	
+			<html:link href="javascript:exportSurvey(${surveySession.sessionId});" property="exportExcel" styleClass="btn btn-default ${sessionButtonSize} loffset5">
+				<fmt:message key="label.monitoring.button.export.excel" />
+			</html:link>
+		</c:set>
+
+		<c:choose>
+		<c:when test="${sessionMap.isGroupedActivity}">	
+		    <div class="panel panel-default" >
+	        <div class="panel-heading" id="heading${surveySession.sessionId}">
+	        	<span class="panel-title collapsable-icon-left">
+	        	<a class="${status.first ? '' : 'collapsed'}" role="button" data-toggle="collapse" href="#collapse${surveySession.sessionId}" 
+						aria-expanded="${status.first ? 'false' : 'true'}" aria-controls="collapse${surveySession.sessionId}" >
+				<fmt:message key="monitoring.label.group" />&nbsp;${surveySession.sessionName}</a>
+				</span>
+				<span class="pull-right btn-group">${sessionButtons}</span>
+	        </div>
+	        
+	        <div id="collapse${surveySession.sessionId}" class="panel-collapse collapse ${status.first ? 'in' : ''}" role="tabpanel" aria-labelledby="heading${surveySession.sessionId}">
+		</c:when>
+		<c:otherwise>
+			<div>${sessionButtons}</div>
+		</c:otherwise>
+		</c:choose>
 		
 		<c:if test="${empty questions}">
-			<table cellpadding="0"  class="alternative-color">
-				<tr>
-					<td colspan="2">
-						<div align="left">
-							<b> <fmt:message key="message.monitoring.summary.no.survey.for.group" /> </b>
-						</div>
-					</td>
-				</tr>
-			</table>
+			<b> <fmt:message key="message.monitoring.summary.no.survey.for.group" /> </b>
 		</c:if>
+		
 		<c:forEach var="question" items="${questions}" varStatus="queStatus">
-			<%-- display group name on first row--%>
-			<c:if test="${queStatus.first}">
-				<table cellpadding="0"  class="alternative-color">
-					<c:if test="${sessionMap.isGroupedActivity}">
-						<tr>
-							<td colspan="2">
-								<B><fmt:message key="monitoring.label.group" /> ${surveySession.sessionName}</B> 
-							</td>
-						</tr>
-					</c:if>
-					<%-- End group title display --%>
-			</c:if>
+			<table class="table table-condensed table-no-border">
 			<tr>
 				<th class="first" colspan="2">
 					<a href="javascript:;" onclick="launchPopup('<c:url value="/monitoring/listAnswers.do?"/>toolSessionID=${surveySession.sessionId}&questionUid=${question.uid}')">
@@ -143,7 +142,7 @@
 			</c:if>
 			<c:if test="${question.type == 3}">
 				<tr>
-					<td><fmt:message key="label.open.response"/></td>
+					<td width="30%"><fmt:message key="label.open.response"/></td>
 					<td>
 						${question.openResponseCount} 
 					</td>
@@ -153,24 +152,18 @@
 				</table>
 			</c:if>
 		</c:forEach>
-			<table>		
-					<tr>
-						<td >
-							<c:if test="${sessionMap.survey.reflectOnActivity}">
-								<c:set var="listReflections"><c:url value="/pages/monitoring/listreflections.jsp?toolSessionID=${surveySession.sessionId}"/></c:set>
-								<html:link href="javascript:launchPopup('${listReflections}')" styleClass="button">
-									<fmt:message key="page.title.monitoring.view.reflection" />
-								</html:link>
-							</c:if>	
-							<html:link href="javascript:exportSurvey(${surveySession.sessionId});" property="exportExcel" styleClass="button">
-									<fmt:message key="label.monitoring.button.export.excel" />
-							</html:link>
-						</td>
-					</tr>		
-			</table>
+
+	<c:if test="${sessionMap.isGroupedActivity}">
+		</div> <!-- end collapse area  -->
+		</div> <!-- end collapse panel  -->
+	</c:if>
+	${ !sessionMap.isGroupedActivity || ! status.last ? '<div class="voffset5">&nbsp;</div>' :  ''}
+			
 	</c:forEach>
 	
-<br />	
+<c:if test="${sessionMap.isGroupedActivity}">
+</div> 
+</c:if>
 	
 <%@include file="advanceoptions.jsp"%>