I am creating a form for a test/exam. Each question in the test has a separate page. For context:
I have a StudentTestController
and the index.html.heex
file contains a list of all tests.
Each test has a “Take Test” button which links to the first question:
<%= link "Take Test", to: Routes.student_test_path(@conn, :show, test, %{"question" => 1}) %>
This link targets the :show
function as seen above.
It would take the user to /my-tests/1?question=1
. 1 is the test_id
and ?question=1
represents the question number.
I am able to get all the question params (such as title
, options
and correct_answer
) by querying test_id
and question_number
. For reference here’s an example of the questions table
id | question_number | question_title | options | correct_answer | test_id |
---|---|---|---|---|---|
1 | 1 | What is an integer? | [“a”, “b” “2”] | “2” | 1 |
Now my show
function will take these question_params and pass them into show.html.heex
The options
field is the only user input that will be in the form. It will be radio buttons of each item from the array, and the user will have to try and select the correct_answer
.
My show.html.heex
file has Next and Back buttons to cycle through questions. For example, the Next button looks like this:
<%= link "Next", to: Routes.student_test_path(@conn, :show, @test, %{"question" => @question_number + 1}) %>
It takes the current question number and adds 1 to it, which will run :show
again but this time it will be the next question. The Back button does the same thing but subtracts from the current question number.
Now here’s my issue:
Every time the Next or Back buttons are clicked, the page refreshes as it goes to the next query. How would I implement a form that has radio buttons of all the options
(@question.options
) and once the user clicks Next or Back, it will remember their input for that radio. So that when they get to the final page, the Next button will be replaced with “Save” that will submit the entire form?