Closed dzymail closed 2 years ago
Hi @dzymail, thanks for trying out this package. We don't have a multi-step wizard-like structure built in, but here are a couple of ideas you may find useful:
Consider using sections:
$survey = Survey::create(['name' => 'Cat Population Survey']);
$one = $survey->sections()->create(['name' => 'Part One']);
$one->questions()->create([
'content' => 'How many cats do you have?',
'type' => 'number',
'rules' => ['numeric', 'min:0']
]);
$two = $survey->sections()->create(['name' => 'Part Two']);
$two->questions()->create([
'content' => 'What\'s the name of your first cat?',
]);
$two->questions()->create([
'content' => 'Would you want a new cat?',
'type' => 'radio',
'options' => ['Yes', 'Oui']
]);
//...
This way you won't have to deal with slicing questions manually when accessing them in your blade file:
@foreach($survey->sections as $section)
<h2>{{ $section->name }}</h2>
@foreach($section->questions as $question)
@include('survey::questions.single')
@endforeach
@endforeach
One way to approach this is to modify the views that come with this package and add a sprinkle of JavaScript to acheive the user experience you intend. To do this, I would:
php artisan vendor:publish --provider="MattDaneshvar\Survey\SurveyServiceProvider" --tag="views"
This will create a new vendor/survey
directory under your views directory, where you can fully modify the blade files that come with this package.
I did a quick search and came across techlab/jquery-smartwizard. You may find other packages that suit your requirements better.
Here are a couple of challenges I can think of when using JavaScript to achieve this style of navigation:
What happens if a user accidentally reload the form? Will they need to fill up the entire 108 questions again? You may find packages like guillaumepotier/garlic.js useful to maintain form values locally until the form is submitted.
What if the answer to a question in the 3rd section is invalid? Will the wizard be able to automatically display the 3rd section when Laravel's validation redirects user back to the form?
Leaving this issue open so that it's visible to others who may be able to provide more help.
It is related javascript. i tried manually bind fields value when using Livewire, but that is not a general solution. thanks for the reply.
Hi, could anyone help me about multi steps form?
my app have 108 questions, all of which are mandatory. The first 8 questions are the basic information of the client filling in, including text type and radio type. The next 100 questions are for analysis, all of which are radio types. now i got single page form working, but not for multi steps.
I plan to split into 8+20+20+20+20+20 steps, how to adjust blade file? i defined function for step number increase, and the variables for blade file, something like this:
but not working, maybe related to pass variables between steps, please give some details about how to do multi steps?