title: How to add an image in a JSON file?
body: <p>Basically I have a form that ask simple questions and the user can answer either in a select, textbox or textarea. </p>
  
  <p>I used JSON to parse the questions.</p>
  
  <p>However I need to know how can I insert an image above the question like this:
  <a href="http://prntscr.com/f5o8fc" rel="nofollow noreferrer">http://prntscr.com/f5o8fc</a></p>
  
  <p>Here's my jQuery:</p>
  
  <pre><code>survey = { questions: undefined,
             firstQuestionDisplayed: -1,
             lastQuestionDisplayed: -1};
  
  (function (survey, $) {
  
      survey.setup_survey = function(questions) {
          var self = this;
          this.questions = questions;
  
          this.questions.forEach(function(question) {
              self.generateQuestionElement( question );
          });
  
          $('#backBtn').click(function() {
              if ( !$('#backBtn').hasClass('disabled') ) {
                  self.showPreviousQuestionSet();
              }
          });
  
          $('#nextBtn').click(function() {
              var ok = true;
              for (i = self.firstQuestionDisplayed; i &lt;= self.lastQuestionDisplayed; i++) {
                  if (self.questions[i]['required'] === true &amp;&amp; !self.getQuestionAnswer(questions[i])) {
                      $('.question-container &gt; div.question:nth-child(' + (i+1) + ') &gt; .required-message').show();
                      ok = false;
                  }
              }
              if (!ok)
                  return
  
              if ( $('#nextBtn').text().indexOf('Continue') === 0 ) {
                  self.showNextQuestionSet();
              }
              else {
                  var answers = {res: $(window).width() + "x" + $(window).height()};
                  for (i = 0; i &lt; self.questions.length; i++) {
                      answers[self.questions[i].id] = self.getQuestionAnswer(self.questions[i]);
                  }
  
                  $.ajax({type: 'post',
                          url: 'http://localhost:7000/answers',
                          contentType: "application/json",
                          data: JSON.stringify(answers),
                          processData: false,
                          success: function(response) {
                              self.hideAllQuestions();
                              $('#nextBtn').hide();
                              $('#backBtn').hide();
                              if ('success' in response) {
                                  $('.completed-message').html('Thank you for participating in this survey!&lt;br&gt;&lt;br&gt;'+response['success']);
                              }
                              else if ('error' in response) {
                                  $('.completed-message').text('An error occurred: '+response['error']);
                              }
                              else {
                                  $('.completed-message').text('An unknown error occurred.');
                              }
                          },
                          error: function(response) {
                              self.hideAllQuestions();
                              $('#nextBtn').hide();
                              $('#backBtn').hide();
                              $('.completed-message').text('An error occurred: could not send data to server');
                          }
                  });
              }
          });
  
          this.showNextQuestionSet();
  
      }
  
      survey.getQuestionAnswer = function(question) {
          var result;
          if ( question.type === 'single-select' ) {
              result = $('input[type="radio"][name="' + question.id + '"]:checked').val();
          }
          else if ( question.type === 'single-select-oneline' ) {
              result = $('input[type="radio"][name="' + question.id + '"]:checked').val();
          }
          else if ( question.type === 'text-field-small' ) {
              result = $('input[name=' + question.id + ']').val();
          }
          else if ( question.type === 'text-field-large' ) {
              result = $('textarea[name=' + question.id + ']').val();
          }
          return result ? result : undefined;
      }
  
      survey.generateQuestionElement = function(question) {
          var questionElement = $('&lt;div id="' + question.id + '" class="question"&gt;&lt;/div&gt;');
          var questionTextElement = $('&lt;div class="question-text"&gt;&lt;/div&gt;');
          var questionAnswerElement = $('&lt;div class="answer"&gt;&lt;/div&gt;');
          var questionCommentElement = $('&lt;div class="comment"&gt;&lt;/div&gt;');
          questionElement.appendTo($('.question-container'));
          questionElement.append(questionTextElement);
          questionElement.append(questionAnswerElement);
          questionElement.append(questionCommentElement);
          questionTextElement.html(question.text);
          questionCommentElement.html(question.comment);
          if ( question.type === 'single-select' ) {
              questionElement.addClass('single-select');
              question.options.forEach(function(option) {
                  questionAnswerElement.append('&lt;label class="radio"&gt;&lt;input type="radio" value="' + option + '" name="' + question.id + '"/&gt;' + option + '&lt;/label&gt;');
              });
          }
          else if ( question.type === 'single-select-oneline' ) {
              questionElement.addClass('single-select-oneline');
              var html = '&lt;table border="0" cellpadding="5" cellspacing="0"&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;';
              question.options.forEach(function(label) {
                  html += '&lt;td&gt;&lt;label&gt;' + label + '&lt;/label&gt;&lt;/td&gt;';
              });
              html += '&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;div&gt;' + question.labels[0] + '&lt;/div&gt;&lt;/td&gt;';
              question.options.forEach(function(label) {
                  html += '&lt;td&gt;&lt;div&gt;&lt;input type="radio" value="' + label + '" name="' + question.id + '"&gt;&lt;/div&gt;&lt;/td&gt;';
              });
              html += '&lt;td&gt;&lt;div&gt;' + question.labels[1] + '&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';
              questionAnswerElement.append(html);
          }
          else if ( question.type === 'text-field-small' ) {
              questionElement.addClass('text-field-small');
              questionAnswerElement.append('&lt;input type="text" value="" class="text" name="' + question.id + '"&gt;');
          }
          else if ( question.type === 'text-field-large' ) {
              questionElement.addClass('text-field-large');
              questionAnswerElement.append('&lt;textarea rows="8" cols="0" class="text" name="' + question.id + '"&gt;');
          }
          if ( question.required === true ) {
              var last = questionTextElement.find(':last');
              (last.length ? last : questionTextElement).append('&lt;span class="required-asterisk" aria-hidden="true"&gt;*&lt;/span&gt;');
          }
          questionAnswerElement.after('&lt;div class="required-message"&gt;This is a required question&lt;/div&gt;');
          questionElement.hide();
      }
  
      survey.hideAllQuestions = function() {
          $('.question:visible').each(function(index, element){
              $(element).hide();
          });
          $('.required-message').each(function(index, element){
              $(element).hide();
          });
      }
  
      survey.showNextQuestionSet = function() {
          this.hideAllQuestions();
          this.firstQuestionDisplayed = this.lastQuestionDisplayed+1;
  
          do {
              this.lastQuestionDisplayed++;  
              $('.question-container &gt; div.question:nth-child(' + (this.lastQuestionDisplayed+1) + ')').show();
              if ( this.questions[this.lastQuestionDisplayed]['break_after'] === true)
                  break;
          } while ( this.lastQuestionDisplayed &lt; this.questions.length-1 );
  
          this.doButtonStates();
      }
  
      survey.showPreviousQuestionSet = function() {
          this.hideAllQuestions();
          this.lastQuestionDisplayed = this.firstQuestionDisplayed-1;
  
          do {
              this.firstQuestionDisplayed--;  
              $('.question-container &gt; div.question:nth-child(' + (this.firstQuestionDisplayed+1) + ')').show();
              if ( this.firstQuestionDisplayed &gt; 0 &amp;&amp; this.questions[this.firstQuestionDisplayed-1]['break_after'] === true)
                  break;
          } while ( this.firstQuestionDisplayed &gt; 0 );
  
          this.doButtonStates();
      }
  
      survey.doButtonStates = function() {
          if ( this.firstQuestionDisplayed == 0 ) {
              $('#backBtn').addClass('invisible');  
          }
          else if ( $('#backBtn' ).hasClass('invisible') ) {
              $('#backBtn').removeClass('invisible');
          }
  
          if ( this.lastQuestionDisplayed == this.questions.length-1 ) {
              $('#nextBtn').text('Finish');
              $('#nextBtn').addClass('blue');  
          }
          else if ( $('#nextBtn').text() === 'Finish' ) {
              $('#nextBtn').text('Continue »'); 
              $('#nextBtn').removeClass('blue');
          }
      }
  })(survey, jQuery);
  
  
  $(document).ready(function(){
      $.getJSON('questions.json', function(json) {
          survey.setup_survey(json);        
      });
  });
  
  window.onbeforeunload = function() {
      return "This will reset all answers that you've already filled in!";
  }
  </code></pre>
  
  <p>And from here: </p>
  
  <p>I parse my JSON file:</p>
  
  <pre><code>[  
      {  
          "text":"Do you know me?",
          "id":"2",
          "break_after":true,
          "required":true,
          "type":"single-select",
          "options":[  
              "YES",
              "NO"
          ]
      },
      {  
          "text":"What gets wetter and wetter the more it dries?",
          "id":"3",
          "break_after":true,
          "required":true,
          "type":"single-select",
          "options":[  
              "a car",
              "a towel",
              "a plane",
              "a television"
          ]
      },
      {  
          "text":"Are you going to?",
          "id":"4",
          "type":"text-field-small"
      },
      {  
          "text":"What goes up and down the stairs without moving?",
          "id":"5",
          "type":"single-select",
          "options":[  
              "a toddler",
              "an arrow",
              "towels",
              "a rug"
          ]
      },
      {  
          "text":"What can you catch but not throw?",
          "id":"6",
          "type":"single-select",
          "options":[  
              "a couch",
              "a cold",
              "a puppy",
              "a baseball"
          ]
      },
      {  
          "text":"I can run but not walk. Wherever I go, thought follows close behind. What am I?",
          "id":"7",
          "type":"single-select",
          "options":[  
              "a doctor",
              "a pineapple",
              "a nose",
              "pimples"
          ]
      },
      {  
          "text":"What's black and white and red all over?",
          "id":"8",
          "type":"single-select",
          "options":[  
              "an embarrased skunk",
              "a turtle",
              "a giraffe",
              "a dog"
          ]
      },
      {  
          "text":"What goes around the world but stays in a corner?",
          "id":"9",
          "type":"single-select",
          "options":[  
              "a stamp",
              "coffee",
              "a dog",
              "plants"
          ]
      }
  ]
  </code></pre>
  
  <p>Here's what the HTML looks like:</p>
  
  <pre><code>&lt;div class="main"&gt;
  
  &lt;div&gt;&lt;h1 class="title"&gt;Test Questionaire&lt;/h1&gt;&lt;br&gt;
  
  &lt;div class="question-container"&gt;&lt;/div&gt;
  &lt;a id="backBtn" href="#" class="button"&gt;« Back&lt;/a&gt;
  &lt;a id="nextBtn" href="#" class="button"&gt;Continue »&lt;/a&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="survey.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;/div&gt;&lt;div class="completed-message"&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Any idea?</p>