surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.2k stars 809 forks source link

Radiogroup as Big Buttons #2347

Open thiagotigaz opened 4 years ago

thiagotigaz commented 4 years ago

Are you requesting a feature, reporting a bug or asking a question?

feature/asking question

What is the current behavior?

radiogroup is displayed as radiogroup

What is the expected behavior?

would like to display it as big buttons

I need to build a question like the following picture, it displays a image and the use picks clicks a button that describes it.

Screen Shot 2020-08-26 at 8 45 48 AM

I'm trying to use radiogroup and onAfterRenderQuestion. My initial though was to make the radios hidden and add the buttons side by side with it and then select the radio on button click, it's kinda hack and I don't know if this is the best solution. I need help with it, would it be better to create a custom widget? is there a simple way to achieve it?

tsv2013 commented 4 years ago

SurveyJS doesn't have such a question type out-of-the-box. You can patch radiogroup question markup in the https://surveyjs.io/Documentation/Library?id=surveymodel#onAfterRenderQuestion event handler as shown in this live sample - https://surveyjs.io/Examples/Library?id=survey-afterrender&platform=jQuery&theme=modern

Or you can create a custom widget (https://github.com/surveyjs/widgets) and here is the sample - https://plnkr.co/edit/HdnYE5?p=preview&preview