matt-daneshvar / laravel-survey

Create and manage surveys within your Laravel app.
MIT License
250 stars 50 forks source link

Need help about multi steps #26

Closed dzymail closed 2 years ago

dzymail commented 2 years ago

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:

$step1 = $survey->questions->slice(0, 8, true); $step2 = $survey->questions->slice(8, 20, true); $step3 = $survey->questions->slice(28, 20, true); $step4 = $survey->questions->slice(48, 20, true); $step5 = $survey->questions->slice(68, 20, true); $step6 = $survey->questions->slice(88, 20, true);

@if($currentStep == 1) @foreach($step1 as $key => $question) @include('survey::questions.single') @endforeach @endif

but not working, maybe related to pass variables between steps, please give some details about how to do multi steps?

matt-daneshvar commented 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:

Grouping questions into multiple sections

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

Displaying one section at a time

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:

1. Publish the boilerplate views

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.

2. Write your own JavaScript or make use of an open-source package

I did a quick search and came across techlab/jquery-smartwizard. You may find other packages that suit your requirements better.

Challenges to consider when building a wizard with JS

Here are a couple of challenges I can think of when using JavaScript to achieve this style of navigation:


Leaving this issue open so that it's visible to others who may be able to provide more help.

dzymail commented 2 years ago

It is related javascript. i tried manually bind fields value when using Livewire, but that is not a general solution. thanks for the reply.