问题描述
我正在尝试构建一个小型QCM应用程序：
您的测验有多个问题，因此有多个潜在答案。用户只能在所有答案之间选择一个答案（使用单选按钮）。
用户提交表单，但是现在我正尝试检索用户在服务器上选择的答案，但是由于这些字段是动态的，因此我不知道该怎么做。
<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个传递给控制器的模型属性。 第一个将包含所有测验详细信息，第二个将是您在表单中收集的答案。 模型属性是对象，当然您可以调整实体。
@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检索测验的结果。
在域的类下面（为简洁起见，省略了getters / setters / constructor）：
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};
}
然后使用百里香叶为html页面编写代码。 th：object表示链接到表单的对象。然后，您可以直接绑定数据。
要访问带有百里香的属性的值，您只需指出其名称。
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>