小さなQCMアプリケーションを作成しようとしています：
あなたは複数の質問、したがって複数の潜在的な答えを持つクイズを持っています。ユーザーは、すべての中から1つだけ回答を選択できます（ラジオボタンを使用）。
ユーザーはフォームを送信しますが、ユーザーがサーバーで選択した回答を取得しようとしていますが、これらのフィールドは動的であるため、何をすべきかについてはあまりわかりません。
<form method="post" th:action="@{/score}" class="qcm-questions">
<input type="hidden" name="id_quiz" th:value="${id_quiz}" />
<input type="hidden" name="pseudo" th:value="${pseudo}" />
<fieldset class="qcm-questions-item" th:each="question: ${questions}">
<h2 th:text="${question.getLabel()}"></h2>
<small th:text="'Question ' + ${questionStat.index}"></small>
<div th:each="answer: ${question.getAnswers()}">
<label th:text="${answer.getLabel()}" th:for="${answer.getId_answer()}"></label>
<input type="radio" th:id="${answer.getId_answer()}" th:name="${question.getId_question()}" th:value="${answer.getId_answer()}" />
</div>
</fieldset>
<button>Soumettre QCM</button>
</form>
私が見つけた唯一の方法はこれです：
@PostMapping
public String registerScore(@RequestParam("id_quiz") final long id_quiz, @RequestParam("pseudo") final String pseudo, ServletRequest request) {
Map<String, String[]> answers = request.getParameterMap();
answers.remove("id_quiz");
answers.remove("pseudo");
return "page";
}
たぶん、あなたはこれより良い考えを持っていますか？
パラメーターまたはモデル属性を介してフォームから入力を取得できます。私は個人的にモデル属性ソリューションを簡単に見つけました、そして以下はそうするためのコードです。
コントローラーに渡す2つのモデル属性を作成しました。1つ目はすべてのクイズの詳細を含み、2つ目はフォームで収集された解答になります。モデル属性はオブジェクトであり、もちろんエンティティを適応させることができます。
@Controller
public class FormQuizController {
@GetMapping ("/quiz")
public String main(Model model) {
Question quest1 = new Question();
quest1.setId(1);
quest1.setLabel("What is the answer?");
Answer answer1 = new Answer (1, "answer 1");
Answer answer2 = new Answer (2, "answer 2");
Answer answer3 = new Answer (3, "answer 3");
Answer[] answers = {answer1, answer2, answer3};
quest1.setAnswers(answers);
Question quest2 = new Question();
quest2.setId(2);
quest2.setLabel("What is the answer again?");
quest2.setAnswers(answers);
Question[] questions = {quest1, quest2};
Quiz quiz = new Quiz();
quiz.setId_quiz(1);
quiz.setPseudo("Quiz 1");
quiz.setQuestions(questions);
ResultQuiz resultQuiz = new ResultQuiz(0,"init", new int[questions.length],new int[questions.length]);
model.addAttribute("quiz", quiz);
model.addAttribute("resultQuiz", resultQuiz);
return "quiz";
}
@PostMapping ("/score")
public String score(@ModelAttribute ResultQuiz resultQuiz) {
System.out.println(resultQuiz);
return "score";
}
}
メインの方法は、各質問に対して2つの質問と3つの回答を持つクイズを作成することです。また、偽のデータで初期化されたresultQuizを作成しています。メソッドスコアは、オブジェクトResultQuizを介してクイズの結果を取得しています。
ドメインのクラスの下（簡潔にするためにゲッター/セッター/コンストラクターは省略）：
public class Quiz {
private int id_quiz;
private String pseudo;
private Question[] questions;
}
public class Question {
private int id;
private String label;
private Answer[] answers;
}
public class Answer {
private int id;
private String text;
}
public class ResultQuiz {
private int id_quiz;
private String pseudo;
private int[] id_question = {0,0};
private int[] id_answer = {0,0};
}
次に、thymeleafを使用したHTMLページのコード。th：objectは、フォームにリンクされているオブジェクトを示します。その後、データを直接バインドできます。
thymeleafで属性の値にアクセスするには、属性の名前を指定するだけです。
iter変数は、各反復のインデックスを提供します。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>test form</title>
</head>
<body>
<form method="post" th:action="@{/score}" th:object="${resultQuiz}" class="qcm-questions">
<input type="hidden" th:name="'id_quiz'" th:value="${quiz.id_quiz}" >
<input type="hidden" th:name="'pseudo'" th:value="${quiz.pseudo}" >
<p th:text="'Valeur de resultQuiz:'+${resultQuiz}"></p>
<fieldset class="qcm-questions-item" th:each="question, iter: ${quiz.questions}">
<h2 th:text="${question.label}"></h2>
<small th:text="'Question ' + ${iter.index}"></small>
<input type="hidden" th:name="'id_question['+${iter.index}+']'" th:value="${question.id}" >
<div th:each="answer: ${question.answers}">
<label>
<span th:text="${answer.text}" th:for="${answer.text}"></span>
<input type="radio" th:name="'id_answer['+${iter.index}+']'" th:value="${answer.id}" />
</label>
</div>
</fieldset>
<button type="submit">Soumettre QCM</button>
</form>
</body>
</html>
そして最後に、スコアhtmlページのコード：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>test form</title>
</head>
<body>
<span th:text="'For Quiz '+${resultQuiz.id_quiz}+' with name '+${resultQuiz.pseudo}"></span>
<h2>Results are:</h2>
<p th:each="question, iter: ${resultQuiz.id_question}">
<span th:text="'For question '+${question} +' answer is '+${resultQuiz.id_answer[iter.index]}"></span>
</p>
</body>
</html>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加