Index: lams_central/src/java/org/lamsfoundation/lams/web/qb/SearchQBController.java
===================================================================
diff -u -rb5d2a6851ee4797e641081bd5e6a1f28f78c30a6 -rfffb5d73e9c9bf785cbf01613e6972065cf88bc6
--- lams_central/src/java/org/lamsfoundation/lams/web/qb/SearchQBController.java	(.../SearchQBController.java)	(revision b5d2a6851ee4797e641081bd5e6a1f28f78c30a6)
+++ lams_central/src/java/org/lamsfoundation/lams/web/qb/SearchQBController.java	(.../SearchQBController.java)	(revision fffb5d73e9c9bf785cbf01613e6972065cf88bc6)
@@ -144,6 +144,74 @@
 	return "qb/search";
     }
 
+    @RequestMapping("/start5")
+    private String start5(HttpServletRequest request) {
+	ToolAccessMode mode = WebUtil.readToolAccessModeAuthorDefaulted(request);
+	request.setAttribute(AttributeNames.ATTR_MODE, mode.toString());
+
+	// LKC-215 QB in not always initiated from within tools; tool signature is used to control question types
+	String toolSignature = WebUtil.readStrParam(request, "toolSignature", true);
+	if (StringUtils.isBlank(toolSignature)) {
+	    Long toolContentId = WebUtil.readLongParam(request, "toolContentId");
+	    ToolContent toolContent = (ToolContent) userManagementService.findById(ToolContent.class, toolContentId);
+	    if (toolContent == null) {
+		String error = "The toolContentID " + toolContentId
+			+ " is not valid. No such record exists on the database.";
+		throw new DataMissingException(error);
+	    }
+	    Tool tool = toolContent.getTool();
+	    toolSignature = tool.getToolSignature();
+	}
+
+	//empty questionTypesAvailable means no other questionTypes available for this tool
+	StringBuilder questionTypesAvailable = new StringBuilder();
+	//by default show MCQ type of questions (except for Q&A tool)
+	int questionTypeDefault = QbQuestion.TYPE_MULTIPLE_CHOICE;
+	if (CommonConstants.TOOL_SIGNATURE_SCRATCHIE.equals(toolSignature)) {
+	    questionTypesAvailable.append(QbQuestion.TYPE_MULTIPLE_CHOICE);
+	    questionTypesAvailable.append(",");
+	    questionTypesAvailable.append(QbQuestion.TYPE_VERY_SHORT_ANSWERS);
+
+	    //CommonConstants.TOOL_SIGNATURE_SURVEY
+	} else if ("lasurv11".equals(toolSignature)) {
+	    questionTypesAvailable.append(QbQuestion.TYPE_MULTIPLE_CHOICE);
+	    questionTypesAvailable.append(",");
+	    questionTypesAvailable.append(QbQuestion.TYPE_ESSAY);
+
+	} else if (CommonConstants.TOOL_SIGNATURE_ASSESSMENT.equals(toolSignature)) {
+	    questionTypesAvailable.append(QbQuestion.TYPE_MULTIPLE_CHOICE);
+	    questionTypesAvailable.append(",");
+	    questionTypesAvailable.append(QbQuestion.TYPE_MATCHING_PAIRS);
+	    questionTypesAvailable.append(",");
+	    questionTypesAvailable.append(QbQuestion.TYPE_VERY_SHORT_ANSWERS);
+	    questionTypesAvailable.append(",");
+	    questionTypesAvailable.append(QbQuestion.TYPE_NUMERICAL);
+	    questionTypesAvailable.append(",");
+	    questionTypesAvailable.append(QbQuestion.TYPE_TRUE_FALSE);
+	    questionTypesAvailable.append(",");
+	    questionTypesAvailable.append(QbQuestion.TYPE_ESSAY);
+	    questionTypesAvailable.append(",");
+	    questionTypesAvailable.append(QbQuestion.TYPE_ORDERING);
+	    questionTypesAvailable.append(",");
+	    questionTypesAvailable.append(QbQuestion.TYPE_MARK_HEDGING);
+
+	    //CommonConstants.TOOL_SIGNATURE_QA
+	} else if ("laqa11".equals(toolSignature)) {
+	    questionTypeDefault = QbQuestion.TYPE_ESSAY;
+	}
+	request.setAttribute("questionType", questionTypeDefault);
+	request.setAttribute("questionTypesAvailable", questionTypesAvailable.toString());
+	//let jsp know it's Scratchie, so we can disable VSA questions not compatible with TBL
+	request.setAttribute("isScratchie", CommonConstants.TOOL_SIGNATURE_SCRATCHIE.equals(toolSignature));
+
+	//prepare data for displaying collections
+	Integer userId = getUserId();
+	Collection<QbCollection> userCollections = qbService.getUserCollections(userId);
+	request.setAttribute("userCollections", userCollections);
+
+	return "qb/search5";
+    }
+
     /**
      * Returns an xml representation of the lesson grid for a course for gradebook
      *
@@ -229,6 +297,23 @@
 	return "qb/qbQuestionDetails";
     }
 
+    @RequestMapping("/displayQuestionDetails5")
+    private String displayQuestionDetails5(HttpServletRequest request) {
+	Long questionUid = WebUtil.readLongParam(request, "questionUid");
+	QbQuestion qbQuestion = (QbQuestion) userManagementService.findById(QbQuestion.class, questionUid);
+	request.setAttribute("question", qbQuestion);
+
+	boolean isVsaAndCompatibleWithTbl = qbQuestion.isVsaAndCompatibleWithTbl();
+	request.setAttribute("isVsaAndCompatibleWithTbl", isVsaAndCompatibleWithTbl);
+	boolean isScratchie = WebUtil.readBooleanParam(request, "isScratchie", false);
+	request.setAttribute("isScratchie", isScratchie);
+
+	List<QbQuestion> otherVersions = qbService.getQuestionsByQuestionId(qbQuestion.getQuestionId());
+	request.setAttribute("otherVersions", otherVersions);
+
+	return "qb/qbQuestionDetails5";
+    }
+
     private Integer getUserId() {
 	HttpSession ss = SessionManager.getSession();
 	UserDTO user = (UserDTO) ss.getAttribute(AttributeNames.USER);
Index: lams_central/web/qb/qbQuestionDetails5.jsp
===================================================================
diff -u
--- lams_central/web/qb/qbQuestionDetails5.jsp	(revision 0)
+++ lams_central/web/qb/qbQuestionDetails5.jsp	(revision fffb5d73e9c9bf785cbf01613e6972065cf88bc6)
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<%@ include file="/common/taglibs.jsp"%>
+
+<div class="card">
+  <input type="hidden" id="selected-question-uid" value="${question.uid}">
+  
+  <div class="card-header d-flex justify-content-end align-items-center">
+  	<c:choose>
+		<c:when test="${fn:length(otherVersions) == 1}">
+			<button class="btn" disabled="disabled">
+			    <fmt:message key="label.version"/>&nbsp;${question.version}
+			</button>
+		</c:when>
+
+		<c:otherwise>
+			<div class="dropdown">
+				<button class="btn btn-outline-dark dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+			    	Version ${question.version}&nbsp;
+				</button>
+				
+				<ul class="dropdown-menu">
+					<c:forEach items="${otherVersions}" var="otherVersion">
+			    		<li class="dropdown-item <c:if test="${question.version == otherVersion.version}"> disabled</c:if>"
+			    			onclick="javascript:loadQuestionDetailsArea(${otherVersion.uid});" href="#">
+			    			Version ${otherVersion.version}
+			    		</li>
+			    	</c:forEach>
+				</ul>
+			</div>			
+		</c:otherwise>
+	</c:choose>
+		
+	<button class="btn btn-outline-dark ml-2" type="button"
+			onClick='javascript:window.open("<lams:LAMSURL/>qb/stats/show.do?qbQuestionUid=${question.uid}", "_blank")' title='Show stats'>
+		<i class='fa fa-bar-chart'></i>&nbsp;
+		Stats
+	</button>
+	
+    <!-- hide import button in case of VSA which is not compatible with TBL -->
+	<c:choose>
+		<c:when test="${(question.type != 3) || !isScratchie || isVsaAndCompatibleWithTbl}">
+			<button id="import-button" class="btn btn-outline-dark ml-2 button-add-item" type="button"
+				title="Import question from the question bank">
+				<fmt:message key="button.import"/>
+			</button>
+		</c:when>
+		<c:otherwise>
+			<div class="alert alert-warning ml-2 mb-0" role="alert">
+				Not compatible with TBL
+			</div>
+		</c:otherwise>
+	</c:choose>
+ </div>
+ 
+ <div class="card-body">
+	<div class="card-title">
+		<c:out value="${question.name}" escapeXml="false"/>
+	</div>
+	
+	<div class="card-text question-description">				
+		<c:out value="${question.description}" escapeXml="false"/>
+	</div>
+ 		
+	<c:choose>
+		<c:when test="${question.type == 1 || question.type == 3 || question.type == 4 || question.type == 8}">
+			<table class="table table-hover table-sm">
+				<c:forEach var="option" items="${question.qbOptions}" varStatus="i">
+					<c:set var="isOptionCorrect" value="${option.correct || option.maxMark == 1}"/>
+					<tr>
+						<td width="5px" style="padding-right: 0;">
+							<c:if test="${isOptionCorrect}">
+								<i class="fa fa-check text-success"></i>
+							</c:if>
+						</td>
+
+						<td width="10px">
+							<span 
+								<c:if test="${isOptionCorrect}">class="text-success"</c:if>>
+								${i.index+1})
+							</span>
+						</td>
+							
+						<td>
+							<c:if test="${isOptionCorrect}">
+								<div class="text-success">
+							</c:if>
+							
+							<c:choose>
+								<c:when test="${question.type == 1 || question.type == 3 || question.type == 8}">
+									<c:out value="${option.name}" escapeXml="false"/>
+								</c:when>
+								<c:otherwise>
+									<c:out value="${option.numericalOption}" escapeXml="false"/>
+								</c:otherwise>
+							</c:choose>
+							
+							<c:if test="${isOptionCorrect}">
+								</div>
+							</c:if>
+						</td>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:when test="${question.type == 2}">
+			<table class="table table-hover table-sm">
+				<c:forEach var="option" items="${question.qbOptions}" varStatus="i">
+					<tr>
+						<td width="10px">
+							<span 
+								<c:if test="${option.correct}">class="text-success"</c:if>>
+								${i.index+1})
+							</span>
+						</td>	
+						<td style="width: 100px;">
+							<c:out value="${option.matchingPair}" escapeXml="false" />
+						</td>
+						
+						<td >
+							<c:out value="${option.name}" escapeXml="false" />
+						</td>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+		
+		<c:when test="${question.type == 5}">
+			<div class="voffset10">
+				Correct answer: ${question.correctAnswer}
+			</div>
+		</c:when>
+		
+		<c:when test="${question.type == 7}">
+			<table class="table table-hover table-sm">
+				<c:forEach var="option" items="${question.qbOptions}" varStatus="i">
+					<tr>
+						<td width="10px">
+							<span>
+								${i.index+1})
+							</span>
+						</td>
+							
+						<td>
+							<c:out value="${option.name}" escapeXml="false"/>
+						</td>
+					</tr>
+				</c:forEach>
+			</table>
+		</c:when>
+	</c:choose>
+ </div>
+</div>
\ No newline at end of file
Index: lams_central/web/qb/search5.jsp
===================================================================
diff -u
--- lams_central/web/qb/search5.jsp	(revision 0)
+++ lams_central/web/qb/search5.jsp	(revision fffb5d73e9c9bf785cbf01613e6972065cf88bc6)
@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<%@ include file="/common/taglibs.jsp"%>
+
+<link rel="stylesheet"href="<lams:LAMSURL/>css/free.ui.jqgrid.min5.css">
+<link rel="stylesheet" href="<lams:LAMSURL/>css/bootstrap-select.min5.css" />
+
+<style>
+	.qb-search-widget .question-description-grid {
+		min-height: 10px;
+		max-height: 12px;
+   		overflow-x: hidden;
+   		margin-top: 4px;
+	}
+	
+	.qb-search-widget .question-title-grid {
+	    overflow-x: hidden;
+	}
+		
+	.qb-search-widget .question-description {
+		font-size: smaller;
+	}
+		
+	.qb-search-widget #grid-container .ui-jqgrid.ui-jqgrid-bootstrap tr.jqgrow > td {
+		padding: 10px;
+	}
+		
+	@media (min-width: 768px){
+		.qb-search-widget #question-detail-area {
+		    padding-left: 20px !important;
+		}
+	}
+	@media (max-width: 768px){
+		.qb-search-widget #question-detail-area {
+		    margin-top: 20px !important;
+		}
+	}
+		
+	/* jqGrid header */
+	.qb-search-widget #grid-container .ui-jqgrid .ui-jqgrid-htable .ui-jqgrid-labels th div {
+	    font-size: 14px;
+   		margin: 6px;
+	}
+		
+	/* question imported growl */
+	.qb-search-widget div.growlUI h1, .qb-search-widget div.growlUI h2 {
+		color: white;
+		margin: 5px 5px 5px 0px;
+		text-align: center;
+		font-size: 18px;
+	}
+	
+	.qb-search-widget .dropdown-item {
+		cursor: pointer;
+	}
+</style>
+
+<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/free.jquery.jqgrid.min.js"></script>
+<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap-select.min5.js"></script>
+<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.blockUI.js"></script>
+<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/qb-search.js"></script>
+<script type="text/javascript">
+	<%-- Add jqGrid internationalisation snippet --%>
+	<%@ include file="/jqGrid.i18n.jsp"%>
+	
+	$.fn.selectpicker.Constructor.BootstrapVersion = '4';
+
+	$(document).ready(function(){
+			
+		$("#questions-grid").jqGrid({
+		   	multiselect: false,
+			datatype: "json",
+			url: "<c:url value="/searchQB/getPagedQuestions.do"/>",
+			postData: { 
+				questionTypes: "" + $("#types-select").val(), 
+	        },
+			height: '100%',
+			autowidth: true,
+			shrinkToFit: true,
+			viewrecords : false,
+		    pager: 'questions-grid-pager',
+		    rowList:[10,20,30,40,50,100],
+		    rowNum:10,
+		    guiStyle: "bootstrap",
+			iconSet: 'fontAwesome',
+		   	colNames:[
+			   	'questionUid',
+				'<fmt:message key="label.qb.collection.grid.title"/>',
+				'questionDescription'
+			],
+		   	colModel:[
+		   		{name:'questionUid', index:'questionUid', width:0, hidden: true},
+		   		{name:'questionName', index:'questionName', width:570, search: true, searchoptions: { clearSearch: false }, formatter:questionNameFormatter},
+		   		{name:'questionDescription', index:'questionDescription', width:0, hidden: true}
+		   	],
+			onSelectRow: function(rowid, e) {
+			    //load up question details area
+		   		var questionUid = jQuery("#questions-grid").getCell(rowid, 'questionUid');
+		   		loadQuestionDetailsArea(questionUid);
+			},
+	  	  	gridComplete: gridSearchHighlight,
+		    loadError: function(xhr,textStatus,errorThrown) {
+		    	$("#questions-grid").clearGridData();
+		    	$("#question-detail-area").hide().html("");
+
+		    	//display warning message
+		    	$(this).jqGrid("displayErrorMessage", "<fmt:message key="error.loaderror"/>");
+		    }
+		})
+		.navGrid("#questions-grid-pager", {edit:false,add:false,del:false,search:false});	
+
+        //jqgrid autowidth
+        $(window).bind('resize', function() {
+            resizeJqgrid($(".ui-jqgrid-btable:visible"));
+        });
+        
+    	function resizeJqgrid(jqgrids) {
+    		jqgrids.each(function(index) {
+    			var gridId = $(this).attr('id');
+    	    	var gridParentWidth = jQuery('#gbox_' + gridId).parent().width();
+    	    	jQuery('#' + gridId).setGridWidth(gridParentWidth, true);
+    	    });
+    	};
+
+    	//handler for "Import" button
+    	$(document).on("click", '#import-button', function() {
+    		//don't import if button is disabled 
+    		if ($(this).is('[disabled=disabled]')) {
+    			return;
+	    	}
+	    	//disabling the button
+    		$(this).attr("disabled", "disabled");
+
+			$.ajax({
+				url: "${param.returnUrl}",
+				data: {
+					qbQuestionUid: $("#selected-question-uid").val()
+				},
+				type: "POST",
+				success: function(response, status, xhr) {
+					if (response.isDuplicated) {
+						//show not successfull notification
+	                	$.growlUI('<i class="fa fa-lg fa-ban" style="color:red"></i> <fmt:message key="label.question.not.added" />');
+						
+					} else {
+						$("#itemArea").html(response);
+
+						//invoke refreshThickbox() only in case parent page has this method 
+						if (typeof refreshThickbox === "function") {
+							refreshThickbox();
+						}
+
+						//show successfull notification
+	                	$.growlUI('<i class="fa fa-lg fa-check" style="color:green"></i>&nbsp;<fmt:message key="label.question.successfully.imported" />');
+					}
+				}
+			});
+        });
+
+		//handler for "Advanced search" button
+    	$("#advanced-search-button").click(function() {
+			$(this).toggleClass("btn-secondary btn-outline-secondary");
+			$("#advanced-search").toggleClass('d-flex');
+        });
+
+		//handler for Collections select
+    	$('#collections-select').selectpicker({ 
+            iconBase: 'fa',
+            tickIcon: 'fa-check',
+            actionsBox:"true",
+            selectedTextFormat:"count>3",
+            countSelectedText : "{0} collections selected",
+            noneSelectedText : "Display all collections",
+            selectAllText:"Select all",
+            deselectAllText:"Deselect all",
+            <c:if test="${fn:length(userCollections) > 10}">liveSearch: true</c:if>
+       	});
+    	//workaround for $('#collections-select').selectpicker('selectAll'); throwing exception 
+    	$("#collections-select option").prop("selected", "selected");
+    	$('#collections-select').selectpicker('refresh');
+
+		//handler for Types select
+    	$('#types-select').selectpicker({ 
+            iconBase: 'fa',
+            tickIcon: 'fa-check',
+            actionsBox:"true",
+            selectedTextFormat:"count>2",
+            countSelectedText : "{0} question types selected",
+            noneSelectedText : "Display all question types",
+            selectAllText:"Select all",
+            deselectAllText:"Deselect all"
+       	});
+    	//workaround for $('#types-select-select').selectpicker('selectAll'); throwing exception 
+    	$("#types-select option").prop("selected", "selected");
+    	$('#types-select').selectpicker('refresh');
+	});
+
+	//load up question details area
+    function loadQuestionDetailsArea(questionUid) {
+        $("#question-detail-area").show().load(
+  	       	'<c:url value="/searchQB/displayQuestionDetails5.do"/>',
+  	       	{
+  	       		questionUid: questionUid,
+  	       		isScratchie: ${isScratchie}
+  	    	},
+  	    	function() {
+  	    	}
+  	    );
+	}
+</script>
+
+<div class="qb-search-widget container-fluid">
+	<div class="row align-items-center">
+		<div class="col-8">
+			<input type="text" id="filter-questions" class="form-control" placeholder="Contains text" 
+				onkeydown="doSearch(arguments[0]||event)" />
+		</div>
+		<div class="col-4">
+			<button href="#nogo" id="advanced-search-button" class="btn btn-outline-secondary ml-1" type="button" >  
+				<i class="fa fa-lg fa-question-circle" aria-hidden="true" title="Advanced search"></i>
+				Advanced search
+			</button>
+		</div>
+	</div>
+		
+	<div id="advanced-search" class="row align-items-center mt-3 d-none">
+		<div class="col">
+			Collections: 
+		</div>
+		<div class="col">
+			<select id="collections-select" class="selectpicker" multiple>
+				<c:forEach var="collection" items="${userCollections}">
+					<option value="${collection.uid}">
+						<c:out value="${collection.name}" />
+					</option>
+				</c:forEach>
+			</select>
+		</div>
+		
+		<c:choose>
+			<c:when test="${!empty questionTypesAvailable}">
+				<div class="col">
+					<fmt:message key="label.question.type" />
+				</div>
+				<div class="col">
+					<select id="types-select" class="form-control selectpicker" multiple>
+						<c:forTokens items="${questionTypesAvailable}" delims="," var="questionTypeIter">
+							<option value="${questionTypeIter}">
+								<c:choose>
+									<c:when test="${questionTypeIter == 1}">
+										<fmt:message key="label.question.type.multiple.choice" />
+									</c:when>
+									<c:when test="${questionTypeIter == 2}">
+										<fmt:message key="label.question.type.matching.pairs" />
+									</c:when>
+									<c:when test="${questionTypeIter == 3}">
+										<fmt:message key="label.question.type.short.answer" />
+									</c:when>
+									<c:when test="${questionTypeIter == 4}">
+										<fmt:message key="label.question.type.numerical" />
+									</c:when>
+									<c:when test="${questionTypeIter == 5}">
+										<fmt:message key="label.question.type.true.false" />
+									</c:when>
+									<c:when test="${questionTypeIter == 6}">
+										<fmt:message key="label.question.type.essay" />
+									</c:when>
+									<c:when test="${questionTypeIter == 7}">
+										<fmt:message key="label.question.type.ordering" />
+									</c:when>
+									<c:when test="${questionTypeIter == 8}">
+										<fmt:message key="label.question.type.mark.hedging" />
+									</c:when>
+								</c:choose>
+							</option>
+						</c:forTokens>
+					</select>
+				</div>
+			</c:when>
+			
+			<c:otherwise>
+				<input type="hidden" id="types-select" value="${questionType}">
+			</c:otherwise>
+		</c:choose>
+	</div>
+	
+	<div id="grid-container" class="row mt-3">
+		<div class="grid-holder col-xs-12 col-sm-5">
+			<table id="questions-grid" class="scroll"></table>
+			<div id="questions-grid-pager" class="scroll"></div>
+		</div>
+					
+		<div id="question-detail-area" class="col-xs-12 col-sm-7"></div>
+	</div>	
+</div>
\ No newline at end of file
Index: lams_tool_assessment/web/pages/authoring/questions5.jsp
===================================================================
diff -u -rc9082cb1277cf7c0199ee4edb7d02f1358d037cd -rfffb5d73e9c9bf785cbf01613e6972065cf88bc6
--- lams_tool_assessment/web/pages/authoring/questions5.jsp	(.../questions5.jsp)	(revision c9082cb1277cf7c0199ee4edb7d02f1358d037cd)
+++ lams_tool_assessment/web/pages/authoring/questions5.jsp	(.../questions5.jsp)	(revision fffb5d73e9c9bf785cbf01613e6972065cf88bc6)
@@ -21,7 +21,7 @@
 		//load question bank div
 		$('#question-bank-collapse').on('show.bs.collapse', function () {
 			$('#question-bank-collapse.contains-nothing').load(
-				"<lams:LAMSURL/>searchQB/start.do",
+				"<lams:LAMSURL/>searchQB/start5.do",
 				{
 					returnUrl: "<c:url value='/authoring/importQbQuestion.do'/>?sessionMapID=${sessionMapID}",
 					toolContentId: ${sessionMap.toolContentID}