Explore whether to replace surveyJS with a custom renderer

[JamesPHoughton]

We want a consistently renderable set of surveys, but needs to be the surveys we actually want to use.

As an experiment designer where I am trying to progressively find out things about an issue where i have many potential paths through the experiment, and I don't want to elucidate them all in a json file, but maybe have a function that lets me dig down on particular items or take different branching paths based on previous responses.

Pros

• If we did this well, could use across a range of contexts
• flexibility
• control
• not sure what the long term support will be like for surveyJS
• may give us more ability to
• better transferability of the students learn.

Cons

• the opportunity cost of other work - we have endless issues that will never be done, all of which is more important
• this is pretty deep in the abstraction stack, not super close to the research
• spending the time won't move the end project (research) forward that much?
• other features that surveyJS does handle for us that we may not know we need to do
• need to either conform to surveyJS json or translate existing surveys

What we would want to add as features

• question carousel - lets us get timings for every single question
• randomize the order of pages
• more customizable stylings
• easier custom slider
• horizontal styling of responses
• incorporate calls to a GPT API? Maybe to use as validators
• drill down dynamically based on results of previous things
• abstract particular questions as functions.

What are the steps we would need to do?

• translate existing json syntax
• build up the react-hooks-form components
• write form composition code
• run existing unit tests
• write additional unit tests

Questions

react hook forms @christabusho @evanping

• does react hook forms handle accessibility?
• does react-hook-forms provide the customizability that we want?

surveyJS @acao22 @amirrr

• can we use their infrastructure but just replace their react components?
• can we use the react backend and replace the CSS stylings?
• what control does surveysJS give us over customizing the appearances?
• what control does surveysJS give us over customizing presentation order of questions?
• can we use the SurveyJS visual builder if we don't use their backend at all?
• is there an existing surveyJS validator for the json syntax?

decisions to make

• do we stick with the surveyJS json format? or switch to a custom format, or qualtrics qsf?
• do we write more custom code to modify surveyjs in the Surveys repo?
• do we contribute what we need to surveyJS open source project?
• do we find a different surveys library analogous to surveyJS that we like better?

@markwhiting @evanping @christabusho @acao22 @dankim444 @amirrr - feel free to edit this list

Upshot: we will answer questions about SurveyJS and React hook forms before deciding.

[markwhiting]

@amirrr — you might also have thoughts on this.

[markwhiting]

Perhaps useful to consider properties of React Hook Form on this (for @acao22, @amirrr and I, who are less familiar) -> https://github.com/Watts-Lab/researcher-portal/issues/48

[christabusho]

Customizability of react hook forms

React Hook Form is designed to be highly customizable, making it a good choice for creating complex and dynamic forms tailored to specific needs.

Custom Input Components: It allows seamless integration of custom input components using the Controller component, ensuring flexible form structures.

Custom Validation: It supports custom validation logic through functions or third-party libraries like Zod, enabling complex validation scenarios.

Integration with UI Libraries: it integrates well with UI libraries such as Material-UI, allowing for styled components while maintaining form state and validation.

Dynamic Forms: It supports dynamic form fields, enabling conditional logic based on user interactions.

Custom Styling: It provides flexibility to apply custom styles directly or through CSS-in-JS solutions, adhering to design guidelines and enhancing the user interface.

[acao22]

Thoughts on Survey JS:

Using Their Infrastructure and Replacing React Components: SurveyJS is nice in the sense that we can use their infrastructure while replacing their default React components with our custom components, so it allows a lot more customization (I belive through its API and configuration options, you can also override the default components with your own to fit your specific requirements)

Customization: Not sure if we currently have this but one example is that SurveyJS supports theming, so we can create and apply custom themes to surveys. They also allow CSS classes and all the usual customization. Another example of customization that might be useful is controlling the presentation order of questions. You can define the order explicitly in the survey JSON, use conditional logic to show or hide questions based on previous answers, and use dynamic panels and matrices (not sure exactly how but it is an option) to manage complex survey structures.

Thoughts on SurveyJS and replacing entire library: I think it's worth debating as we already have in our meeting on Monday, but overall SurveyJS offers a comprehensive and flexible solution for creating and managing surveys with a lot of customization options. So I think it would definitely help give us that flexibility that we are looking for. However, transitioning to a new library is pretty difficult and will probably be quite complicated, so it's important to weigh the benefits against the costs and consider how well SurveyJS aligns with our long-term goals

[JamesPHoughton]

I think our decision on this was to stick with surveyJS for now, as we can more or less do everything we need, and we are learning how to customize surveyJS. If we had infinite resources, we might prefer a more customizable implementation, but it isn't something that moves us substantially closer to completing research in the near or medium term, and so probably not worth the effort for limited budgets.

Thank you to everyone who researched and thought about this! @acao22, @christabusho, @markwhiting, @amirrr