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:

image829×759 27.5 KB

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!