Create A Simple Survey using jQuery and JSON - survey.js

survey.js is a lightweight jQuery plugin that converts poll questions stored in a JSON file into a wizard-like survey interface.

How to use it:

1. Create the Html for the survey with next / prev buttons.

<div class="question-container"></div>
<a id="backBtn" href="#" class="button">« Back</a>
<a id="nextBtn" href="#" class="button">Continue »</a>

2. Prepare your survey questions in the JSON file. The data structure should be like this:

[{  
  "text":"What has a face and two hands but no arms or legs?",
  "id":"2",
  "break_after":true,
  "required":true,
  "type":"single-select",
  "options":[  
    "a clock",
    "a dog",
    "a couch",
    "a giraffe"
  ]},{  
  "text":"What gets wetter and wetter the more it dries?",
  "id":"3",
  "required":true,
  "type":"single-select",
  "options":[  
    "a car",
    "a towel",
    "a plane",
    "a television"
  ]},{  
  "text":"You throw away the outside and cook the inside. Then you eat the outside and throw away the inside. What did you eat?",
  "id":"4",
  "type":"single-select",
  "options":[  
    "a cucumber",
    "an ear of corn",
    "a watermelon",
    "cheese"
  ]},
  ...
}]

3. Load jQuery library and the jQuery survey plugin in your web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="survey.js"></script>

4. Add your own CSS to style the survey.

.question {
  ...
}

---

This awesome jQuery plugin is developed by egbertbouman. For more Advanced Usages, please check the demo page or visit the official website.