So for this one I wanted to go over the implementation of a toggle switch. I wanted to add this incase there is someone that wants some help doing the Mathematics for a given problem in my MathGame.

First off I need to add in a toggle and then deal with the event within Phoenix LiveView.

      <form phx-change="toggle">
        <label class="toggle-switch">
          <input
            class="toggle-switch-check"
            type="checkbox"
            name="toggle-switch-check"
            checked={@toggle}
          />
          <span aria-hidden="true" class="toggle-switch-bar">
            <span class="toggle-switch-handle"></span>
          </span>
        </label>
      </form>

As you can see some important information here:
phx-change="toggle"  #will call the event "toggle" on any change to the field.
name="toggle-switch-check" #will set the target for better debugging
checked={@toggle} #will help to maintain the value of the toggle

Once that was done I need to define a couple events that will help us maintain the different states.

  def handle_event("toggle", %{"toggle-switch-check" => "on"}, socket) do
    {:noreply, assign(socket, toggle: true)}
  end

  def handle_event("toggle", _params, socket) do
    {:noreply, assign(socket, toggle: false)}
  end

Basically this will toggle the value for the checkbox as needed.

Now that we have the check box and a way to change the values we need to set the html to output the vales or nothing.

      <%= if @toggle do %>
        <div style="white-space: pre; font-family: monospace;">
          ... 
          Put your values for what happens when its toggled true
          ...
        </div>
      <% else %>
        <div style="white-space: pre; font-family: monospace;">
          ... 
          Put your values for what happens when its not toggled true
          ...
        </div>
      <% end %>

In this case Ill go over a few things about the style=

white-space: pre #preserve white space
font-family: monospace #make the font monospace (very letter and space same width

That is about it for the toggle and dependent information.