Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Conditional Complete screens for the various exit conditions. #3

Open
DavidEBest opened this issue Jan 21, 2024 · 3 comments
Open

Comments

@DavidEBest
Copy link
Contributor

Survey.JS has a mechanism to define conditional complete screens. Use it to add the conditional screens to the survey, as defined in this document.

@trevorkirpaul
Copy link
Contributor

I can't seem to find the conditional complete screens 😢

There is, however, a callback which is fired on survey completion which gives us access to the question and answers.

We could consider using that to build and navigate/render our own custom completion screen.

@DavidEBest
Copy link
Contributor Author

Here are the docs for the conditional completion pages. https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#completedHtmlOnCondition

If these don't work, I'd be happy to explore the callback approach.

@trevorkirpaul
Copy link
Contributor

trevorkirpaul commented Jan 24, 2024

Awesome, this does work but we have to do some extra steps which I think are fine.

The completedHtmlOnCondition only lets you use 1 of the complete screen configs that you pass it. It won't render every complete screen config which passes.

ie: there are 2 conditions below which are the same but it will only render whichever is first in the array.

const surveyJson = {
    completedHtmlOnCondition: [{
        expression: "{some_field} < 10",
        html: "Custom markup to show when some_field is greater than 10"
    }, {
        expression: "{some_field} < 10",
        html: "Custom markup to show when some_field is less than 10"
    },
    // ...
    ]
};

Fortunately, we can dynamically set the completedHtml property based on the survey results. So we can check which programs the user is eligible for and construct the completion screen using the onComplete hook.

I'll get this is a PR though it will also contain #2 as well if that's fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants