Question

我有一个表格，就像测验/问卷类型设计一样。

所以说该页面是一个测验，它会在页面上显示动态数量的问题，每个问题都会有一个复选框选项列表（用户可以选择1+复选框）。

我如何在游戏中代表这种形式？

case class Quiz(id: Int, name: String)
case case Question(id: Int, quizId: Int, title: String)
case class QuestionOption(id: Int, questionId: Int, name:String)

所以你有一个测验，有很多问题。每个问题都有多个QuestionOptions。

所以形式如下：

case class QuizForm(quiz: Quiz, questions: List[Question], options: List[QuestionOption])

对于每个问题，您可以选择1个或多个QuestionOption。

Answer 1

我会将Question嵌套在Quiz内，将QuestionOption嵌套在Question内。这可能会使这一点变得更加紧凑。

case class Quiz(id: Int, name: String, questions: List[Question])
case class Question(id: Int, quizId: Int, title: String, options: List[QuestionOption])
case class QuestionOption(id: Int, questionId: Int, name: String)

Form的可能实施将使用list的{{1}}：

mapping

非常详细的部分是HTML表单，需要包含所有这些字段。以下是表单发送的数据样本（一个问题，多个答案）。

val quizForm: Form[Quiz] = Form {
    mapping(
        "id" -> number,
        "name" -> nonEmptyText,
        "questions" -> list(mapping(
            "id" -> number,
            "quizId" -> number,
            "title" -> nonEmptyText,
            "options" -> list(mapping(
                "id" -> number,
                "questionId" -> number,
                "name" -> nonEmptyText
            )(QuestionOption.apply)(QuestionOption.unapply))
        )(Question.apply)(Question.unapply))
    )(Quiz.apply)(Quiz.unapply)
}

每个问题元数据/答案的val data = Map( "id" -> "1", "name" -> "My Quiz", "questions[0].id" -> "1", "questions[0].quizId" -> "1", "questions[0].title" -> "What?", "questions[0].options[0].id" -> "1", "questions[0].options[0].questionId" -> "1", "questions[0].options[0].name" -> "red", "questions[0].options[1].id" -> "2", "questions[0].options[1].questionId" -> "1", "questions[0].options[1].name" -> "green", "questions[0].options[2].id" -> "4", "questions[0].options[2].questionId" -> "1", "questions[0].options[2].name" -> "blue" )字段都需要具有将它们绑定在一起的唯一索引。这是一个粗略的例子：

name

我们可以通过删除一些标题/名称字段并在<input type="hidden" name="id" value="1"> <input type="hidden" name="name" value="My Quiz"> <input type="hidden" name="questions[0].id" value="1"> <input type="hidden" name="questions[0].quizId" value="1"> <input type="hidden" name="questions[0].title" value="What?"> <input type="hidden" name="questions[0].options[0].id" value="1"> <input type="hidden" name="questions[0].options[0].questionId" value="1"> <input type="checkbox" name="questions[0].options[0].name" value="red"> <input type="hidden" name="questions[0].options[1].id" value="2"> <input type="hidden" name="questions[0].options[1].questionId" value="1"> <input type="checkbox" name="questions[0].options[1].name" value="green"> <input type="hidden" name="questions[0].options[2].id" value="3"> <input type="hidden" name="questions[0].options[2].questionId" value="1"> <input type="checkbox" name="questions[0].options[2].name" value="blue"> <input type="hidden" name="questions[0].options[3].id" value="4"> <input type="hidden" name="questions[0].options[3].questionId" value="1"> <input type="checkbox" name="questions[0].options[3].name" value="orange">中忽略它们来缩小它们，因为它们对于持久性并不重要。但这很快就变得相当冗长。

在这一点上，我通常放弃Form并使用纯javascript，因为JSON处理起来要简单得多（在我看来，读取）。

如何用Play表单表示动态表单？

1 个答案: