Index: lams_admin/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_admin/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_admin/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_admin/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_admin/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_admin/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_gradebook/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_gradebook/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_gradebook/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_gradebook/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_gradebook/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_gradebook/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_learning/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_learning/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_learning/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_learning/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r2ea655d762396446cc46603cb1120c6439a18b63 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_learning/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 2ea655d762396446cc46603cb1120c6439a18b63)
+++ lams_learning/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
Index: lams_monitoring/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_monitoring/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_monitoring/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_monitoring/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_monitoring/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_monitoring/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_assessment/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_assessment/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_assessment/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_assessment/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_assessment/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_assessment/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_chat/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_chat/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_chat/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_chat/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_chat/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_chat/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_daco/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_daco/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_daco/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_daco/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_daco/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_daco/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_doku/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_doku/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_doku/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_doku/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_doku/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_doku/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_forum/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_forum/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_forum/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_forum/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_forum/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_forum/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_gmap/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_gmap/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_gmap/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_gmap/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_gmap/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_gmap/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_images/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_images/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_images/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_images/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_images/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_images/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_imscc/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_imscc/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_imscc/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_imscc/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_imscc/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_imscc/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_lamc/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_lamc/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_lamc/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_lamc/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_lamc/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_lamc/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_laqa/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -r2f6e8f9ecfee5b8078479721374d0cbeee3d699d -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_laqa/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision 2f6e8f9ecfee5b8078479721374d0cbeee3d699d)
+++ lams_tool_laqa/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_laqa/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_laqa/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_laqa/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_larsrc/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_larsrc/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_larsrc/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_larsrc/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_larsrc/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_larsrc/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_leader/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_leader/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_leader/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_leader/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_leader/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_leader/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_mindmap/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_mindmap/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_mindmap/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_mindmap/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_mindmap/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_mindmap/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_nb/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_nb/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_nb/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_nb/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_nb/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_nb/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_notebook/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_notebook/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_notebook/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_notebook/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_notebook/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_notebook/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_pixlr/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_pixlr/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_pixlr/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_pixlr/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_pixlr/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_pixlr/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_preview/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_preview/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_preview/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_preview/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_preview/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_preview/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_sbmt/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -reb89290d3882c2f77a92373fb37c53a38f8efef9 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_sbmt/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision eb89290d3882c2f77a92373fb37c53a38f8efef9)
+++ lams_tool_sbmt/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_sbmt/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_sbmt/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_sbmt/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_scratchie/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_scratchie/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_scratchie/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_scratchie/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_scratchie/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_scratchie/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_scribe/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_scribe/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_scribe/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_scribe/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_scribe/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_scribe/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_spreadsheet/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_spreadsheet/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_spreadsheet/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_spreadsheet/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_survey/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_survey/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_survey/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_survey/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_survey/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_survey/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_task/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_task/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_task/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_task/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_task/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_task/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_vote/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_vote/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_vote/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_vote/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_vote/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_vote/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_whiteboard/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_whiteboard/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_whiteboard/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_whiteboard/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_whiteboard/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_whiteboard/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_wiki/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_wiki/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_wiki/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_wiki/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_wiki/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_wiki/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_tool_zoom/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_zoom/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_tool_zoom/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_tool_zoom/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_tool_zoom/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_tool_zoom/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"
Index: lams_www/web/WEB-INF/tags/Errors5.tag
===================================================================
diff -u -rcbbd6b6609762dd96c707ca1139ccc6914d3bf4e -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_www/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cbbd6b6609762dd96c707ca1139ccc6914d3bf4e)
+++ lams_www/web/WEB-INF/tags/Errors5.tag	(.../Errors5.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -13,35 +13,41 @@
 <c:when test="${empty path}">
    	<c:set var="apath" value="GLOBAL" />
 	<c:if test="${not empty errorMap and not empty errorMap[apath]}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap[apath]}"> 
-       	<c:out value="${error}" /><br /> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap[apath]}"> 
+	       		<c:out value="${error}" /><br /> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show All Messages --%>
 <c:when test="${path eq '*'}">
 	<c:if test="${not empty errorMap}"> 
-   	<lams:Alert5 id="error" type="danger" close="false"> 
-       <c:forEach var="error" items="${errorMap}"> 
-       <c:forEach var="erorString" items="${error.value}"> 
-       	<c:out value="${erorString}" /><br /> 
-       </c:forEach> 
-       </c:forEach> 
-	</lams:Alert5> 
+		<lams:Alert5 id="error" type="danger" close="false"> 
+	    	<c:forEach var="error" items="${errorMap}"> 
+		    	<c:forEach var="erorString" items="${error.value}"> 
+		      		<c:out value="${erorString}" /><br /> 
+		    	</c:forEach> 
+	    	</c:forEach> 
+		</lams:Alert5> 
 	</c:if>
 </c:when>
 
 <%-- Show messages for a particular key --%>
 <c:otherwise>
 	<c:if test="${not empty errorMap and not empty errorMap[path]}">
-		<span class="text-danger">
-		<c:forEach var="error" items="${errorMap[path]}"> 
-	       	<c:out value="${error}" /><br /> 
-        </c:forEach> 
-        </span>
+		<script type="text/javascript">
+			//add .is-invalid to the input caused an error (required by Boostrap Validation)
+			if (document.getElementsByName("${path}")[0]) {
+				document.getElementsByName("${path}")[0].classList.add("is-invalid");
+			}
+		</script>
+		<label class="is-invalid" for="${path}">
+			<c:forEach var="error" items="${errorMap[path]}"> 
+		       	<c:out value="${error}" /><br />
+	        </c:forEach> 
+        </label>
     </c:if>
 </c:otherwise>
 
Index: lams_www/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -ra998094a90b98b008a1956e057b41e655b363896 -rcc416a3977240bef2ac3f2243d6eb43d7a81306c
--- lams_www/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision a998094a90b98b008a1956e057b41e655b363896)
+++ lams_www/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision cc416a3977240bef2ac3f2243d6eb43d7a81306c)
@@ -49,11 +49,11 @@
         <script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
         <script src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
-        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
-        <lams:JSImport src="includes/javascript/websocket.js" />
-        <lams:JSImport src="includes/javascript/dialog5.js" />
-        <lams:JSImport src="includes/javascript/common.js" />
         <c:if test="${showHeader}">
+	        <lams:JSImport src="learning/includes/javascript/gate-check5.js" />
+	        <lams:JSImport src="includes/javascript/websocket.js" />
+	        <lams:JSImport src="includes/javascript/dialog5.js" />
+	        <lams:JSImport src="includes/javascript/common.js" />
         	<lams:JSImport src="learning/includes/javascript/learnerPage.js" />
 	        <script>
 	            const LAMS_URL = '<lams:LAMSURL/>',
@@ -121,7 +121,7 @@
 			</c:if>
 	
 			<div class="component-page-content">
-	            <a href="#component-main-content" class="visually-hidden-focusable p-2">
+	            <a href="#component-main-content" class="visually-hidden-focusable btn btn-sm btn-light p-2">
 	            	<fmt:message key='label.skip.to.main.content'/>
 	            </a>
 	
@@ -155,7 +155,7 @@
 		                            <div class="col-6 text-start p-0">
 		                                <fmt:message key='label.progress'/>
 		                            </div>
-		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value"></div>
+		                            <div class="col-6 text-end p-0" id="progress-bar-widget-value">%</div>
 		                        </div>
 		                        <div class="progress mt-1 mb-2">
 		                        	<div class="progress-bar bg-success" role="progressbar"