Следующая кнопка не увеличивает переменную JSP

Question

В настоящее время я создаю онлайн-викторину в JSP, в которой используются ответы и вопросы, хранящиеся в базах данных. Каждый вопрос и его возможные ответы связаны с целым числом от 1 до 20, что составляет 20 вопросов. Чтобы получить доступ к этим вопросам, я создал хранимые процедуры с параметром IN, называемым QID.

Мой вопрос состоит в том, как создать кнопку «Далее», которая увеличивает значение QID и отправляет пользователя на следующий вопрос? Я слышал об использовании AJAX, но не уверен, как его использовать. Например, пользователь отвечает на вопрос 1, затем нажимает кнопку «Далее», QID увеличивается до 2, затем отображается вопрос 2. и т. Д.

Вот мой код (я знаю, что не должен использовать скриптлеты в JSP; это будет решено после разработки проекта):

<% 
Connection conn = null;
ResultSet rs = null;
Statement st = null;

String action;
Scanner input = new Scanner(System.in);
int score = 0;
int QID;

try {

Class.forName("org.mariadb.jdbc.Driver");
    System.out.println("Connecting to a selected database...");
    conn = DriverManager.getConnection(
            "jdbc:mariadb://ebs-db.eastbarnetschool.com/Kishen", "Kishen","doctor9");
    System.out.println("Connection made");

    CallableStatement stmt = conn.prepareCall("{call GetQuestionTitle(?, ?)}");
        stmt.setInt(1, QID); 
        stmt.registerOutParameter(2, Types.VARCHAR);
        stmt.execute();
        String description = stmt.getString(2);
        System.out.println(description);
%>
<% 

    CallableStatement answer1 = conn.prepareCall("{call GetAnswer1(?, ?)}");
        answer1.setInt(1, QID); 
        answer1.registerOutParameter(2, Types.VARCHAR);
        answer1.execute();
        String answerOne = answer1.getString(2);
        System.out.println(answerOne);

    CallableStatement answer2 = conn.prepareCall("{call GetAnswer2(?, ?)}");
        answer2.setInt(1, QID); 
        answer2.registerOutParameter(2, Types.VARCHAR);
        answer2.execute();
        String answerTwo = answer2.getString(2);
        System.out.println(answerTwo);

    CallableStatement answer3 = conn.prepareCall("{call GetAnswer3(?, ?)}");
        answer3.setInt(1, QID); 
        answer3.registerOutParameter(2, Types.VARCHAR);
        answer3.execute();
        String answerThree = answer3.getString(2);
        System.out.println(answerThree);

    CallableStatement answer4 = conn.prepareCall("{call GetAnswer4(?, ?)}");
        answer4.setInt(1, QID); 
        answer4.registerOutParameter(2, Types.VARCHAR);
        answer4.execute();
        String answerFour = answer4.getString(2);
        System.out.println(answerFour);

%>
<%

String chosenAnswer=" ";
if(request.getParameter("button")!=null)
{
chosenAnswer=request.getParameter("button").toString();
}

CallableStatement stmt2 = conn.prepareCall("{call GetCorrectAnswer(?, ?)}");
    stmt2.setInt(1, QID); 
    stmt2.registerOutParameter(2, Types.VARCHAR);
    stmt2.execute();
    String CorrectDescription = stmt2.getString(2);
    System.out.println("\nCorrect Answer: " + CorrectDescription);

    if(request.getParameterValues("button") != null) {
       if(chosenAnswer.equals(CorrectDescription)) {
           score ++;
           %>
       <h4 align="center"><font color="green" face="arial">You got Question <%=QID%> correct!</font></h4>
       <%

        }   
            else{
                 %>
                 <h4 align="center"><font color="red" face="arial">You got Question <%=QID%> incorrect!</font></h4>
    <%  
    }   
    }   
%> 
<br>
<br>
<center>
<table border="1" width="500px" bgcolor="lightblue" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">

<form name="Quiz" method="get" action='Quiz.jsp'>

<h1 align="center"><font color="white" face="arial">Quiz</font></h1>
<table border="0" width="500px" cellspacing="2" cellpadding="6">
<tr>
<td width="50%"><font color="steelblue" face="arial" size=4><span style="font-weight:normal"> QUESTION <%=QID%></span></font></td>
<tr>
<td width="100%"><font color="black" face="arial" size=4><span style="font-weight:normal"><%=description%></span></font></td></tr>
<tr>
<td>        
1: <input type="radio" name="button" value= "<%=answerOne%>" /><font face="arial" size=3><%=answerOne%></font></td>
    <tr>
    <td>
2: <input type="radio" name="button" value="<%=answerTwo%>" /><font face="arial" size=3><%=answerTwo%></font></td>
    <tr>
    <td>
3: <input type="radio" name="button" value="<%=answerThree%>" /><font face="arial" size=3><%=answerThree%></font></td>
    <tr>
    <td>
4: <input type="radio" name="button" value="<%=answerFour%>" /><font face="arial" size=3><%=answerFour%></font></td>
<tr><td><center>


<%
int pageStart = 1;
String start = request.getParameter("start");
if(start != null)pageStart = Integer.parseInt(start);

%>

<input type="submit" value="Next" name="next" ONCLICK = <%=QID=QID+1%>

<%
if (request.getParameter("next") != null){
    QID ++;
}
%>

</center></td></tr> 
</table>
</form>

</td>
</tr>
</table>
</center>

Answer 1

AJAX для асинхронного подхода, то есть вы остаетесь на той же странице

К go к следующему вопросу, вам лучше отправить пользователя на страницу вопроса

<input name="qid" type="HIDDEN" value="<%=QID+1%>">