Home/ Questions/Q 8345557
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T06:42:50+00:00

I’m creating a quiz website for a class, and I am having trouble formatting

  • 0

I’m creating a quiz website for a class, and I am having trouble formatting the page where the user creates questions. I would like to have additional information pertaining a specific question type pop up when the user clicks a radio button. I would then like to have even more additional information pop up if the user clicks a button created in the initial additional information.

So it’d start off looking like this

initial display

then it’d look like this

display after additional information added

then once the user clicked the Add Option button a few times, it’d look like this

display after more information added

To achieve this I am trying to use jquery to add the new content. However, I can’t seem to get that content to display. Here’s the current code

In jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript"
        src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="QuestionsCreate.js"></script>
    <meta charset="UTF-8">
    <title>Quiz Creation</title>
</head>
<body>
    <h1>Create Your Quiz</h1>

    <form action="QuestionsCreateServlet" method="post">
        <h2>Question Type</h2>

        <input type="radio" name="type" class="type" id="multipleChoice"
            value="multipleChoice" />
        <label for="multipleChoice">Multiple Choice</label><br/>

        <input type="radio" name="type" class="type" id="fillBlank"
            value="fillBlank" />
        <label for="fillBlank">Fill-in-the-Blank</label><br/>

        <input type="radio" name="type" class="type" id="pictureResponse"
            value="pictureResponse" />
        <label for="pictureRsponse">Picture Response</label><br/>

        <input type="radio" name="type" class="type" id="textResponse"
            value="textResponse" />
        <label for="textResponse">Text Response</label><hr/>

        <div class="jspf"></div>

        <input type="submit" name="button" id="button" value="Finish" />
    </form>
</body>
</html>

In javascript

$(document).ready(function() {
    $(".type").click(function(){
    $(".jspf").html("<jsp:include page='WEB-INF/" +
            $(".type").attr("value") + ".jspf' />");
    $("#button").attr("value", "Add");
    });

    var nOptions = 1;
    $("#add-option").click(function(){
    ++nOptions;
    $(".options").append("<input type='checkbox' name='option" +
            nOptions + "' value='" + nOptions + "' /> " +
            "<input name='name" + nOptions + "' /><br />");
    });

    var nBlanks = 1;
    $("#add-answer").click(function() {
    ++nBlanks;
    $(".fill-blank-answer").append("<input name='answer" + nBlanks +
            "' /><br/>");
    });
});

Sample jspf

<h3>Question</h3>
<input name="prompt" />
<h3>Options</h3>
Check the options that denote the correct answer<br/>
<div class="options">
<input type='checkbox' name='option1' value='1' />
<input name='name1' /><br />
</div>
<input type="button" value="Add Option" id="add-option" /><hr/>

I’ve also tried to move the jspf code into the javascript, but that didn’t work either.

Is there a way I can add content dynamically to my webpage based off of dynamically added content? Thanks in advanced!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The issue you’re having is you’re trying to inject server-side JSP tags into a client’s browser. Take this line for example:

    $(".jspf").html("<jsp:include page='WEB-INF/" +
        $(".type").attr("value") + ".jspf' />");

    Once that line of javascript has executed, the CLIENT’s brower now has the markup:

    <div class="jspf"><jsp:include page="wEB-INF/pictureResponse.jspf" /></div>

    Broswers don’t know what to do with <jsp:include> tags, so they just silently ignore them.

    What you need to do is map the jspf you’re trying to include to a url and use something like:

    $(".jspf").load("/fragments/pictureResponse.jspf");

    $.load sends an AJAX request to from the client browser back to the server, retrieves a bit of HTML from the server, then inserts that in to the elements that match the CSS selector “.jspf”.

    You also have an issue with your initial click handler.

    $(".type").attr("value")

    $.attr always returns the attribute value of the first matched element, so no matter what the user clicked, that line is going to evaluate to “multipleChoice”. What you probably want to do is:

    $(this).attr("value")

    In the context of a click handler, “this” is going to refer to what the user just clicked.

    UPDATE

    Here’s how I would add the “add option” click handler once the secondary content has been loaded:

    $('jspf').load('/fragments/pictureResponse.jspf', function() {
    $('#add-option').click(function() {
        nOptions++;
        $('.options').append('<input type="checkbox" name="option' + nOptions +
        '" value="' + nOptions + '" />  <input name="name' + nOptions + '" /><br />");
    });
});
    • 0