How to represent a dynamic form with Play forms? - scala

Question

I have a form which is like a quiz/questionnaire type design to it.
So say the page is a quiz, it will display a dynamic number of questions on the page, and each question will have a list of checkbox options (the user can select 1+ checkboxes).
How can I represent this type of form in play?
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)
So you have a quiz, that has many questions. And each question has multiple QuestionOptions.
So the form would be something like:
case class QuizForm(quiz: Quiz, questions: List[Question], options: List[QuestionOption])
For each question, you can select 1 or more QuestionOption.

Answer 1

I would nest the Questions within Quiz, and QuestionOptions within Question. That could make this a little more compact in the end.
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)
A possible implementation of the Form would use lists of mapping:
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)
}
The very verbose part is the HTML form, which needs to contain all of these fields. Here is a sample of data a form would send (one question, multiple answers).
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"
)
The name fields of each of the question meta data / answers will need to have unique indices that bind them together. Here's a crude example:
<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">
We can probably make this smaller by removing some of the title/name fields and ignoring them in the Form, since they shouldn't matter for persistence. But this gets rather verbose very quickly.
It's at this point I usually abandon Forms and go with pure javascript, as JSON is much simpler to handle (and read, in my opinion).