检索动态输入

我正在尝试构建一个小型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";
    }

也许你有更好的主意？

可以通过参数或模型属性从窗体检索输入。我发现个人模型属性解决方案更容易，下面是这样做的代码。
我已经创建了两个传递给控制器的modeldattributes。第一个将包含所有的测验细节，第二个将是你表格中收集的答案。modelattributes是对象，当然可以调整实体。

@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检索测验结果。
在域的类下面（为了简洁起见，省略了getter/setter/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};
}

然后使用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>

最后是score 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>

检索动态输入

1条答案

相关问题

热门标签

最新问答