[Office Hours] Onboarding Questionnaire

[MiguelAFH]

Related Discussion

Hi,

We are working on a onboarding questionnaire that helps us gather user details for their profile that would be useful to know. We are thinking on things like: habits (when do they usually go to sleep), preferences (do they sleep with their phone close by), etc.

The problem I'm facing is how to add that questionannaire to the onboarding flow. I was looking into the InterestingModules view and the Schedule views, but not sure how to integrate this questionnaire. Is it as easy to add a QuestionnaireView into one of the steps of the OnboardingFlow?

What I've tried:

1. Added the questionnaire as an step in the OnboardingFlow. The issue here is that I didn't find a way to use the OnboardingView so it gets stuck in the questionnaire as no next action is available.
2. Added it as a next step in the main view when loading the app. The problem I encountered is that instead of being shown after the onboarding process, it devides the screen in two parts. The upper part would have the onboarding flow, while the lower part the questionnaire.

Thanks!

Reproduction

This is a new feature in our app

Additional context

For instance, this is an example of how the questionnaire gets embedded into the OnboardingFlow, but it seems to be nested and not native into the view.

Code of Conduct

• I agree to follow this course's Code of Conduct and Contributing Guidelines

[PSchmiedmayer]

@MiguelAFH I think you are on the right track here! Spezi Questionnaire is the right module to use, and it works great in combination with Spezi Onboarding. You can use the results closure to trigger the next step on the onboarding step. You can use the toolbarVisibility modifier to hide the navigation bar presented by the OnboardingStack as the QuestionnaireView renders its own navigation stack.

This might be a small example that you can put in your onboarding stack:

import SpeziOnboarding
import SpeziQuestionnaire
import SwiftUI


struct QuestionnaireDuringOnboardingExample: View {
    @Environment(OnboardingNavigationPath.self) private var onboardingNavigationPath
    // ...
    
    
    var body: some View {
        QuestionnaireView(
            questionnaire: Bundle.main.questionnaire(withName: "SocialSupportQuestionnaire")
        ) { result in
            // Handle the result, e.g., forward to the standard or upload somehwere ...
            onboardingNavigationPath.nextStep()
        }
            .navigationBarBackButtonHidden()
            .toolbarVisibility(.hidden, for: .navigationBar)
    }
}


#Preview {
    OnboardingStack {
        QuestionnaireDuringOnboardingExample()
    }
}

[MiguelAFH]

Thank you, this was super helpful!

[PSchmiedmayer]

Sure, more than happy to help @MiguelAFH!