Generate HTML for a survey from JSON

[TylerMoeller]

Writing HTML for a survey can involve a lot of copying and pasting similar code.

For example:

<h5>Would you like to help as a volunteer?</h5>
<div class="row">
  <div class="col s12">
    <p>
      <input type="checkbox" id="volunteer-1" value="I would like to mentor others" />
      <label for="volunteer-1">I would like to mentor others</label>
    </p>
    <p>
      <input type="checkbox" id="volunteer-2" value="I would like to help with sponsorship" />
      <label for="volunteer-2">I would like to help with sponsorship</label>
    </p>
    <p>
      <input type="checkbox" id="volunteer-3" value="I would like to offer a meeting space" />
      <label for="volunteer-3">I would like to offer a meeting space</label>
    </p>
    <p>
      <input type="checkbox" id="volunteer-4" value="I would like to help organize meetups" />
      <label for="volunteer-4">I would like to help organize meetups</label>
    </p>
    <p>
      <input type="checkbox" id="volunteer-5" value="I would like to bring food" />
      <label for="volunteer-5">I would like to bring food, snacks, coffee, etc.</label>
    </p>
  </div>
</div>

It would be nice to generate the HTML based on template JSON, also ensuring that the HTML and responses from the survey are compatible.

The HTML above could be generated from something like:

{
  "volunteer": {
    "title": "Would you like to help as a volunteer?",
    "checkboxes": [
      "I would like to mentor others",
      "I would like to help with sponsorship",
      "I would like to offer a meeting space",
      "I would like to help organize meetups",
      "I would like to bring food"
    ]      
  }
}