Can we add a welcome page in surveyJS library

Question

I am using surveyJS library in my react application for creating surveys, now my requirement is to add a welcome page before questions start. can some one help me on this?

Answer 1

One way you can do this is by adding a page to the beginning of the survey. Then place a single HTML widget on it and add your welcome page markup to it. Here's an example:

Update: add "firstPageIsStarted": true to your survey object if showing page numbers or progress bar. See docs: https://surveyjs.io/Documentation/Library?id=surveymodel#firstPageIsStarted

{
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "html",
     "name": "question1",
     "html": "<h1>Welcome!</h1>"
    }
   ],
   "questionTitleLocation": "hidden"
  },
  {
   "name": "page2",
   "elements": [
    {
     "type": "text",
     "name": "question2"
    },
    {
     "type": "checkbox",
     "name": "question3",
     "choices": [
      "item1",
      "item2",
      "item3"
     ]
    }
   ]
  }
 ],
 "firstPageIsStarted": true
}

This will show your welcome page plus the regular SurveyJS "Next" button, as part of the survey navigation. If you don't want to use the regular navigation buttons on your welcome page you can disable it like this:

{
   "name": "page1",
   "elements": [
    {
     "type": "html",
     "name": "question1",
     "html": "<h1>Welcome!</h1>"
    }
   ],
   "questionTitleLocation": "hidden",
   "navigationButtonsVisibility": "hide"
  },

Finally you can implement your own "Start Survey" button within your welcome page markup by assigning a value to currentPageNo when the button gets clicked. For example, survey.currentPageNo = 1. Here's the documentation for it: https://surveyjs.io/Documentation/Library?id=surveymodel#currentPageNo