Templated questionnaire form
HTML
<form id="form-1">
<div id="container"></div>
<button>Next</button>
</form>
CSS
.radio-group {
margin: 10px 0;
font-family: arial, sans-serif;
padding: 5px 20px;
}
.radio-group h1 {
margin:10px 0 !important;
font-weight: bold;
}
JavaScript
function Model () {
var dataset = {
questions: [
{
number: 1,
text: "Do you support the death penalty?",
choices: [
{
text: "Only weekends and evenings off",
jobs: [0, 1] },
{
text: "I have most days free",
jobs: [1, 2, 3] },
{
text: "I am at home most of the time but with distractions (children, etc)",
jobs: [4, 1] },
{
text: "I have few hours free every day",
jobs: [1] },
{
text: "I have about half of the week free from part time job",
jobs: [5] }] },
{
number: 2,
text: "What are your computer skills?",
choices: [
{
text: "I have a minimum typing speed of 70wpm",
jobs: [3, 0] },
{
text: "I have a good knowledge of Microsoft Excel",
jobs: [3, 2] },
{
text: "I am very good at using email and browsing internet",
jobs: [1, 5, 4] },
{
text: "I have RSA or OCR certification",
jobs: [0] },
{
text: "Basic skills but willing to learn",
jobs: [1, 3] }]
}
]
};
return {
populateForm: function ($container) {
$.each(dataset.questions, function (questionIndex, question) {
var $div = $("<div class='radio-group'>");
var $title = $("<span class='rounded'>").text(question.number + ".");
...