ミニクイズ(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で作成する。
事前に、初期画面、グー、チョキ、パー、グッチョッパー（任意）用の同一サイズの画像を作成し、プロジェクト名/プロジェクト名-war/webに格納しておく。

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

h:graphicImageは画像を表示するためのタグである。
実際の画像に合わせて画像の幅（width）、高さ（height）、場所（value）を指定する。
ただし、画像の場所をじゃんけんの結果（result）で変えるようにする。eqは==の意味である。
janken()メソッドを呼び出してじゃんけんをするグー、チョキ、パーのボタンとreset()メソッドを呼び出して初期状態にする戻るボタンを作成する。
各ボタンに対しf:ajaxタグを使用して、ボタンが押されたときに画像のみを書き換えるようにする。

<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>


（注意）
乱数の質が悪いため、同じ結果が連続で出やすい。

↑

コメント †


トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS