Index: lams_admin/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_admin/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_admin/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_admin/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_admin/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_admin/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_admin/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_admin/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_admin/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_central/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_central/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_central/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_central/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_central/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_central/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_central/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_central/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_central/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_central/web/includes/javascript/authoring/authoringActivity.js
===================================================================
diff -u -r152642ba22a463e187e33abefc6b82258e249cf8 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_central/web/includes/javascript/authoring/authoringActivity.js	(.../authoringActivity.js)	(revision 152642ba22a463e187e33abefc6b82258e249cf8)
+++ lams_central/web/includes/javascript/authoring/authoringActivity.js	(.../authoringActivity.js)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -1421,8 +1421,6 @@
 				'width' :  Math.max(380, Math.min(1024, $(window).width() - 60)),
 				'draggable' : true,
 				'resizable' : true,
-				// only Peer Review pop up starts maximized as it contains wide rubrics ratings
-				'startMaximized' : activity.authorURL.includes('laprev11'),
 				'title' : activity.title + ' ' + LABELS.ACTIVITY_DIALOG_TITLE_SUFFIX,
 				'beforeClose' : function(event){
 					// ask the user if he really wants to exit before saving his work
Index: lams_gradebook/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_gradebook/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_gradebook/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_gradebook/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_gradebook/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_gradebook/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_gradebook/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_gradebook/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_gradebook/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_learning/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_learning/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_learning/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_learning/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_learning/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_learning/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_learning/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_learning/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_learning/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_monitoring/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_monitoring/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_monitoring/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_monitoring/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_monitoring/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_monitoring/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_monitoring/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_monitoring/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_monitoring/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_assessment/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_assessment/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_assessment/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_assessment/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_assessment/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_assessment/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_assessment/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_assessment/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_assessment/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_chat/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_chat/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_chat/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_chat/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_chat/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_chat/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_chat/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_chat/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_chat/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_daco/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_daco/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_daco/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_daco/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_daco/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_daco/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_daco/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_daco/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_daco/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_doku/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_doku/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_doku/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_doku/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_doku/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_doku/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_doku/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_doku/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_doku/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_forum/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_forum/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_forum/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_forum/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_forum/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_forum/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_forum/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_forum/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_forum/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_gmap/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_gmap/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_gmap/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_gmap/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_gmap/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_gmap/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_gmap/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_gmap/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_gmap/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_images/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_images/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_images/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_images/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_images/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_images/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_images/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_images/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_images/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_imscc/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_imscc/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_imscc/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_imscc/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_imscc/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_imscc/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_imscc/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_imscc/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_imscc/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_lamc/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_lamc/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_lamc/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_lamc/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_lamc/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_lamc/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_lamc/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_lamc/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_lamc/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_laqa/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_laqa/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_laqa/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_laqa/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_laqa/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_laqa/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_laqa/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_laqa/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_laqa/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_larsrc/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_larsrc/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_larsrc/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_larsrc/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_larsrc/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_larsrc/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_larsrc/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_larsrc/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_larsrc/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_leader/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_leader/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_leader/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_leader/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_leader/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_leader/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_leader/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_leader/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_leader/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_mindmap/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_mindmap/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_mindmap/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_mindmap/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_mindmap/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_mindmap/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_mindmap/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_mindmap/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_mindmap/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_nb/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_nb/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_nb/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_nb/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_nb/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_nb/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_nb/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_nb/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_nb/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_notebook/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_notebook/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_notebook/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_notebook/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_notebook/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_notebook/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_notebook/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_notebook/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_notebook/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_pixlr/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_pixlr/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_pixlr/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_pixlr/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_pixlr/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_pixlr/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_pixlr/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_pixlr/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_pixlr/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_preview/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_preview/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_preview/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_sbmt/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_sbmt/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_sbmt/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_sbmt/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_sbmt/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_sbmt/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_sbmt/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_sbmt/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_sbmt/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_scratchie/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_scratchie/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_scratchie/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_scratchie/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_scratchie/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_scratchie/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_scratchie/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_scratchie/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_scratchie/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_scribe/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_scribe/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_scribe/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_scribe/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_scribe/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_scribe/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_scribe/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_scribe/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_scribe/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_spreadsheet/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_spreadsheet/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_spreadsheet/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_spreadsheet/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_spreadsheet/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_spreadsheet/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_survey/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_survey/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_survey/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_survey/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_survey/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_survey/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_survey/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_survey/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_survey/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_task/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_task/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_task/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_task/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_task/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_task/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_task/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_task/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_task/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_vote/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_vote/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_vote/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_vote/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_vote/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_vote/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_vote/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_vote/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_vote/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_wiki/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_wiki/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_wiki/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_wiki/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_wiki/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_wiki/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_wiki/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_wiki/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_wiki/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_tool_zoom/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_zoom/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_tool_zoom/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_tool_zoom/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_zoom/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_tool_zoom/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_tool_zoom/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_tool_zoom/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_tool_zoom/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file
Index: lams_www/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag
===================================================================
diff -u -rbad085b1dd5071ed2165bb83be9c41365bb0135a -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_www/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision bad085b1dd5071ed2165bb83be9c41365bb0135a)
+++ lams_www/web/WEB-INF/tags/AuthoringRatingAllStyleCriteria.tag	(.../AuthoringRatingAllStyleCriteria.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -105,10 +105,54 @@
 	<c:set var="styleComment" value="label.rating.style.comment" scope="request"/>
 </c:if>
 
+<style>
+	#criterias-table-body .rubrics-table {
+		width: 100%;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-columns-part td {
+		padding: 0 3px 20px 3px;
+		text-align: right;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-rows-part th {
+		border-top: 1px solid #ddd;
+		padding-top: 10px;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row td {
+		padding: 10px 3px 0 3px;
+		vertical-align: top;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-row-title {
+		border-right: 1px solid #ddd;
+	}
+	
+	#criterias-table-body .rubrics-table th {
+		text-align: center;
+	}
+	
+	#criterias-table-body .rubrics-table textarea {
+		width: 100%;
+		resize: vertical;
+	}
+	
+	#criterias-table-body .rubrics-table .rubrics-delete-column-button {
+		margin-right: 4px;
+		display: block;
+	}
+</style>
 
 <script type="text/javascript">
 	var minimumWordsSpinnerArray  = new Array();
 	var maxOrderId;
+	var criteriaArrows = '<div class="arrow-up" title="<fmt:message key="${upLabel}"/>" />' + 
+	 					 '<div class="arrow-down" title="<fmt:message key="${downLabel}"/>" />';
+	  
+	var newGroupId = -1; // groups existing in DB have ID > 0; new, unsaved ones have ID < 0
+	const MAX_RUBRICS_COLUMNS = 5;
 	
 	$(document).ready(function() { 
 	
@@ -119,8 +163,9 @@
 				<c:set var="maxOrderId" value="${criteria.orderId}"/>
 			</c:if>
 			<c:set var="escapedTitle"><c:out value="${criteria.title}" escapeXml="true"/></c:set>
- 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}', '${criteria.maxRating}', 
- 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}' );
+ 			addRow('${criteria.orderId}', '${criteria.ratingStyle}', '${escapedTitle}'.replaceAll('&lt;BR/&gt;', '\r\n'), '${criteria.maxRating}', 
+ 					${criteria.commentsEnabled}, '${criteria.commentsMinWordsLimit}', '${criteria.minimumRates}', '${criteria.maximumRates}', 
+ 					'${criteria.ratingCriteriaGroupId}', '${criteria.rubricsColumnsJSON}', '${criteria.rubricsColumnHeadersJSON}');
 		</c:forEach>
 		maxOrderId = ${maxOrderId};
 		if ( maxOrderId == 0 ) {
@@ -129,55 +174,61 @@
 		reactivateArrows();
 	
 		//upCriteria
-		 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
+		 $( "body" ).on( "click", ".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 currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
 			var prevRow = currentRow.prev();
-			var prevCriteriaTd = $( ".criteria-info", prevRow);
-			var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
-			//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+			var prevOrderId = $( "input[name^='criteriaOrderId']", prevRow);
+
+			currentOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val - prevOrderId.length);
+			});		
+			prevOrderId.each(function(){
+				var val = +$(this).val();
+				$(this).val(val + currentOrderId.length);
+			});		
 			
-			//swap orderIds
-			var temp = currentOrderId.val();
-			currentOrderId.val(prevOrderId.val());
-			prevOrderId.val(temp);
-			
 			//swap elements
-			currentCriteriaTd.detach().prependTo(prevRow);
-			prevCriteriaTd.detach().prependTo(currentRow);
+			currentRow.insertBefore(prevRow);
 			
 			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();
+		 $( "body" ).on( "click", ".arrow-down", function() {
+				var currentRow = $(this).closest('tr');
+				var currentOrderId = $( "input[name^='criteriaOrderId']", currentRow);
+
+				var nextRow = currentRow.next();
+				var nextOrderId = $( "input[name^='criteriaOrderId']", nextRow);
+
+				currentOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + nextOrderId.length);
+				});		
+				nextOrderId.each(function(){
+					var val = +$(this).val();
+					$(this).val(val + currentOrderId.length);
+				});		
+				
+				//swap elements
+				currentRow.insertAfter(nextRow);
+				
+				reactivateArrows();
 		 });
 		 
 		 //deleteCriteria
-		 $( "body" ).on( "click", ".fa-times", function() {
+		 $( "body" ).on( "click", ".delete-criteria", function() {
 			var currentRow = $(this).closest('tr');
+			var rubricsTable = currentRow.closest('.rubrics-table');
+			
 			currentRow.remove();
+			if (rubricsTable.length > 0 && $('*[name^="criteriaTitle"]', rubricsTable).length == 0) {
+				rubricsTable.closest('tr').remove();
+			}
+			
 			reactivateArrows();
 		});
 	
@@ -257,12 +308,13 @@
 	     });
 	}
 	
-	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates) {
+	function addRow(orderId, style, title, maxRating, justifyOrComment, commentMinWordsLimit, minimumRates, maximumRates,
+					groupId, rubricsColumnsString, rubricsColumnHeadersString) {
 		var row = jQuery('<tr/>');
-		var inputField = '<div class="form-inline"><input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">'
-		  + '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
-		  + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
-
+		var inputField = '<input type="text" class="form-control" name="criteriaTitle' + orderId + '" value="'+title+'">';
+		var hiddenInputs = '<input type="hidden" name="ratingStyle' + orderId + '" value="' + style + '">' 
+		  				 + '<input type="hidden" name="criteriaOrderId' + orderId + '" value="' + orderId + '">';
+			 
 		if ( style == 0 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -275,9 +327,11 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleComment}" />:&nbsp;</div>'+ inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');	
+			
+			activateSpinner(orderId, true);
+			
 		} else if ( style == 1 ) {
 			var ratingLimitsStr = '';
 			if ( '${hasRatingLimits}' == 'true' ) {
@@ -290,49 +344,233 @@
 			}
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField+ratingLimitsStr
-			})); 
-	
+			    html: '<div class="voffset5"><fmt:message key="${styleStar}" />:&nbsp;</div>'+inputField + hiddenInputs + ratingLimitsStr
+			})).appendTo('#criterias-table-body');
+				
+			activateSpinner(orderId, justifyOrComment);
+			
 		} else if ( style == 2 ) { 
 			var rankingStr = '<div class="voffset5"><label for="maxRating' + orderId + '"><fmt:message key="${rankLabel}"/></label>&nbsp;'
 			  + generateSelect('maxRating' + orderId, null, null, orderId, maxRating);
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + rankingStr 
-			}));
+			    html: '<div class="voffset5"><fmt:message key="${styleRanking}" />:&nbsp;</div>'+ inputField + hiddenInputs + rankingStr 
+			})).appendTo('#criterias-table-body');
 	
 		} else if ( style == 3) {
 			row.append(jQuery('<td/>', {
 				'class': 'criteria-info',
-			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' +inputField
+			    html: '<div class="voffset5"><fmt:message key="${styleHedging}" />:&nbsp;</div>' + inputField + hiddenInputs
 				 + '<div class="voffset5"><label for="maxRating'+ orderId + '"><fmt:message key="${hedgeRankLabel}"/>&nbsp;</label>'
 			     + '<input type="text" name="maxRating' + orderId + '" id="maxRating' + orderId + '" value="'+maxRating+'" size="4">&nbsp;'
 				 + generateSpinner(orderId, justifyOrComment, '<fmt:message key="${justifyLabel}"/>', '<fmt:message key="${minNumberWordsLabel}"><fmt:param> </fmt:param></fmt:message>', commentMinWordsLimit)
-			}));
+			})).appendTo('#criterias-table-body');	
 			
-		} 
-	
-		row.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="voffset10"><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-body');	
-		
-		// cannot activate the spinners until after the fields have been created by the appendTo above.
-		if ( style == 0 ) {
-			activateSpinner(orderId, true);
-		} else if ( style == 1) {
 			activateSpinner(orderId, justifyOrComment);
-		} else if ( style == 3 ) {
-			activateSpinner(orderId, justifyOrComment);
 			$("#maxRating" + orderId).spinner({ min: 1 });
+			
+		}  else if (style == 4) {
+			if (!groupId) {
+				// get a new group ID
+				groupId = newGroupId;
+				newGroupId--;
+			}
+
+			var rubricsTable = $('.rubrics-table[groupId="' + groupId + '"]');
+
+			if (rubricsTable.length == 0 || rubricsTable.attr('groupId') != groupId) {
+				// this is the first row of a rubrics table, so need to create the table and buttons etc.
+				rubricsTable = addRubricsTable(groupId, rubricsColumnHeadersString ? JSON.parse(rubricsColumnHeadersString) : []);
+			}
+
+			// input field for rubrics is a textarea, not regular text input
+			inputField = '<textarea class="form-control" name="criteriaTitle' + orderId + '">' + title + '</textarea>';
+			// this criterion is grouped, so we need to store which group it belongs to
+			hiddenInputs += '<input type="hidden" name="groupId' + orderId + '" value="' + groupId + '">';
+
+			// each rubrics row is a separate criterion
+			row.addClass('rubrics-row').appendTo(rubricsTable);
+			$('<td />').addClass('rubrics-row-title').append(inputField + hiddenInputs).appendTo(row);
+
+			// build row structure: row header, value for each column and cell with buttons
+			var rubricsColumns = rubricsColumnsString ? JSON.parse(rubricsColumnsString) : [];
+			var rubricsColumnsLength = $('.rubrics-column', rubricsTable).length;
+			for (var i = 0; i < rubricsColumnsLength; i++) {
+				var cell = $('<td/>').appendTo(row);
+				$('<textarea />').addClass('form-control rubrics-cell')
+				.text(i < rubricsColumns.length ? rubricsColumns[i].replaceAll('<BR/>', '\r\n') : '')
+				.attr('name', 'rubrics' + orderId + 'cell' + (i + 1)).appendTo(cell)
+			}
+			row.append('<td />');
 		}
+
+		if (style != 4) {
+			// for rubrics there are just arrows to move whole group, not for each row
+			row.append(jQuery('<td/>', {
+				width: '40px',
+				html: criteriaArrows
+			}));
+		}
+
+		// it deletes either whole criterion or a rubrics row (which is also a criterion)
+		row.append($('<td/>', {
+			width: '20px',
+			html: '<i class="fa fa-times delete-criteria" title="<fmt:message key="${deleteLabel}"/>"></i>'
+		}));
 	}
-	 
+
+
+	function addRubricsTable(groupId, headers) {
+		var row = $('<tr />'),
+			// if data is present, use it, but only if it is within bounds
+			rubricsColumnsLength = headers.length > 0 && headers.length < MAX_RUBRICS_COLUMNS ? headers.length : MAX_RUBRICS_COLUMNS;
+
+		row.appendTo('#criterias-table-body');
+
+		// this cell holds whole rubrics table
+		var cell = $('<td />', {
+			'class': 'criteria-info',
+			// arrows to move whole rubrics table
+		    html: '<div class="voffset5"><fmt:message key="label.rating.style.rubrics" />:<div class="pull-right">' + criteriaArrows + '</div></div>'
+		}).attr('colspan', '3').appendTo(row);
+
+		var rubricsTable = $("<table />").addClass('table-striped table-condensed rubrics-table').attr('groupId', groupId).appendTo(cell)
+										 .on('mouseup', 'textarea', function(){
+				// there is no "resize" event for textarea, so we use mouseup to keep all boxes in the row the same height
+				var height = $(this).height();
+				$(this).closest('tr').find('textarea').height(height);
+			}),
+			addColumnButton = $('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 rubrics-add-column-button')
+										   	 .text('<fmt:message key="label.rating.rubrics.column.add" />').click(function(){
+						var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+						// no more than X columns allowed
+						if (columns.length >= MAX_RUBRICS_COLUMNS) {
+							return;
+						}
+
+						// always add to the end
+						var lastColumn = columns.last(),
+							columnOrderId = +lastColumn.attr('name').split('column')[1],
+							cell = $('<td />').insertAfter(lastColumn.parent());
+
+						// add delete button
+						$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+								  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+							deleteRubricsColumn($(this));
+						});
+
+						// add column header input
+						$('<textarea />').addClass('form-control rubrics-column')
+										 .attr('name', 'rubrics' + groupId + 'column' + (columnOrderId + 1)).appendTo(cell);
+
+						// go through each row and add a new column at the end
+						$('textarea[name$="cell' + columnOrderId + '"]', rubricsTable).each(function() {
+							var orderId = $(this).attr('name').split('cell')[0].replace('rubrics', ''),
+								cell = $('<td/>');
+							$('<textarea />').addClass('form-control rubrics-cell')
+											 .attr('name', 'rubrics' + orderId + 'cell' + (columnOrderId + 1)).appendTo(cell);
+							cell.insertAfter($(this).closest('td'));
+						});
+
+						// if delete column buttons were hidden, now show them
+						$('.rubrics-delete-column-button', rubricsTable).show();
+
+						// do not allow more than X columns
+						if (columns.length == MAX_RUBRICS_COLUMNS - 1) {
+							$('.rubrics-add-column-button', rubricsTable.parent()).hide();
+						}
+					}).appendTo(cell);
+
+		// initial hide of the button, if all columns are present
+		if (rubricsColumnsLength >=  MAX_RUBRICS_COLUMNS) {
+			addColumnButton.hide();
+		}
+		
+		$('<button />').attr('type', 'button').addClass('btn btn-default pull-right voffset20 roffset10')
+					   .text('<fmt:message key="label.rating.rubrics.row.add" />').click(function(){
+			// this will add a row to the existing rubrics table with the given group ID
+			maxOrderId++;
+			$("#criteria-max-order-id").val(maxOrderId);
+			addRow(maxOrderId, 4, '', '', false, 1, 0, 0, groupId);
+			reactivateArrows();
+		}).appendTo(cell);
+
+		// start adding content to rubrics table
+		row = $('<tr />').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<th />');
+
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.headers" />')
+				   .appendTo(row);
+		// empty cell for action buttons
+		$('<th />').attr('colspan', 2).appendTo(row);
+
+		// add column headers
+		row = $('<tr />').addClass('rubrics-columns-part').appendTo(rubricsTable);
+		// empty first cell, for row headers below
+		row.append('<td />');
+		
+		for (var i = 0; i < rubricsColumnsLength; i++) {
+			cell = $('<td />').appendTo(row);
+			$('<i />').addClass('fa fa-times rubrics-delete-column-button')
+					  .attr('title', '<fmt:message key="${deleteLabel}"/>').appendTo(cell).click(function(){
+				deleteRubricsColumn($(this));
+			});
+			
+			$('<textarea />').addClass('form-control rubrics-column').text(i < headers.length ? headers[i].replaceAll('<BR/>', '\r\n') : i + 1)
+							 .attr('name', 'rubrics' + groupId + 'column' + (i + 1)).appendTo(cell);
+		}
+		// empty cell for action buttons
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		// description of the rows part
+		row = $('<tr />').addClass('rubrics-rows-part').appendTo(rubricsTable);
+		$('<th />').addClass('rubrics-row-title').text('<fmt:message key="label.rating.rubrics.row.headers" />').appendTo(row);
+		$('<th />').attr('colspan', rubricsColumnsLength)
+				   .text('<fmt:message key="label.rating.rubrics.column.content" />')
+				   .appendTo(row);
+		$('<td />').attr('colspan', 2).appendTo(row);
+
+		return rubricsTable;
+	}
+
+	function deleteRubricsColumn(button) {
+		var rubricsTable = button.closest('.rubrics-table'),
+			// extract this column's order ID
+			columnOrderId = +button.siblings('.rubrics-column').attr('name').split('column')[1];
+
+		// delete the column header
+		button.closest('td').remove();
+
+		// shift order IDs of column headers to the right
+		$('.rubrics-column', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('column'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'column' + (orderId - 1));
+			}
+		});
+
+		// go through each row, delete column description and shift order IDs of columns to the right
+		$('.rubrics-cell[name$="cell' + columnOrderId + '"]', rubricsTable).parent('td').remove();
+		$('.rubrics-cell', rubricsTable).each(function(){
+			var name = $(this).attr('name').split('cell'),
+				orderId = +name[1];
+			if (orderId > columnOrderId) {
+				$(this).attr('name', name[0] + 'cell' + (orderId - 1));
+			}
+		});
+
+		// must not remove last column
+		var columns = $('.rubrics-columns-part .rubrics-column', rubricsTable);
+		if (columns.length == 1) {
+			$('.rubrics-delete-column-button', rubricsTable).hide();
+		}
+		$('.rubrics-add-column-button', rubricsTable.parent()).show();
+	}
+	
+
 	function reactivateArrows() {
 		$('#criterias-table-body tr').each(function() {
 	
@@ -398,11 +636,13 @@
 				<label><fmt:message key="${headerLabel}" /></label>
 			</div>
 	
-			<table class="table table-striped table-condensed" id="criterias-table">	
-			<tbody id="criterias-table-body">
-				<!--  populated by javascript -->
-			</tbody>
-			</table>
+			<div class="form-inline">
+				<table class="table table-striped table-condensed" id="criterias-table">	
+					<tbody id="criterias-table-body">
+						<!--  populated by javascript -->
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="form-group voffset20">
@@ -411,6 +651,9 @@
 				<option value="2"><fmt:message key="${styleRanking}" /></option>
 				<option value="3"><fmt:message key="${styleHedging}" /></option>
 				<option value="0"><fmt:message key="${styleComment}" /></option>
+				<c:if test="${formContentPrefix eq 'peerreview.'}">
+					<option value="4"><fmt:message key="label.rating.style.rubrics" /></option>
+				</c:if>
 			</select>
 
 			<a href="#nogo" class="btn btn-default btn-sm loffset10" id="add-criteria">
Index: lams_www/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r7cd41f62fc974d82360050ee15b1bfc6a3211146 -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_www/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 7cd41f62fc974d82360050ee15b1bfc6a3211146)
+++ lams_www/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -26,7 +26,7 @@
 	<%-- Combined tab and navigation bar used in authoring and monitoring --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
-		<div class="container-fluid" id="content">
+		<div class="container-fluid" id="content" style="max-width: 1400px">
 			<jsp:doBody />
 		</div>
 		</div>
Index: lams_www/web/WEB-INF/tags/StyledRating.tag
===================================================================
diff -u -rc76093f9d9aef9619dee82be9f75c94290385a1e -r460e398977916c01e750f3bf6752d4cd835998e8
--- lams_www/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision c76093f9d9aef9619dee82be9f75c94290385a1e)
+++ lams_www/web/WEB-INF/tags/StyledRating.tag	(.../StyledRating.tag)	(revision 460e398977916c01e750f3bf6752d4cd835998e8)
@@ -199,5 +199,187 @@
 	</c:if>
 </c:when> 
 
+<c:when test="${criteriaRatings.ratingCriteria.ratingStyle == 4}">
 
+	<%-- Some styles for the table and results --%>
+	<style>	
+		.rubrics-user-panel .collapsable-icon-left a {
+			text-decoration: none;
+		}
+		
+		.rubrics-user-panel .collapsable-icon-left a:after {
+			margin-top: 6px;
+		}
+		
+		.rubrics-table tr:first-child {
+			background-color: initial !important;
+		}
+		
+		.rubrics-table th {
+			font-style: normal;
+			font-weight: bold;
+		}
+		
+		.rubrics-table .rubrics-rating-cell {
+			border-top: none;
+			
+		}
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count {
+			text-align: right;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-count > .badge {
+			color: gray;
+			background-color: white;
+			font-size: large;
+		}
+		
+		.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
+			margin-top: 10px;
+		}
+		
+		.rubrics-table .rubrics-description-cell {
+			border-bottom: none;
+		}
+	</style>
+	
+	<c:choose>
+		<c:when test="${currentUserDisplay}">
+			
+			<table class="table table-bordered rubrics-table">
+				<tr>
+					<%-- Each answer column has the same length, all remaining space is taken by the question column --%>
+					<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+					<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+						<th class="col-xs-2">
+							<c:out value="${columnHeader}" escapeXml="false"/>
+						</th>
+					</c:forEach>
+				</tr>
+				<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+					<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+					
+					<tr>
+						<td rowspan="2">
+							<c:out value="${criteria.title}" escapeXml="false" />
+						</td>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							
+							<%-- Check if any other learner rated this learner for this column --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-description-cell
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+								<c:out value="${column.name}" escapeXml="false" />
+							</td>
+						</c:forEach>
+					</tr>
+					<tr>
+						<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+							<%-- Calculate again because we need the same cell background colour --%>
+							<c:set var="rateCount" value="0" />
+							<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+								<c:set var="rateCount" value="${rateCount + (ratingDto.userRating eq columnOrderId.count? 1 : 0)}" />
+							</c:forEach>
+							
+							<td class="rubrics-rating-cell
+								<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+								<c:if test="${rateCount > 0}">
+									bg-success
+								</c:if>
+								"
+							>
+							
+								<c:if test="${rateCount > 0}">
+									<%-- learners see just how many rates they got from other learners --%>
+									<div class="rubrics-rating-count">
+										<span class="badge">x&nbsp;${rateCount}</span>
+									</div>
+									
+									<%-- teachers see also who gave the rating --%>
+									<c:if test="${showJustification}">
+										<c:forEach var="ratingDto" items="${criteriaDto.ratingDtos}">
+											<c:if test="${ratingDto.userRating eq columnOrderId.count}">
+												<div class="rubrics-rating-learner">
+													<lams:Portrait userId="${ratingDto.itemDescription2}" hover="false" />
+													&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+												</div>
+											</c:if>
+										</c:forEach>
+									</c:if>
+								</c:if>
+							</td>
+						</c:forEach>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:otherwise>
+		
+			<c:set var="criteriaGroupId" value="${criteriaRatings.ratingCriteria.ratingCriteriaGroupId}" />
+			
+			<div id="rubrics-user-panels-${criteriaGroupId}" class="panel-group" role="tablist" aria-multiselectable="true">
+			<%-- It is sufficient to take user names and columns from the first row/criterion --%>
+			<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
+		
+				<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
+					
+					<div class="panel panel-default rubrics-user-panel">
+				       <div class="panel-heading" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+				       	<span class="panel-title collapsable-icon-left">
+				       		<a class="collapsed" role="button" data-toggle="collapse" href="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" 
+									aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+									data-parent="#rubrics-users-panels-${criteriaGroupId}">
+								<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+								&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="true"/>
+							</a>
+						</span>
+				       </div>
+			       
+			       <div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="panel-collapse collapse" 
+			       	    role="tabpanel" aria-labelledby="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+							<table class="table table-bordered rubrics-table">
+								<tr>
+									<%-- Each answer column has the same length, all remaining space is take by the question column --%>
+									<th class="col-xs-${12 - fn:length(criteriaRatings.ratingCriteria.rubricsColumnHeaders) * 2}"></th>
+									<c:forEach var="columnHeader" items="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}">
+										<th class="col-xs-2">
+											<c:out value="${columnHeader}" escapeXml="false"/>
+										</th>
+									</c:forEach>
+								</tr>
+								<c:forEach var="criteriaDto" items="${criteriaRatings.criteriaGroup}">
+									<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
+									<tr>
+										<td>
+											<c:out value="${criteria.title}" escapeXml="false" />
+										</td>
+										<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
+											<td
+												<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
+												<c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating eq columnOrderId.count}">
+													class="bg-success"
+												</c:if>
+											>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</td>
+										</c:forEach>
+										</tr>
+								</c:forEach>
+							</table>
+						</div>
+					</div>
+				</c:forEach>
+			</div>
+		</c:otherwise>
+	</c:choose>
+</c:when>
 </c:choose>
\ No newline at end of file