---
title: Collaborative Survey Review
product: Form Library
description: Facilitate the feedback process with collaborative review mode, a commenting feature that allows users to collect insightful comments from survey reviewers. Learn how to display a completed survey in read-only format and incorporate editable comment fields after each survey question, enabling reviewers to provide targeted feedback. View this free demo for JavaScript to learn more.
framework: jQuery
source: https://surveyjs.io/form-library/examples/survey-review-mode/jquery
index: https://surveyjs.io/form-library/examples/overview.md
---

# Collaborative Survey Review (jQuery)

Collaborative survey review is a commenting feature that enables survey reviewers to engage with user responses in a more meaningful way and enhance the feedback loop. With the review mode enabled, survey creators or administrators can use editable text entry fields to leave comments for individual answers given by users. Every comment is then attached to its corresponding answer. In order to prevent answer modifications, reviewers access a completed survey in read-only state.

To display a survey in review mode, follow the steps below:

1. Populate form fields.\
Assign an object with respondent answers to `SurveyModel`'s [`data`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#data) property.

1. Set questions to read-only state.\
Iterate through survey questions and enable their [`readOnly`](https://surveyjs.io/form-library/documentation/api-reference/question#readOnly) property.

1. Add comment fields.\
Call `PageModel`'s [`addNewQuestion(type, name)`](https://surveyjs.io/form-library/documentation/api-reference/page-model#addNewQuestion) method to add new questions of the [`"comment"` type](https://surveyjs.io/form-library/documentation/api-reference/comment-field-model).

For more information, view code listings for Angular, React, Vue, jQuery, or Vanilla JavaScript.

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import $ from "jquery";
import { Model } from "survey-core";
import "survey-js-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

const survey = new Model(json);
survey.onComplete.add((sender, options) => {
    console.log(JSON.stringify(sender.data, null, 3));
});
// Assign a respondent's answers to a survey
survey.data = {
  "relevance": 3,
  "clarity": 4,
  "relevantTopics": [
    "communication",
    "collaboration",
    "stressManagement"
  ],
  "suggestions": "I suggest incorporating more real-life examples to illustrate concepts and breaking down complex topics into smaller modules for better comprehension.",
  "readyToRecommend": 4
};

const allVisibleQuestions = survey.getAllQuestions(true);
// Set all questions into read-only state
allVisibleQuestions.forEach(q => q.readOnly = true);

// Add comment fields to all survey questions
function getFeedbackName (q) {
  return q.name + "_feedback";
}

allVisibleQuestions.forEach(q => {
  const index = q.parent.elements.indexOf(q) + 1;
  const comment = q.parent.addNewQuestion(
    "comment",
    getFeedbackName(q),
    index
  );
  comment.showNumber = false;
  comment.title = "Feedback for: " + q.title;
  comment.visible = true;
});

$("#surveyElement").Survey({ model: survey });
```

### `src/json.js`

```js
export const json = {
  "title": "Training Feedback Survey: Evaluation of Recent Training Program",
  "description": "Thank you for participating in this training program. Your feedback is essential in helping us enhance the quality of our training initiatives. Please take a moment to provide your insights on the training sessions you attended.",
  "elements": [
    {
      "type": "rating",
      "name": "relevance",
      "title": "How well did the training content align with the stated objectives?",
      "autoGenerate": false,
      "rateValues": [
        {
          "value": 5,
          "text": "Extremely Well"
        },
        {
          "value": 4,
          "text": "Very Well"
        },
        {
          "value": 3,
          "text": "Moderately Well"
        },
        {
          "value": 2,
          "text": "Slightly Well"
        },
        {
          "value": 1,
          "text": "Not Well at All"
        }
      ],
      "displayMode": "buttons"
    },
    {
      "type": "radiogroup",
      "name": "clarity",
      "title": "Did the training materials (presentation slides, handouts) support your understanding of the content?",
      "choices": [
        {
          "value": 5,
          "text": "Strongly Agree"
        },
        {
          "value": 4,
          "text": "Agree"
        },
        {
          "value": 3,
          "text": "Neutral"
        },
        {
          "value": 2,
          "text": "Disagree"
        },
        {
          "value": 1,
          "text": "Strongly Disagree"
        }
      ]
    },
    {
      "type": "checkbox",
      "name": "relevantTopics",
      "title": "Please select the training topics you found most relevant",
      "choices": [
        {
          "value": "communication",
          "text": "Communication Skills"
        },
        {
          "value": "timeManagement",
          "text": "Time Management"
        },
        {
          "value": "collaboration",
          "text": "Team Collaboration"
        },
        {
          "value": "stressManagement",
          "text": "Stress Management"
        }
      ],
      "showOtherItem": true
    },
    {
      "type": "comment",
      "name": "suggestions",
      "title": "What suggestions do you have for improving the training structure and content?",
      "maxLength": 500
    },
    {
      "type": "radiogroup",
      "name": "readyToRecommend",
      "title": "Would you recommend this training program to colleagues or peers?",
      "choices": [
        {
          "value": 5,
          "text": "Definitely"
        },
        {
          "value": 4,
          "text": "Likely"
        },
        {
          "value": 3,
          "text": "Neutral"
        },
        {
          "value": 2,
          "text": "Unlikely"
        },
        {
          "value": 1,
          "text": "Definitely Not"
        }
      ]
    }
  ]
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "jquery": "latest",
    "survey-core": "latest",
    "survey-js-ui": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/survey-review-mode/angular.md)
- [React](https://surveyjs.io/form-library/examples/survey-review-mode/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/survey-review-mode/vue3js.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/survey-review-mode/vanillajs.md)