Add previous and next buttons to tests.

The buttons go to the next or previous page.  If there is only one
problem per page, then the buttons are "Previous Problem" and "Next
Problem" buttons.  Otherwise they are "Previous Page" and "Next Page"
buttons.  These buttons are shown below the page/problem navigation
links and like those links are shown both at the top and bottom of the
page.  This means that these buttons are above the "Grade Test" button
at the bottom of the page, making it much clearer to students that there
are more problems than those shown on the page.

Note these buttons are not shown if all problems are on one page.

This was requested in issue #2814.

Also fix a couple of HTML validation issues that I observed.

First, the "preview answer" buttons had a `data_page_number` attribute.
The underscores are not the valid format for data attributes.  They
should be hyphens. I.e., kebab case, not snake case.  This was caused by
using the incorrect format for the data attribute argument to the
`link_to` method.  This was my fault and was done when I initially
converted to Mojolicious.

The other issue only occurs when the number of problems in the test is
not evenly divisible by the number of problems per page.  This resulted
in the wrong number of columns in the problem/page navigation links
table for the `colgroup` definition of the last column.

Author: drgrice1

templates/ContentGenerator/GatewayQuiz.html.ep

@@ -448,17 +448,18 @@
 		% end
 		% if ($numProbPerPage && $numPages > 1) {
 			% content_for 'gw-navigation-cols' => begin
-				% for (1 .. $numPages) {
+				% for my $pageNum (1 .. $numPages) {
 					<colgroup class="page">
 						% for (1 .. $numProbPerPage) {
+							% last if $_ * $pageNum > @$problem_numbers;
 							<col class="problem">
 						% }
 					</colgroup>
 				% }
 			% end
 			% for my $i (1 .. $numPages) {
 				% content_for 'gw-navigation-pages' => begin
-					<td colspan="<%= $numProbPerPage %>"
+					<td colspan="<%= $i == $numPages ? (@$problem_numbers % $numProbPerPage) : $numProbPerPage %>"
 						class="<%= $i == $pageNumber ? 'page active' : 'page' %>">
 						% if ($i == $pageNumber) {
 							<%= $i =%>
@@ -485,6 +486,24 @@
 					</tr>
 				% }
 			% end
+			% content_for 'gw-previous-next-buttons' => begin
+				<div class="submit-buttons-container mb-3">
+					% my $prevText = $numProbPerPage == 1 ? maketext('Previous Problem') : maketext('Previous Page');
+					% if ($pageNumber > 1) {
+						<%= link_to $prevText => '#',
+							class => 'btn btn-primary page-change-link', data => { page_number => $pageNumber - 1 } =%>
+					% } else {
+						<a class="btn btn-primary disabled" role="button" aria-disabled="true"><%= $prevText =%></a>
+					% }
+					% my $nextText = $numProbPerPage == 1 ? maketext('Next Problem') : maketext('Next Page');
+					% if ($pageNumber < $numPages) {
+						<%= link_to $nextText => '#',
+							class => 'btn btn-primary page-change-link', data => { page_number => $pageNumber + 1 } =%>
+					% } else {
+						<a class="btn btn-primary disabled" role="button" aria-disabled="true"><%= $nextText =%></a>
+					% }
+				</div>
+			% end
 		% } else {
 			% content_for 'gw-navigation-cols' => begin
 				<colgroup class="page"><% for (0 .. $#$pg_results) { =%><col class="problem"><% } =%></colgroup>
@@ -508,6 +527,7 @@
 					<%= content 'gw-navigation-table-rows' =%>
 				</table>
 			</div>
+			<%= content 'gw-previous-next-buttons' =%>
 		% end
 		<%= $jumpLinks->() =%>
 		%
@@ -621,7 +641,7 @@
 					<div class="text-end mb-2">
 						<%= link_to maketext('preview answers') => '#',
 							class => 'gateway-preview-btn btn btn-secondary',
-							($numProbPerPage && $numPages > 1) ? (data_page_number => $pageNumber) : () =%>
+							($numProbPerPage && $numPages > 1) ? (data => { page_number => $pageNumber }) : () =%>
 					</div>
 					%
 					% if ($resultsTable) {