Minimal Quiz/Survey Form Builder - jQuery AskedPlugin

AskedPlugin is an easy-to-use jQuery plugin that enables you to dynamically generate forms for surveys, polls, questionnaires, and quizzes.

It is fully compatible with the latest Bootstrap framework and allows you to choose between five question types: Radio Button, Text, Input Field, Textarea, and Checkbox.

How to use it:

1. Create an empty DIV to hold the form.

<div class="asked" id="asked">
  <!-- form will be placed here -->
</div>

2. Create JSON objects that contain one or several questions as follows.

var quizJSON = {
  "quiz": [{
    "id": 1, // optional 
    "title": "Examples Questions", // optional
    "required": 0, // optional
    "route": "https://www.jqueryscript.net", // optional
    "questions": [{
        "id": 1, // optional
        "title": "Which of the names below belong to marvel?", // required
        "type": "checkbox", // required
        "order": 1, // optional
        "rule": "", // optional
        "required": 1, // optional
        "answered": false, // optional
        "value_answer": "", // optional
        "items": [{
            "id": 3,
            "value": "Falcon", // required
            "selected": false // optional
          },
          {
            "id": 4,
            "value": "The Flash",
            "selected": false
          },
          {
            "id": 5,
            "value": "Iron Man",
            "selected": true
          },
          {
            "id": 6,
            "value": "Wolverine",
            "selected": false
          },
          {
            "id": 7,
            "value": "Batman",
            "selected": false
          },
          {
            "id": 8,
            "value": "Spider-Man",
            "selected": false
          }
        ],
      },
      {
        "id": 2,
        "title": "What is your favorite book to read?",
        "type": "text",
        "order": 2,
        "rule": "",
        "required": 1,
        "answered": true,
        "value_answer": "The Age of A.I., Clear Code, Kubernetes Security and Observability ",
        "items": [],
      },
      {
        "id": 3,
        "title": "What is the tallest building in the world?",
        "type": "radio",
        "order": 3,
        "required": 1,
        "answered": true,
        "value_answer": "Burj Khalifa",
        "items": [{
            "id": 9,
            "value": "Burj Khalifa",
            "selected": true
          },
          {
            "id": 10,
            "value": "Warisan Merdeka Tower",
            "selected": false
          },
          {
            "id": 11,
            "value": "Goldin Finance 117",
            "selected": false
          },
          {
            "id": 12,
            "value": "Ping An Finance Center",
            "selected": false
          },

        ],
      },
      {
        "id": 4,
        "title": "What's your favorite holiday?",
        "type": "textarea",
        "order": 4,
        "required": 1,
        "answered": false,
        "value_answer": "",
        "items": [],
      },
    ]
  }]
}

3. Download and load the AskedPlugin jQuery plugin.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/asked.js"></script>

4. Initialize the plugin to generate a form from the data you provide.

$(function () {
  $('.asked').asked({
    data: quizJSON.quiz,
    events: {
      onCompleteQuiz: function (option) {
        console.log(option);
        alert("finish")
      }
    }
  });
});

---

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