Could you help, I'm trying to build a survey using your library and have encountered some issues implementing certain features. For instance, I have 25 questions coming from a database. These questions are of various types such as text fields, yes/no, or image pick. My idea is to use panels for each question, displaying them one by one based on user interactions.
For questions that require user input in a text field, I'd like to add a "Next" button to proceed to the next question. Currently, I've set it up so that when a user writes something in the field and then clicks anywhere on the screen, the next panel appears. This is because in the database, I have a "visibleIf" condition that checks if the previous question is not empty.
However, if users don't want to answer a particular question, they should be able to skip it. For radio group options like "Yes" or "No", this approach works. In the database, I have a "visibleIf" condition like {N of question} = 'Yes'
, etc.
How can I add a custom "Next" button specifically for questions with a comment field?
Or panels working only with triggers like radio group or checkbox or droopdown menu?
Custom buttons
Answers approved by surveyjs Support
Hello,
Thank you for sharing the JSON. A user has to click outside an input to submit the value for the first question. Once the value is submitted, the visibleIf
expression evaluates to true
and activates the second question. I may recommend that you change the survey.textUpdateMode from onBlur
(default) to onTyping
.
JSON{
textUpdateMode: "onTyping",
pages: [
{
name: "singlePage",
elements: [
{
type: "panel",
name: "qbr001Panel",
elements: [
{
type: "comment",
name: "qbr001",
title: "Describe something",
visibleIf: ""
}
]
},
{
type: "panel",
name: "qbr002Panel",
elements: [
{
type: "radiogroup",
name: "qbr002",
title: "Do you like cats? ",
choices: ["Yes", "No"],
visibleIf: "{qbr001} notempty"
}
]
},
{
type: "panel",
name: "qbr003Panel",
elements: [
{
type: "radiogroup",
name: "qbr003",
title: "Do you like dogs?",
choices: ["Yes", "No"],
visibleIf: "{qbr002} = 'No'"
}
]
},
{
type: "panel",
name: "qbr004Panel",
elements: [
{
type: "comment",
name: "qbr004",
title: "Why?",
visibleIf: "{qbr002} = 'No' and {qbr003} = 'No'"
}
]
},
{
type: "panel",
name: "qbr005Panel",
elements: [
{
type: "comment",
name: "qbr005",
title: "Which breed?",
visibleIf: "{qbr002} = 'Yes' or {qbr003} = 'Yes'"
}
]
},
{
type: "panel",
name: "qbr006Panel",
elements: [
{
type: "imagepicker",
name: "qbr006",
title: "choose pictures of dogs",
choices: [
{
value: "img1",
imageLink:
"https://images.pexels.com/photos/8386440/pexels-photo-8386440.jpeg?auto=compress&cs=tinysrgb&w=600"
},
{
value: "img2",
imageLink: "https:///..."
}
],
multiSelect: false,
visibleIf: "{qbr003} = 'Yes' and {qbr005} notempty"
}
]
},
{
type: "panel",
name: "qbr007Panel",
elements: [
{
type: "imagepicker",
name: "qbr007",
title: "choose cats",
choices: [
{
value: "img1",
imageLink: "https://www....."
},
{
imageLink: "https://i.....",
value: "img2"
}
],
multiSelect: false,
visibleIf: "{qbr002} = 'Yes' and {qbr005} notempty"
}
]
}
]
}
]
}
With this option, the second question will appear immediately after a user starts entering some text within the first survey element.
Please let me know if this option works.
Comments
(2)
Hi Vic,
Thank you for reaching out and considering SurveyJS for your business needs. We already have such an auto-navigate feature: Move to the Next Page Automatically. If you enable the
goNextPageAutomatic
option, a user will be moved to the next page once it supplies a question answer and moves the focus out of the question. Will this work for you?Thank you for your answer.
Unfortunately no, this feature that you mentioned doesn't work for me.
I share pic with easy question examples. In first question even if I do isRequired false I need button like "More" to show next panel and skip question to see next one. On the second question when I click on 'Yes' or 'No' everything works correct and third one appears. Any ideas to add custom button for panel?
Hello Vic,
Thank you for the clarification. When questions are placed within the same page, there is no need for a Next/More button. Questions are already available by default. However, if you wish to show/hide questions depending on previous answers, you may wish to use the visibleIf expression. Consider the following survey definition:
{ "pages": [ { "name": "page1", "elements": [ { "type": "comment", "name": "question1", "title": "Describe something" }, { "type": "boolean", "name": "question2", "title": "Do you like Cats?" }, { "type": "dropdown", "name": "question3", "visibleIf": "{question2} = true", "title": "What breed of cats do you prefer?", "choices": [ { "value": "Item 1", "text": "Siamese" }, { "value": "Item 2", "text": "Maine Coon" }, { "value": "Item 3", "text": "Scottish Fold" } ] } ] } ] }
Please let me know what you think.
Hello Jane!
Ok, here you go my JSON file generated when is coming from database.
As you see everything on one page and questions are panels. Add for panel with textarea buttons like "Skip" or "More" to show next panel, for now working approach is click anywhere on screen to load next panel.
Maybe you have some more recommendations for structure questions I would happy to know. Thank you so much!
{ "pages": [ { "name": "singlePage", "elements": [ { "type": "panel", "name": "qbr001Panel", "elements": [ { "type": "comment", "name": "qbr001", "title": "Describe something", "visibleIf": "" } ] }, { "type": "panel", "name": "qbr002Panel", "elements": [ { "type": "radiogroup", "name": "qbr002", "title": "Do you like cats? ", "choices": [ "Yes", "No" ], "visibleIf": "{qbr001} notempty" } ] }, { "type": "panel", "name": "qbr003Panel", "elements": [ { "type": "radiogroup", "name": "qbr003", "title": "Do you like dogs?", "choices": [ "Yes", "No" ], "visibleIf": "{qbr002} = 'No'" } ] }, { "type": "panel", "name": "qbr004Panel", "elements": [ { "type": "comment", "name": "qbr004", "title": "Why?", "visibleIf": "{qbr002} = 'No' and {qbr003} = 'No'" } ] }, { "type": "panel", "name": "qbr005Panel", "elements": [ { "type": "comment", "name": "qbr005", "title": "Which breed?", "visibleIf": "{qbr002} = 'Yes' or {qbr003} = 'Yes'" } ] }, { "type": "panel", "name": "qbr006Panel", "elements": [ { "type": "imagepicker", "name": "qbr006", "title": "choose pictures of dogs", "choices": [ { "value": "img1", "imageLink": "https://images.pexels.com/photos/8386440/pexels-photo-8386440.jpeg?auto=compress&cs=tinysrgb&w=600" }, { "value": "img2", "imageLink": "https:///..." } ], "multiSelect": false, "visibleIf": "{qbr003} = 'Yes' and {qbr005} notempty" } ] }, { "type": "panel", "name": "qbr007Panel", "elements": [ { "type": "imagepicker", "name": "qbr007", "title": "choose cats", "choices": [ { "value": "img1", "imageLink": "https://www....." }, { "imageLink": "https://i.....", "value": "img2" } ], "multiSelect": false, "visibleIf": "{qbr002} = 'Yes' and {qbr005} notempty" } ] } ] } ]