ミニクイズ(JSF)

ミニクイズ(JSF) †

JavaServer? Facesで簡単なクイズを作成する。

まず、ManagedBean?を作成する。
ユーザーが入力した回答を保持するための変数answerとそのgetter/setterを作成する。

import javax.inject.Named;
import javax.enterprise.context.RequestScoped;
@Named(value = "miniQuiz")
@RequestScoped
public class MiniQuiz {
     private int answer;
     // getter/setter省略
}

続いて、クイズの画面をFaceletsで作成する。

#ref(): File not found: "mq1.gif" at page "ミニクイズ(JSF)"

h:selectOneRadio?タグを使用して1つの項目だけ選択可能なラジオボタンを表示させる。
ラジオボタンの値をManagedBean?のanswerに対応させる。
また、layoutにpageDirectionを指定し選択肢を縦に並べている。

f:selectItemタグを使ってラジオボタンの選択肢を作成する。
itemValueに内部で使用する値（ここでは1,2,3,4の整数）、itemLabelに画面に表示する文字列を指定する。

f:ajaxタグではeventにchangeを指定して、ラジオボタンが変更されたときにフォームの内容を送信し、クイズの成果不正解を切り替えるようにする。

h:outputTextタグを使用して、回答（answer）が未入力（0）の場合は何も表示せず、
正解の場合（今回は4）は正解のメッセージを、不正解の場合は不正解のメッセージを表示するようにする。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>ミニクイズ</title>
    </h:head>
    <h:body>
        <h:form>
            問題：伊予鉄道の駅は？<br/>
            <h:selectOneRadio value="#{miniQuiz.answer}" layout="pageDirection">
                <f:selectItem itemValue="1" itemLabel="(a) 市駅"/>
                <f:selectItem itemValue="2" itemLabel="(b) 松山駅"/>
                <f:selectItem itemValue="3" itemLabel="(c) いよてつ松山駅"/>
                <f:selectItem itemValue="4" itemLabel="(d) 松山市駅"/>
                <f:ajax event="change" execute="@form" render="ans"/>
            </h:selectOneRadio>
            <h:outputText id="ans" value="#{miniQuiz.answer eq 0 ? '':
                                            miniQuiz.answer eq 4 ? '正解！' :
                                            '不正解！'}"/>
        </h:form>
    </h:body>
</html>

クイズ1つ1つにこのようなページを作成するのは大変なので、クイズの内容をデータベース等から取得するようにしたい。

（注意）
Internet Explorer 8では動作しない。

↑

ミニクイズ(JSF)

Menu

Link

Executive

最新の15件

ミニクイズ(JSF) †

コメント †