Continue questions from where I left in SurveyJs

Question

Every time user refreshes the page the survey starts over in surveyjs.

Is there any possibility to continue from where he left?

I am using surveyjs with React (Nextjs).

Thank you!

Answer 1

The solution to this really depends on where and how frequently you are saving the user's responses.

Saving to a database

Ideally you would be saving to a database as soon as the value of any of the questions chages. That can be done by adding an event handler for the following SurveyJS events:

• onValueChanged
• onDynamicPanelItemValueChanged
• onMatrixCellValueChanged
• onCurrentPageChanged

You would need an endpoint on your server, which saves the survey response JSON and returns a unique id from your database. That id should be used to update the response JSON on subsequent calls until the entire survey is completed.

A cookie can be used to store the id locally. You can look for that cookie every time your page loads. If the cookie exists then get the id from it and call your server to fetch the partial survey response and set it to survey.data.

For an even better user experience make sure you save not only the response JSON, but also the current page number. That way you can automatically navigate to the same survey page the user was on before they refreshed the browser. That can be obtained from survey.currentPageNo.

You should make sure you delete the cookie when the survey is completed. That can be done by handling the onComplete event.

Saving to Local Storage

Here's a sandbox with an example tat shows how to use a browser's local storage to achieve the same result: https://codesandbox.io/s/musing-cloud-z2lhc?file=/src/SurveyComponent.jsx

(the example was based on the Edit saved survey exampe from the official SurveyJS site)

The following method creates a survey response object and saves it locally:

function saveState(survey) {
      var res = { currentPageNo: survey.currentPageNo, data: survey.data };
      //Here should be the code to save the data into your database
      window.localStorage.setItem(storageName, JSON.stringify(res));
    }

And this is the method that runs when the page loads and looks for any data in locla storage to pre-load it onto the survey:

function loadState(survey) {
      //Here should be the code to load the data from your database
      var storageSt = window.localStorage.getItem(storageName) || "";
      var res = {};
      if (storageSt) res = JSON.parse(storageSt);

      //Set the loaded data into the survey.
      if (res.currentPageNo) survey.currentPageNo = res.currentPageNo;
      if (res.data) survey.data = res.data;
    }

Here's how you'd clear the data from local storage, once the survey is completed:

function clearStorage() {
      window.localStorage.removeItem(storageName);
    }

And finally, here's how you would assign these methods to handle the respective SurveyJS events:

survey.onValueChanged.add(function (survey, options) {
      saveState(survey);
});
survey.onCurrentPageChanged.add(function (survey, options) {
      saveState(survey);
});
survey.onComplete.add(function (survey, options) {
      //save the data on survey complete. You may call another function to store the final results
      saveState(survey);
      //TODO: save data to server
      //clear the local storage data
      clearStorage();
});

In addition to onValueChanged, you can also assign saveState to onDynamicPanelItemValueChanged and onMatrixCellValueChanged.

For further information check the following section of the docs: https://surveyjs.io/Documentation/Library?id=LibraryOverview#data-restoreanswers