CODEWITHSUNDEEP
htmlcssjsp
LF13
LF13

Reputation: 83

JSP + Dynamic CSS on button click

I am trying to create a jsp page that generates a list of questions. The questions are received from the database correctly and the appropriate div is created. There are 55 questions.

What i want to do is make only the first questionDiv visible and set the rest hidden. Then on the submit button click the current question [1] is hidden and the question [2] is made visible.

Nothing i try in the javascript seems to have any affect. Can someone please point me in the right direction? 

                <div id="questionContainer">
                    <%                        for (int ques = 1; ques < 56; ques++) {
                            out.println("<div id ='question" + ques + "' name='question" + ques + "'class='questionVisible'>");
                            out.println("<h2 class='page-header'>Question" + ques + "</h2>");
                            if (iterate.hasNext()) {

                                //out.println(row[0]);
                                //out.println(row[1]);                                                                                   
                                //out.println(row[0]);
                                String[] row = (String[]) iterate.next();
                                if (row[0].equals("1")) {
                                    out.println("<p id='question'>" + row[1] + "</p><br/>");
                                    out.println("<p id='ansA'><input type='radio'  name='answer" + ques + "' value='A' checked>" + row[2] + "</p>");
                                    out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='B' checked>" + row[3] + "</p>");
                                    out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='C' checked>" + row[4] + "</p>");
                                    out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='D' checked>" + row[5] + "</p>");
                                    out.println("<button class='btn' id='btnPAQues" + ques + "' type='button' name='btnPAQues" + ques + "' onclick='onSubmitBtn();'>Submit</button>");
                                } else if (row[0].equals("2")) {
                                    out.println("<p id='question'>" + row[1] + "</p><br/>");
                                    out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='A' checked>" + row[2] + "</p>");
                                    out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='B' checked>" + row[3] + "</p>");
                                    out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='C' checked>" + row[4] + "</p>");
                                    out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='D' checked>" + row[5] + "</p>");
                                    out.println("<p id='ansA'><input type='radio' name='answer" + ques + "' value='E' checked>" + row[6] + "</p>");
                                    out.println("<button class='btn' id='btnPAQues' type='submit' name='submit' onsubmit='onSubmitBtn'>Submit</button>");
                                } else if (row[0].equals("3")) {
                                    out.println("<p id='question'>" + row[1] + "</p><br/>");
                                    out.println("Answer: <p id='ansA'><input type='text' name='answer" + ques + "'</p><br/><br/>");
                                    out.println("<button class='btn' id='btnPAQues' type='submit' name='submit' onsubmit='onSubmitBtn'>Submit</button>");
                                }
                            }
                            out.println("</div>");
                        }
                    %>

                </div>


<script>

for(int x= 2; x <56; x++)
{
     document.getElementById("question"+x).style.visibility = "questionHidden;";
}

    document.getElementById("btnPAQues1").onclick = onSubmitBtn();
    function onSubmitBtn() {
        document.getElementById("question1").style.visibility = "hidden;";
    }
</script>

Upvotes: 0

Views: 925

Answers (2)

Taha
Taha

Reputation: 1242

try this idea : firstly display all the questions add a div to each question 

<div class="trigger" > <p id="question">...Submit</button> </div>

then add this JS code : 

$(".trigger:first").show();

$("button").click(function() {
    var $next = $(".trigger:visible").hide().next(".trigger");
    if (!$next.length)
        $next = $(".trigger:first");

    $next.show();
});

example : http://jsfiddle.net/huH7p/9/

Upvotes: 1

markbernard
markbernard

Reputation: 1420

Don't use Javascript to write out the questions. Place all the questions in standard HTML with a CSS class that makes them initially hidden, except question one. Then on each submit make the appropriate one visible while hiding the previous one.

Can you use web services? The common way to do this is use the JSP to set up the page, then use Javascript to call web services for each question. So when the page loads call for the first question. When the user clicks submit call for the next one. And so on.

Upvotes: 0

Related Questions