Enhancing the Trivia Quiz I — 15 points

For this assignment you will modify the previous assignment as follows.

• Simplify web application maintenance by reducing the JSF page count.

• Use a menu for the initial selection of the quiz category.

• Use radio buttons for the user's response to a trivia question.

• Add styling with a cascading style sheet (CSS).

Screenshots are provided to give you an idea what the resulting application should look like.

These changes can be made in any order. However, you will not benefit from the maintenance simplification resulting from page count reduction unless you do that before adding radio buttons and styling.

To get a menu into a JSF page use a <h:selectOneListbox> tag with a nested <f:selectItems> tag as shown below.

<h:selectOneListbox value="value-expression">
  <f:selectItems value="array-or-list-value-expression"/>
</h:selectOneListbox>

The value-expression should refer to a writable bean property. It will get the user's menu selections when a command button is clicked.

The array-or-list-value-expression should refer to a readable bean property. It should have an array or java.util.List value. The toString() method is invoked for each entry to produce the menu item labels.

A styleClass attribute can be added to the h:selectOneListbox for styling purposes.

To get a set of radio buttons into a JSF page use a <h:selectOneRadio> tag with a nested <f:selectItems> tag as shown below.

<h:selectOneRadio value="value-expression">
  <f:selectItems value="array-or-list-value-expression"/>
</h:selectOneListbox>

By default the radio buttons are laid out in a horizontal flow. To get a vertical layout add a layout="pageDirection" attribute to the h:selectOneRadio tag. Other than that, use of the h:selectOneRadio tag is the same as the h:selectOneListbox tag.

When you have completed the assignment submit it as directed by your TA.