---
title: Technology Usage Survey
product: Form Library
description: Technology Usage Survey | JS Survey and Form Library Example for JavaScript
framework: jQuery
source: https://surveyjs.io/form-library/examples/real-devexpresswinformsskins/jquery
index: https://surveyjs.io/form-library/examples/overview.md
---

# Technology Usage Survey (jQuery)

## Files

### `public/index.html`

```html
<link href="https://fonts.googleapis.com/css?family=Open%20Sans:400,600&display=swap" rel="stylesheet">
<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));
});

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

### `src/json.js`

```js
export const json = {
    "pages": [
      {
        "title": "Skin/theme choices in your WinForms applications",
        "elements": [
          {
            "type": "radiogroup",
            "name": "skinNumber",
            "title": "How many skin/theme choices do you currently offer within your WinForms applications?",
            "isRequired": true,
            "choices": [ "many|More than one" ],
            "showOtherItem": true,
            "otherText": "One (please specify its name)",
            "otherErrorText": "Please enter a name of the skin/theme you use in your applications."
          }
        ]
      },
      {
        "title": "Do you ship all DevExpress skins with your applications?",
        "elements": [
          {
            "type": "radiogroup",
            "name": "skinShips",
            "title": "If you include more than one skin/theme within your application, please specify whether you ship all DevExpress WinForms skins/themes or whether you ship a select number.",
            "isRequired": true,
            "choices": [ "all|I ship all skins", "selected|I ship only a select number" ],
            "visibleIf": "{skinNumber} = 'many'"
          }
        ]
      },
      {
        "title": "Skin/Theme Value for End-Users",
        "elements": [
          {
            "type": "matrix",
            "name": "skinValue",
            "title": " If you ship all DevExpress skins/themes, please rank the importance and/or business value of the skins below to your end-users.",
            "visibleIf": "{skinNumber} = 'many' and {skinShips} = 'all'",
            "columns": [ "high|High value for end-users", "donotknow|I don't know", "low|Low value for end-users" ],
            "rows": [
              "msOffice latest|Skins Emulating the Latest Versions of MS Office and Windows",
              "msOffice previous|Skins Emulating Previous Versions of MS Office and Windows",
              "macOS|Skins Emulating Mac OS",
              "vs.net|Skins Emulating Visual Studio",
              "adobe|Skins Emulating Well-Known Apps Like Adobe Lightroom",
              "holiday|Holiday / Seasonal Themes",
              "unique|Other Unique Themes",
              "devExpress|Other Unique Themes Designed by DevExpress"
            ]
          }
        ]
      },
      {
        "title": "Skins/Themes You Include in Your Application",
        "elements": [
          {
            "type": "checkbox",
            "name": "skinSelected",
            "title": "If you ship only a select number of DevExpress skins/themes, please specify the skins/themes you include in your application.",
            "visibleIf": "{skinNumber} = 'many' and {skinShips} != 'all'",
            "choices": [
              "msOffice latest|Skins Emulating the Latest Versions of MS Office and Windows",
              "msOffice previous|Skins Emulating Previous Versions of MS Office and Windows",
              "macOS|Skins Emulating Mac OS",
              "vs.net|Skins Emulating Visual Studio",
              "adobe|Skins Emulating Well-Known Apps Like Adobe Lightroom",
              "holiday|Holiday / Seasonal Themes",
              "unique|Other Unique Themes",
              "devExpress|Other Unique Themes Designed by DevExpress"
            ]
          }
        ]
      },
      {
        "title": "Personal Favorite",
        "elements": [
          {
            "type": "text",
            "name": "skinFavorite",
            "title": "Do you have a personal favorite skin/theme?",
            "visibleIf": "{skinNumber} = 'many'"
          }
        ]
      },
      {
        "title": "Color Variety versus Shape & Style Variety",
        "elements": [
          {
            "type": "radiogroup",
            "name": "userImportance",
            "title": "What is more important for your end-users?",
            "visibleIf": "{skinNumber} = 'many'",
            "choices": [ "color|Color variety", "elements|Elements, shapes and styles" ]
          }
        ]
      },
      {
        "title": "Do you modify skins?",
        "elements": [
          {
            "type": "radiogroup",
            "name": "skinModify",
            "title": "Do you modify DevExpress WinForms skins/themes used within your application to address specific business requirements?",
            "choices": [ "Yes", "No" ]
          }
        ]
      },
      {
        "title": "Reasons to Modify Skins",
        "elements": [
          {
            "type": "comment",
            "name": "skinModifyReason",
            "title": "If you modify DevExpress skins/themes before shipping your application, please briefly explain the reasons for doing so (such as specific branding requirements)."
          }
        ]
      }
    ]
};
```

### `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/real-devexpresswinformsskins/angular.md)
- [React](https://surveyjs.io/form-library/examples/real-devexpresswinformsskins/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/real-devexpresswinformsskins/vue3js.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/real-devexpresswinformsskins/vanillajs.md)