I’m new in Phoenix Liveview and I’m trying to create a quiz app to studying and pratice that framework.
My app currently have three simple ecto schemas (using postgres as database):
Form
schema:
schema "form" do
field :name, :string
has_many :questions, Question
timestamps(type: :utc_datetime)
end
Question
schema:
schema "question" do
field :type, :string, default: "text"
field :title, :string
belongs_to :form, Form
has_many :item, Item
timestamps(type: :utc_datetime)
end
Item
schema:
schema "item" do
field :type, :string, default: "text"
field :title, :string
belongs_to :question, Question
timestamps(type: :utc_datetime)
end
My idea with that schemas is build a simple app where students can acess forms and respond to questions to pratice they knowledgments in web development and related fields.
I have a LiveView questions.ex
that lists the questions of a form:
defmodule QuizAppWeb.QuizLive.Questions do
use QuizAppWeb, :live_view
alias QuizApp.Quiz
alias QuizApp.Quiz.Form
alias QuizApp.Repo
def render(assigns) do
~H"""
<div class="grid grid-cols-1 gap-10">
<%= for question <- @form.questions do %>
<div class="bg-blue-200 rounded-2xl shadow-md p-4">
<h1 class="text-lg font-bold mb-2"><%= question.title %></h1>
<div class="bg-gray-300 shadow-md p-4">
<%= for item <- question.item do %>
<div class="p-2">
<input type="radio" id="{item.id}" name="#{item.id}-item" value="{item.id}" />
<label for="{item.id}"><%= item.title %></label>
</div>
<% end %>
</div>
</div>
<% end %>
<.button phx-click="submit_answers">Enviar</.button>
</div>
"""
end
def mount(%{"form_id" => form_id} = _params, _session, socket) do
questions = Quiz.get_questions(form_id)
form = Repo.get(Form, form_id) |> Repo.preload(questions: :item)
changeset = Form.changeset(form, %{})
{:ok, assign(socket, questions: questions, form: form, changeset: changeset)}
end
def handle_event("submit_answers", %{"form_id" => _form_id} = _params, socket) do
{:noreply, socket}
end
end
The interface is like this:
I know, the design is not beautiful, but I’ll improve it soon
The liveview above does not work and I can’t receive the item that user choices. When I click in a item of second question, the items in firsts question unmark automatically.
What is a simple and efficient way to render and store the user answers of the form?
Thank you!