Making a Questionnaire in a website (html JavaScript)

1. Introduction. With our  Cool Promo   o  Cool Promo White Label   apps you can create your own quizzes and surveys with dynamic questi...

1. Introduction.

With our Cool Promo Cool Promo White Label apps you can create your own quizzes and surveys with dynamic questions and answers.
Thanks to our Advanced Personalization, you can use your own html or css this way:

<html>
<head>
<!-- {{{ cool_tabs_head }}} -->
</head>
<body>
{{{ cool_tabs_form }}}
<!-- {{{ cool_tabs_body_end }}} -->
</body>
</html>

You can use {{{ cool_tabs_form }}} to include the different questions of your quiz. You can't modify the html directly on them. You can see how to set this html up in this document, with the objective of modifying the CSS in an easy way.

2. Step by step.

2.1. Personalized classes for each screen.

The different screens of a quiz or survey include dynamic classes and ids which change depending on the number of question. The last step, the entry form, always includes an additional class ('last_step') so you can identify that screen and personalize it.
<body>
<div class="wrapper form_layout js_canvas_wrapper_for_wizard_current_step step1">
.

</div>
<div class="wrapper form_layout js_canvas_wrapper_for_wizard_current_step step2">
.

</div>
<div class="wrapper form_layout js_canvas_wrapper_for_wizard_current_step step last_step">
.

</div>
</body>

Other identifiers and  classes are include on each  <section> of the questions (wizard-p-X) y classes 'step_X'
<body>
  <form>
    <div class="section">
      <div id="wizard">
        <section style="" class="body current" id="wizard-p-0" role="tabpanel" aria-labelledby="wizard-h-0" aria-hidden="false">
          <div class="wrapper_row" style="">
            <div class="row js_error_placement_parent step_1">....</div>
          </div>
        </section>
        <section style="" class="body current" id="wizard-p-1" role="tabpanel" aria-labelledby="wizard-h-1" aria-hidden="false">
          <div class="wrapper_row" style="">
            <div class="row js_error_placement_parent step_2">....</div>
          </div>
        </section>
        <section style="" class="body current" id="wizard-p-2" role="tabpanel" aria-labelledby="wizard-h-2" aria-hidden="false">
          <div class="wrapper_row" style="">
            <div class="row js_error_placement_parent step_3">....</div>
          </div>
        </section>
      </div>
    </div>
  </form>
</body>

2.2. General errors.

Each question can show a general error which is shown in a <label> with the "step_error" class
<label id="participation_promo_response_attributes_response_11731-error" class="step_error" for="participation_promo_response_attributes_response_11731">Required field</label>


2.3. Different Type of Questions/Anwers you can include in your Questionnaire or Survey.

Check out the html code for each question and answer below them.

2.3.1. Question with text (and/or image) + written response.

This type is very simple, you only have to ask a question about your products or services or about what your survey or quiz is about and select  the written answer option from the 'answer types'. In this way you will allow the participants to unleash their creativity or openly express their opinion. If you prefer you can accompany the question with an image.

<section style="" class="body current" id="wizard-p-0" role="tabpanel" aria-labelledby="wizard-h-0" aria-hidden="false">
  <div class="wrapper_row" style="">
    <div class="row js_error_placement_parent step_1">
      <div class="m_header_step" data-step="1">
        <h1 class="js_error_placement quizz_question ">¿Qué tres aspectos valoras más a la hora de elegir un destino para viajar?</h1>
        <span class="not_mandatory">(optional)</span>
      </div>

      <div class="form_fields select_row">
        <div class="form_input">
          <span><input type="text" name="participation[promo_response_attributes][response_11728]" id="participation_promo_response_attributes_response_11728"></span>
        </div>
      </div>
    </div><!-- - class=row -->
  </div><!-- - class=wrapper_row -->
</section>

2.3.2. Question with text (and/or image) + answer by star rating between 1 and N.

With this type of answer we will be allowing the participant to give a valuation of between 1 and the maximum number of stars that you decide. It is a resource widely used in opinion polls, when evaluating products or services. Select the Star Rating option from 'answer types' and indicate the maximum number that can be given in the answer.

<section style="display: block;" class="body current" id="wizard-p-1" role="tabpanel" aria-labelledby="wizard-h-1" aria-hidden="false">
  <div class="wrapper_row" style="">
    <div class="row js_error_placement_parent step_2">
      <div class="m_header_step" data-step="2">
        <h1 class="js_error_placement quizz_question required_field">¿Qué valoración le darías al destino que has visitado?</h1>
      </div>

      <div class="form_fields star_row" data-max="10" data-score-name="participation[promo_response_attributes][response_11729]" style="cursor: pointer;">
        <i data-alt="1" class="star-on-png" title="1"></i>&nbsp;
        <i data-alt="2" class="star-off-png" title="2"></i>&nbsp;
        <i data-alt="3" class="star-off-png" title="3"></i>&nbsp;
        <i data-alt="4" class="star-off-png" title="4"></i>&nbsp;
        <i data-alt="5" class="star-off-png" title="5"></i>&nbsp;
        <i data-alt="6" class="star-off-png" title="6"></i>&nbsp;
        <i data-alt="7" class="star-off-png" title="7"></i>&nbsp;
        <i data-alt="8" class="star-off-png" title="8"></i>&nbsp;
        <i data-alt="9" class="star-off-png" title="9"></i>&nbsp;
        <i data-alt="10" class="star-off-png" title="10"></i>
        <input name="participation[promo_response_attributes][response_11729]" type="hidden" value="1">
      </div>
    </div><!-- - class=row -->
  </div><!-- - class=wrapper_row -->
</section>

2.3.3. Question with text (and/or image) + answer using numeric rating.

As for the previous option, this is a type of answer that is frequently used in opinion surveys to evaluate products or services. Through the personalised score you will be able to carry out questionnaires that will allow you to measure the NPS (Net Promoter Score). 
<section style="display: block;" class="body current" id="wizard-p-1" role="tabpanel" aria-labelledby="wizard-h-1" aria-hidden="false">
  <div class="wrapper_row" style="">
    <div class="row js_error_placement_parent step_2">
      <div class="m_header_step" data-step="2">
        <h1 class="js_error_placement quizz_question required_field">¿Qué valoración le darías al destino que has visitado?</h1>
      </div>
      <div class="form_fields star_numbers_row" data-score-name="participation[promo_response_attributes]response_11730">
        <ul class="m_options_list js_star_numbers">
          <li class="star_number_0 star_number">
            <input class="m_option_input js_quizz_radio" type="radio" value="0" name="participation[promo_response_attributes][response_11730]" id="participation_promo_response_attributes_response_11730_0">
            <label class="m_option_label" for="participation_promo_response_attributes_response_11730_0">0</label>
            <span class="b_legend">Muy negativa</span>
          </li>
          <li class="star_number_1 star_number">
            <input class="m_option_input js_quizz_radio" type="radio" value="1" name="participation[promo_response_attributes][response_11730]" id="participation_promo_response_attributes_response_11730_1">
            <label class="m_option_label" for="participation_promo_response_attributes_response_11730_1">1</label>
          </li>
          .
          .
          .
   
          <li class="star_number_10 star_number">
            <input class="m_option_input js_quizz_radio" type="radio" value="10" name="participation[promo_response_attributes][response_11730]" id="participation_promo_response_attributes_response_11730_10">
            <label class="m_option_label" for="participation_promo_response_attributes_response_11730_10">10</label>
            <span class="l_legend">Muy positiva</span>
          </li>
        </ul>
      </div>
    </div><!-- - class=row -->
  </div><!-- - class=wrapper_row -->
</section>


2.3.4. Question with text + reply with drop down.

By setting the type of answer using the drop-down, you will be offering the participants a range of answers that they will have to choose from, limiting them to the options that you put forward. With this type of answer, only one answer can be chosen.

<section style="display: block;" class="body current" id="wizard-p-1" role="tabpanel" aria-labelledby="wizard-h-1" aria-hidden="false">
  <div class="wrapper_row" style="">
    <div class="row js_error_placement_parent step_2">
      <div class="m_header_step" data-step="2">
        <h1 class="js_error_placement quizz_question required_field">¿Qué tipo de alojamiento sueles elegir en tus viajes?
          <label id="participation_promo_response_attributes_response_11731-error" class="step_error" for="participation_promo_response_attributes_response_11731" style="display: none;"></label>
        </h1>
      </div>
      <div class="form_fields select_row">
        <div class="form_select">
          <div class="field_wrap select_field  ">
            <span class="select platform platform57 not_msie custom-form_participation_promo_response_attributes_response_11731 responsive_select">
              <span class="select_content">
                <span class="select_button">
                  <span class="select_button_icon"></span>
                </span>
              </span>
            </span>
            <span class="select_label">
              <select data-custom="true" data-msg-required="Required field" required="required" name="participation[promo_response_attributes][response_11731]" id="participation_promo_response_attributes_response_11731" aria-required="true" class="step_error">
                <option value=""></option>
                <option value="Hotel">Hotel</option>
                <option value="Hostal">Hostal</option>
                <option value="B&amp;B">B&amp;B</option>
                <option value="Apartamento">Apartamento</option>
                <option value="Couchsurfing">Couchsurfing</option>
              </select>
            </span>
          </div>
        </div>
      </div>
    </div><!-- - class=row -->
  </div><!-- - class=wrapper_row -->
</section>

2.3.5. Question with text (and/or image) + answer with text to be chosen from several options.

If we want to create or simple quiz this is the perfect type of question. We ask a question and we offer the participants different options from which to choose one.
<section style="display: block;" class="body current" id="wizard-p-4" role="tabpanel" aria-labelledby="wizard-h-4" aria-hidden="false">
  <div class="wrapper_row" style="">
    <div class="row js_error_placement_parent step_5">
      <div class="m_header_step" data-step="5">
        <h1 class="js_error_placement quizz_question required_field">¿Cuál es tu época preferida del año para viajar?</h1>
      </div>

      <div class="m_options js_quizz_question">
        <ul>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36428" name="participation[promo_response_attributes][response_11732]" id="participation_promo_response_attributes_response_11732_36428" aria-required="true">
              <label class="m_option_label" for="participation_promo_response_attributes_response_11732_36428">Semana Santa</label>
            </div>
          </li>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36429" name="participation[promo_response_attributes][response_11732]" id="participation_promo_response_attributes_response_11732_36429" aria-required="true">
              <label class="m_option_label" for="participation_promo_response_attributes_response_11732_36429">Verano</label>
            </div>
          </li>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36430" name="participation[promo_response_attributes][response_11732]" id="participation_promo_response_attributes_response_11732_36430" aria-required="true">
              <label class="m_option_label" for="participation_promo_response_attributes_response_11732_36430">Navidades</label>
            </div>
          </li>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36431" name="participation[promo_response_attributes][response_11732]" id="participation_promo_response_attributes_response_11732_36431" aria-required="true">
              <label class="m_option_label" for="participation_promo_response_attributes_response_11732_36431">Otros puentes/fiestas</label>
            </div>
          </li>
        </ul>
      </div>
    </div><!-- - class=row -->
  </div><!-- - class=wrapper_row -->
</section>

 

2.3.6. Question with text + answer with text and image to choose from several options.

This option is similar to the previous question type, but we include a photograph. It is a good option for including images of the products or services referred to in the answer.
The size of the personalised images that accompany each answer is 300x168px.
<section style="display: block;" class="body current" id="wizard-p-5" role="tabpanel" aria-labelledby="wizard-h-5" aria-hidden="false">
  <div class="wrapper_row" style="">
    <div class="row js_error_placement_parent step_6">
      <div class="m_header_step" data-step="6">
        <h1 class="js_error_placement quizz_question required_field">¿Cuál de los siguientes capitales europeas te gustaría visitar próximamente?</h1>
      </div>

      <div class="m_options_list js_quizz_question">
        <div class="m_options_list_viewport swiper-container-horizontal">
          <ol class="swiper_m_options_list_content m_options_list_content" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
            <li class="li_wrapper m_options_list_item answer_0 swiper-no-swiping swiper-slide-active" style="width: 629px;">
              <div class="m_options_list_figure">
                <div class="m_badge">
                  <div class="m_badge_content">1</div>
                </div>
                <figure class="m_figure">
                  <div class="m_figure_viewport">
                    <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/:original_paris-2000275_1280.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox">
                      <img width="300" height="375" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/big_paris-2000275_1280.jpg" alt="Big paris 2000275 1280">
                      <span class="click_to_view" style="display: none;">
                        <i class=" fa fa-search-plus  " aria-hidden="true"></i>
                        Zoom
                      </span>
                    </a>
                  </div>
                </figure>
              </div>
              <div class="m_options_list_input">
                <span class="m_options_list_separator"></span>
                <div class="m_option js_ok_ko_class_placement">
                  <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36432" name="participation[promo_response_attributes][response_11733]" id="participation_promo_response_attributes_response_11733_36432" aria-required="true">
                  <label class="m_option_label" for="participation_promo_response_attributes_response_11733_36432">Paris</label>
                </div>
              </div>
            </li>
           
            <li class="li_wrapper m_options_list_item answer_0 swiper-no-swiping swiper-slide-active" style="width: 629px;">
              <div class="m_options_list_figure">
                <div class="m_badge">
                  <div class="m_badge_content">2</div>
                </div>
                <figure class="m_figure">
                  <div class="m_figure_viewport">
                    <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/:original_paris-2000275_1280.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox">
                      <img width="300" height="375" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/big_paris-2000275_1280.jpg" alt="Big paris 2000275 1280">
                      <span class="click_to_view" style="display: none;">
                        <i class=" fa fa-search-plus  " aria-hidden="true"></i>
                        Zoom
                      </span>
                    </a>
                  </div>
                </figure>
              </div>
              <div class="m_options_list_input">
                <span class="m_options_list_separator"></span>
                <div class="m_option js_ok_ko_class_placement">
                  <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36432" name="participation[promo_response_attributes][response_11733]" id="participation_promo_response_attributes_response_11733_36432" aria-required="true">
                  <label class="m_option_label" for="participation_promo_response_attributes_response_11733_36432">Berlín</label>
                </div>
              </div>
            </li>
            .
            .
            .
          </ol>
        </div>
        <div class="m_options_pagination swiper-pagination-clickable swiper-pagination-bullets">
          <span class="m_options_page m_options_page_active"></span>
          <span class="m_options_page"></span>
          <span class="m_options_page"></span>
          <span class="m_options_page"></span>
          <span class="m_options_page"></span>
        </div>
      </div>
    </div><!-- - class=row -->
  </div><!-- - class=wrapper_row -->
</section>

2.3.7. Question with text + answer with text, image and description to choose from several options.

This type of answer adds a description to each answer option. In the descriptions of our example we refer to the different locations of the images, but if we refer to our products or services in the quiz, we could include the name, price or even the reference of them.

<section style="display: block;" class="body current" id="wizard-p-5" role="tabpanel" aria-labelledby="wizard-h-5" aria-hidden="false">
  <div class="wrapper_row" style="">
    <div class="row js_error_placement_parent step_6">
      <div class="m_header_step" data-step="6">
        <h1 class="js_error_placement quizz_question required_field">¿Qué es lo qué más te interesa de una ciudad/país a la hora de elegirlo como destino? (imagen)
</h1>
      </div>

      <div class="m_options_list js_quizz_question">
        <div class="m_options_list_viewport swiper-container-horizontal">
          <ol class="swiper_m_options_list_content m_options_list_content" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
            <li class="li_wrapper m_options_list_item answer_0 swiper-no-swiping swiper-slide-active" style="width: 629px;">
              <div class="m_options_list_figure">
                <div class="m_badge">
                  <div class="m_badge_content">1</div>
                </div>
                <figure class="m_figure">
                  <div class="m_figure_viewport">
                    <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/:original_paris-2000275_1280.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox">
                      <img width="300" height="375" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/big_paris-2000275_1280.jpg" alt="Big paris 2000275 1280">
                      <span class="click_to_view" style="display: none;">
                        <i class=" fa fa-search-plus  " aria-hidden="true"></i>
                        Zoom
                      </span>
                    </a>
                  </div>
                </figure>
              </div>
              <div class="m_options_list_input">
                <span class="m_options_list_separator"></span>
                <div class="m_option js_ok_ko_class_placement">
                  <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36432" name="participation[promo_response_attributes][response_11733]" id="participation_promo_response_attributes_response_11733_36432" aria-required="true">
                  <label class="m_option_label" for="participation_promo_response_attributes_response_11733_36432">Paris</label>
                </div>
                <span class="image_description">Catedral de Santa María del Fiore, Florencia (Italia)</span>
              </div>
            </li>
           
            <li class="li_wrapper m_options_list_item answer_0 swiper-no-swiping swiper-slide-active" style="width: 629px;">
              <div class="m_options_list_figure">
                <div class="m_badge">
                  <div class="m_badge_content">2</div>
                </div>
                <figure class="m_figure">
                  <div class="m_figure_viewport">
                    <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/:original_paris-2000275_1280.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox">
                      <img width="300" height="375" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/big_paris-2000275_1280.jpg" alt="Big paris 2000275 1280">
                      <span class="click_to_view" style="display: none;">
                        <i class=" fa fa-search-plus  " aria-hidden="true"></i>
                        Zoom
                      </span>
                    </a>
                  </div>
                </figure>
              </div>
              <div class="m_options_list_input">
                <span class="m_options_list_separator"></span>
                <div class="m_option js_ok_ko_class_placement">
                  <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36432" name="participation[promo_response_attributes][response_11733]" id="participation_promo_response_attributes_response_11733_36432" aria-required="true">
                  <label class="m_option_label" for="participation_promo_response_attributes_response_11733_36432">Berlín</label>
                </div>
                <span class="image_description">Tonkotsu ramen (Japón)</span>
              </div>
            </li>
            .
            .
            .
          </ol>
        </div>
        <div class="m_options_pagination swiper-pagination-clickable swiper-pagination-bullets">
          <span class="m_options_page m_options_page_active"></span>
          <span class="m_options_page"></span>
          <span class="m_options_page"></span>
          <span class="m_options_page"></span>
          <span class="m_options_page"></span>
        </div>
      </div>
    </div><!-- - class=row -->
  </div><!-- - class=wrapper_row -->
</section>

2.3.8. Question with text + answer with images to choose from several options.

This answer option can be used if we want to create a quiz or very visual survey or if for example the participants have to guess a character, destination, etc. with the information that is given when formulating the question.

<section style="display: block;" class="body current" id="wizard-p-7" role="tabpanel" aria-labelledby="wizard-h-7" aria-hidden="false">
  <div class="wrapper_row" style="">
    <div class="row js_error_placement_parent step_8">
      <div class="m_header_step" data-step="8">
        <h1 class="js_error_placement quizz_question required_field">¿Cuál de los siguientes país te gustaría visitar?</h1>
      </div>

      <div class="m_options_list js_quizz_question">
        <div class="m_options_list_viewport swiper-container-horizontal">
          <ol class="swiper_m_options_list_content m_options_list_content_no_carrousel" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
            <li class="radio_wrapper li_wrapper only_image  answer_0">
              <div class="m_options_list_figure js_ok_ko_class_placement">
                <figure class="m_figure">
                  <div class="m_figure_viewport">
                    <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/8375c5d0096511e7b4a6e152aee220c2/:original_Flag_of_Japan.svg.png" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox">
                      <img width="300" height="200" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/8375c5d0096511e7b4a6e152aee220c2/big_Flag_of_Japan.svg.png" alt="Big flag of japan.svg">
                      <span class="click_to_view" style="display: none;">
                        <i class=" fa fa-search-plus  " aria-hidden="true"></i>
                        Zoom
                      </span>
                    </a>
                  </div>
                </figure>
                <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36468" name="participation[promo_response_attributes][response_11735]" id="participation_promo_response_attributes_response_11735_36468" aria-required="true">
              </div>
            </li>
            <li class="radio_wrapper li_wrapper only_image  answer_1">
              <div class="m_options_list_figure js_ok_ko_class_placement">
                <figure class="m_figure">
                  <div class="m_figure_viewport">
                    <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/95059f50096511e7b83dd1a14f5cf8f0/:original_usa-31021_960_720.png" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox">
                      <img width="300" height="158" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/95059f50096511e7b83dd1a14f5cf8f0/big_usa-31021_960_720.png" alt="Big usa 31021 960 720">
                      <span class="click_to_view" style="display: none;">
                        <i class=" fa fa-search-plus  " aria-hidden="true"></i>
                        Zoom
                      </span>
                    </a>
                  </div>
                </figure>
                <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36469" name="participation[promo_response_attributes][response_11735]" id="participation_promo_response_attributes_response_11735_36469" aria-required="true">
              </div>
            </li>
            .
            .
            .

          </ol>
        </div>
        <div class="m_options_pagination swiper-pagination-clickable swiper-pagination-bullets">
          <span class="m_options_page m_options_page_active"></span>
        </div>
      </div>
    </div><!-- - class=row -->
  </div><!-- - class=wrapper_row -->
</section>

2.3.9. Question with text and image + answer with image and description to be chosen from several options.

We can ask the question in our quiz or questionnaire through text, image or both options. For this type of question, the text is accompanied by an image and in the answer type the participants are given different images with accompanying descriptions as a legend, from which they must choose one.
If you decide to include an image that either contains the question or accompanies the question, you should know that the optimal size of the images for the personalised questions is 628x353px.

<section style="display: block;" class="body current" id="wizard-p-8" role="tabpanel" aria-labelledby="wizard-h-8" aria-hidden="false">
  <div class="wrapper_row" style="">
    <div class="row js_error_placement_parent step_9">
      <div class="m_header_step" data-step="9">
        <h1 class="js_error_placement quizz_question required_field">¿Qué no puede faltar nunca en tu maleta?</h1>
      </div>

      <div class="m_figure_options js_question_image_wrapper">
        <div class="m_figure_options_content js_after_answering_image_wrapper_if_no_image" style="">
          <div class="m_badge m_badge_icon">
            <div class="m_badge_content">
              <span class="icn_watch icn">1</span>
            </div>  
          </div>

          <figure class="m_figure">
            <div class="m_figure_viewport">
              <a href="#" class="m_figure_content m_figure_content_image image_lightbox" data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_images/5dc25db0096711e7b83dd1a14f5cf8f0/:original_maleta.jpg" data-after-href="">
                <img width="672" height="448" class="m_figure_img js_question_image" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_images/5dc25db0096711e7b83dd1a14f5cf8f0/big_maleta.jpg" alt="Big maleta">
                
                <span class="click_to_view" style="display: none;"><i class=" fa fa-search-plus  " aria-hidden="true"></i>Zoom</span>
              </a>
            </div>
          </figure>

        </div>
        <div class="m_figure_options_values">
          <div class="m_options_list js_quizz_question">
            <div class="m_options_list_viewport swiper-container-horizontal">
              <ol class="swiper_m_options_list_content m_options_list_content" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
                <li class="li_wrapper m_options_list_item answer_0 swiper-no-swiping swiper-slide-active" style="width: 629px;">
                  <div class="m_options_list_figure">
                    <div class="m_badge">
                      <div class="m_badge_content">1</div>
                    </div>
                    <figure class="m_figure">
                      <div class="m_figure_viewport">
                        <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/a30593f0096811e7b83dd1a14f5cf8f0/:original_feet-1840619_960_720.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox">
                          <img width="300" height="200" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/a30593f0096811e7b83dd1a14f5cf8f0/big_feet-1840619_960_720.jpg" alt="Big feet 1840619 960 720">
                          <span class="click_to_view" style="display: none;">
                            <i class=" fa fa-search-plus  " aria-hidden="true"></i>
                            Zoom
                          </span>
                        </a>
                      </div>
                    </figure>
                  </div>
                  <div class="m_options_list_input">
                    <span class="m_options_list_separator"></span>
                    <div class="m_option js_ok_ko_class_placement">
                      <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36473" name="participation[promo_response_attributes][response_11736]" id="participation_promo_response_attributes_response_11736_36473" aria-required="true">
                      <label class="m_option_label" for="participation_promo_response_attributes_response_11736_36473">
                        Calzado cómodo para patear la ciudad
                      </label>
                    </div>
                    <span class="image_description">
                      Zapatillas BRZ 
                    </span>
                  </div>
                </li>
                <li class="li_wrapper m_options_list_item answer_1 swiper-no-swiping swiper-slide-next" style="width: 629px;">
                  <div class="m_options_list_figure">
                    <div class="m_badge">
                      <div class="m_badge_content">2</div>
                    </div>
                    <figure class="m_figure">
                      <div class="m_figure_viewport">
                        <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/182dc130096811e795ec61a13e96826b/:original_monopod-785688_640-_1_.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox">
                          <img width="300" height="200" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/182dc130096811e795ec61a13e96826b/big_monopod-785688_640-_1_.jpg" alt="Big monopod 785688 640  1 ">
                          <span class="click_to_view">
                            <i class=" fa fa-search-plus  " aria-hidden="true"></i>
                            Zoom
                          </span>
                        </a>
                      </div>
                    </figure>
                  </div>
                  <div class="m_options_list_input">
                    <span class="m_options_list_separator"></span>
                    <div class="m_option js_ok_ko_class_placement">
                      <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36474" name="participation[promo_response_attributes][response_11736]" id="participation_promo_response_attributes_response_11736_36474" aria-required="true">
                      <label class="m_option_label" for="participation_promo_response_attributes_response_11736_36474">
                        Palo selfie
                      </label>
                    </div>
                    <span class="image_description">
                      Palo selfie con disparador automático, EPICShopping
                    </span>
                  </div>
                </li>
                .
                .
                .
              </ol>
            </div>
            <div class="m_options_pagination swiper-pagination-clickable swiper-pagination-bullets">
              <span class="m_options_page m_options_page_active"></span>
              <span class="m_options_page"></span>
            </div>
          </div>
        </div>
      </div>
    </div><!-- - class=row -->
  </div><!-- - class=wrapper_row -->
</section>

2.3.10. Question with text and video + text answer to choose from several options.

Another option that we have when formulating the question for our quiz or questionnaire is to include a video about which participants have to respond. The optimal size for the video to be displayed correctly and for participants not to have to scroll too much is 560x315px 
To add the video you have to include the html of the video below in the same section in which you include the question.
In our case it would be:
¿Sabrías decirnos qué ciudad española se esconde en el vídeo? 
<div class="aspect-ratio"><iframe width="560" height="315" src="https://www.youtube.com/embed/zOIawcK13DI" frameborder="0" allowfullscreen></iframe></div>


<section style="display: block;" class="body current" id="wizard-p-9" role="tabpanel" aria-labelledby="wizard-h-9" aria-hidden="false">
  <div class="wrapper_row" style="">
    <div class="row js_error_placement_parent step_10">
      <div class="m_header_step" data-step="10">
        <h1 class="js_error_placement quizz_question required_field">
          ¿Sabrías decirnos qué ciudad española se esconde en el vídeo? <div class="aspect-ratio"><iframe width="560" height="315" src="https://www.youtube.com/embed/zOIawcK13DI" frameborder="0" allowfullscreen></iframe></div>
        </h1>
      </div>

      <div class="m_options js_quizz_question">
        <ul>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36479" name="participation[promo_response_attributes][response_11737]" id="participation_promo_response_attributes_response_11737_36479" aria-required="true">
              <label class="m_option_label" for="participation_promo_response_attributes_response_11737_36479">Sevilla</label>
            </div>
          </li>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36480" name="participation[promo_response_attributes][response_11737]" id="participation_promo_response_attributes_response_11737_36480" aria-required="true"
              ><label class="m_option_label" for="participation_promo_response_attributes_response_11737_36480">Valencia</label>
            </div>
          </li>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36481" name="participation[promo_response_attributes][response_11737]" id="participation_promo_response_attributes_response_11737_36481" aria-required="true">
              <label class="m_option_label" for="participation_promo_response_attributes_response_11737_36481">Madrid</label>
            </div>
          </li>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36482" name="participation[promo_response_attributes][response_11737]" id="participation_promo_response_attributes_response_11737_36482" aria-required="true"><label class="m_option_label" for="participation_promo_response_attributes_response_11737_36482">Bilbao</label>
            </div>
          </li>
        </ul>
      </div>
    </div><!-- - class=row -->
  </div><!-- - class=wrapper_row -->
</section>

2.3.11. Question with text + video answer to choose from several options.

A second type that includes video is the one that allows for inclusion of video in the answers section. To upload the different videos as answers, you have to paste the html of the video you want to upload in each section to be used as an answer. For example: <iframe width="450" height="250" src="https://www.youtube.com/embed/hK7EHGv35Dk" frameborder="0" allowfullscreen></iframe></p>
The size of videos is automatically adjusted to 230x230px, as it allows them to be correctly displayed.

<section style="display: block;" class="body current" id="wizard-p-10" role="tabpanel" aria-labelledby="wizard-h-10" aria-hidden="false">
  <div class="wrapper_row" style="">
    <div class="row js_error_placement_parent step_11">
      <div class="m_header_step" data-step="11">
        <h1 class="js_error_placement quizz_question required_field">¿En cuál de nuestros hoteles te gustaría poder alojarte?</h1>
      </div>

      <div class="m_options js_quizz_question">
        <ul>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36483" name="participation[promo_response_attributes][response_11738]" id="participation_promo_response_attributes_response_11738_36483" aria-required="true">
              <label class="m_option_label" for="participation_promo_response_attributes_response_11738_36483">
                <iframe width="450" height="250" src="https://www.youtube.com/embed/hK7EHGv35Dk" frameborder="0" allowfullscreen=""></iframe><p></p>
              </label>
            </div>
          </li>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36483" name="participation[promo_response_attributes][response_11738]" id="participation_promo_response_attributes_response_11738_36483" aria-required="true">
              <label class="m_option_label" for="participation_promo_response_attributes_response_11738_36483">
                <iframe width="450" height="250" src="https://www.youtube.com/embed/hK7EHGv35Dk" frameborder="0" allowfullscreen=""></iframe><p></p>
              </label>
            </div>
          </li>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36483" name="participation[promo_response_attributes][response_11738]" id="participation_promo_response_attributes_response_11738_36483" aria-required="true">
              <label class="m_option_label" for="participation_promo_response_attributes_response_11738_36483">
                <iframe width="450" height="250" src="https://www.youtube.com/embed/hK7EHGv35Dk" frameborder="0" allowfullscreen=""></iframe><p></p>
              </label>
            </div>
          </li>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36483" name="participation[promo_response_attributes][response_11738]" id="participation_promo_response_attributes_response_11738_36483" aria-required="true">
              <label class="m_option_label" for="participation_promo_response_attributes_response_11738_36483">
                <iframe width="450" height="250" src="https://www.youtube.com/embed/hK7EHGv35Dk" frameborder="0" allowfullscreen=""></iframe><p></p>
              </label>
            </div>
          </li>
        </ul>
      </div>
    </div><!-- - class=row -->
  </div><!-- - class=wrapper_row -->
</section>

2.3.12. Question with text and image + answer using videos to choose from several options.

A third possibility that Cool Tabs offers to you is to include text in addition to the video in the answer. In our example we have also included an image that accompanies the question.

<section style="display: block;" class="body current" id="wizard-p-11" role="tabpanel" aria-labelledby="wizard-h-11" aria-hidden="false">
  <div class="wrapper_row" style="">
    <div class="row js_error_placement_parent step_12">
      <div class="m_header_step" data-step="12">
        <h1 class="js_error_placement quizz_question required_field">¿Qué actividad de aventura no puede faltar en tus viajes?</h1>
      </div>

      <div class="m_figure_options js_question_image_wrapper">
        <div class="m_figure_options_content js_after_answering_image_wrapper_if_no_image" style="">
          <div class="m_badge m_badge_icon">
            <div class="m_badge_content">
              <span class="icn_watch icn">1</span>
            </div>  
          </div>

          <figure class="m_figure">
            <div class="m_figure_viewport">
              <a href="#" class="m_figure_content m_figure_content_image image_lightbox" data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_images/3c1e90c0097111e79e565f9704070fcf/:original_mountain-biking-1210066_960_720.jpg" data-after-href="">
                <img width="672" height="504" class="m_figure_img js_question_image" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_images/3c1e90c0097111e79e565f9704070fcf/big_mountain-biking-1210066_960_720.jpg" alt="Big mountain biking 1210066 960 720">
                <span class="click_to_view" style="display: none;"><i class=" fa fa-search-plus  " aria-hidden="true"></i>Zoom</span>
              </a>
            </div>
          </figure>

        </div>
        <div class="m_figure_options_values">
          <div class="m_options js_quizz_question">
            <ul>
              <li>
                <div class="m_option js_ok_ko_class_placement">
                  <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36487" name="participation[promo_response_attributes][response_11739]" id="participation_promo_response_attributes_response_11739_36487" aria-required="true">
                  <label class="m_option_label" for="participation_promo_response_attributes_response_11739_36487">Buceo 
                    <iframe width="450" height="250" src="https://www.youtube.com/embed/x77Sb0TkHIE" frameborder="0" allowfullscreen=""></iframe>
                  </label>
                </div>
              </li>
              <li>
                <div class="m_option js_ok_ko_class_placement">
                  <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36487" name="participation[promo_response_attributes][response_11739]" id="participation_promo_response_attributes_response_11739_36487" aria-required="true">
                  <label class="m_option_label" for="participation_promo_response_attributes_response_11739_36487">Senderismo 
                    <iframe width="450" height="250" src="https://www.youtube.com/embed/x77Sb0TkHIE" frameborder="0" allowfullscreen=""></iframe>
                  </label>
                </div>
              </li>
              <li>
                <div class="m_option js_ok_ko_class_placement">
                  <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36487" name="participation[promo_response_attributes][response_11739]" id="participation_promo_response_attributes_response_11739_36487" aria-required="true">
                  <label class="m_option_label" for="participation_promo_response_attributes_response_11739_36487">Montar en bicicleta 
                    <iframe width="450" height="250" src="https://www.youtube.com/embed/x77Sb0TkHIE" frameborder="0" allowfullscreen=""></iframe>
                  </label>
                </div>
              </li>
              <li>
                <div class="m_option js_ok_ko_class_placement">
                  <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36487" name="participation[promo_response_attributes][response_11739]" id="participation_promo_response_attributes_response_11739_36487" aria-required="true">
                  <label class="m_option_label" for="participation_promo_response_attributes_response_11739_36487">Esqui 
                    <iframe width="450" height="250" src="https://www.youtube.com/embed/x77Sb0TkHIE" frameborder="0" allowfullscreen=""></iframe>
                  </label>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div><!-- - class=row -->
  </div><!-- - class=wrapper_row -->
</section>

2.3.13. Text and background image for question + answer with text to be chosen from several options.

If you have chosen to create a quiz or questionnaire this as visual as possible, we recommend this type of question, which includes a background image with the question and different answers, from which the participant will have to select one.
In this case, the size of the background image is 660x660px. In order not to distort the image, we recommend that you choose a square photograph.
As for the number of answers you can include, there is no maximum but be aware that it is optimised for a maximum of eight. If you're going to include more, make sure that the result you end up with fits with what you need.

<section style="background-image: url(&quot;https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_background_images/0d6ac6c0097311e7b88edb2866430f12/big_calendario-viajes.png&quot;); min-height: 628px; display: block;" class="question_bg body current" id="wizard-p-12" role="tabpanel" aria-labelledby="wizard-h-12" aria-hidden="false">
  <div class="wrapper_row" style="min-height: 628px;line-height: 628px;">
    <div class="row js_error_placement_parent step_13">
      <div class="m_header_step" data-step="13">
        <h1 class="js_error_placement quizz_question required_field">Eres de los que planifican su viaje...</h1>
      </div>

      <div class="m_options js_quizz_question">
        <ul>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36491" name="participation[promo_response_attributes][response_11740]" id="participation_promo_response_attributes_response_11740_36491" aria-required="true">
              <label class="m_option_label" for="participation_promo_response_attributes_response_11740_36491">Una semana antes</label>
            </div>
          </li>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36492" name="participation[promo_response_attributes][response_11740]" id="participation_promo_response_attributes_response_11740_36492" aria-required="true">
              <label class="m_option_label" for="participation_promo_response_attributes_response_11740_36492">El día de antes busco qué visitar en Internet</label>
            </div>
          </li>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36493" name="participation[promo_response_attributes][response_11740]" id="participation_promo_response_attributes_response_11740_36493" aria-required="true">
              <label class="m_option_label" for="participation_promo_response_attributes_response_11740_36493">Meses antes ¡Me gusta estar preparado!</label>
            </div>
          </li>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36494" name="participation[promo_response_attributes][response_11740]" id="participation_promo_response_attributes_response_11740_36494" aria-required="true">
              <label class="m_option_label" for="participation_promo_response_attributes_response_11740_36494">¿Panificar? Viajo a la aventura</label>
            </div>
          </li>
        </ul>
      </div>
    </div><!-- - class=row -->
  </div><!-- - class=wrapper_row -->
</section>

2.3.14. Question with text + multiple answers with text.

We have seen different examples with the option to select a single answer, but there is also the possibility that participants have to choose their answer from a range of options and can select any quantity between zero and all of them. To do this, select the multiple answer option from 'answer types'.
We can set it up in the indicated section that the user has to select between a minimum and a maximum number of answers for that question. That way, if you do not select the minimum number or try to select more, the application will tell you that you cannot go to the next question.

<section style="display: block;" class="body current" id="wizard-p-13" role="tabpanel" aria-labelledby="wizard-h-13" aria-hidden="false">
  <div class="wrapper_row" style="">
    <div class="row js_error_placement_parent step_14">
      <div class="m_header_step" data-step="14">
        <h1 class="js_error_placement quizz_question required_field">¿Qué tipo de viajero eres?</h1>
      </div>
      <div class="m_options js_quizz_question">
        <ul>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input name="participation[promo_response_attributes][response_11741][]" type="hidden" value="0"><input class="m_option_input js_quizz_check_box" title="You should choose between 1 and 7 options" data-rule-required="true" minlength="1" maxlength="7" type="checkbox" value="36495" name="participation[promo_response_attributes][response_11741][]" id="participation_promo_response_attributes_response_11741_36495" aria-required="true">
              <label class="m_option_label" for="participation_promo_response_attributes_response_11741_36495">Mochilero</label>
            </div>
          </li>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input name="participation[promo_response_attributes][response_11741][]" type="hidden" value="0"><input class="m_option_input js_quizz_check_box" title="You should choose between 1 and 7 options" data-rule-required="true" minlength="1" maxlength="7" type="checkbox" value="36495" name="participation[promo_response_attributes][response_11741][]" id="participation_promo_response_attributes_response_11741_36495" aria-required="true">
              <label class="m_option_label" for="participation_promo_response_attributes_response_11741_36495">Mochilero</label>
            </div>
          </li>
          <li>
            <div class="m_option js_ok_ko_class_placement">
              <input name="participation[promo_response_attributes][response_11741][]" type="hidden" value="0"><input class="m_option_input js_quizz_check_box" title="You should choose between 1 and 7 options" data-rule-required="true" minlength="1" maxlength="7" type="checkbox" value="36495" name="participation[promo_response_attributes][response_11741][]" id="participation_promo_response_attributes_response_11741_36495" aria-required="true">
              <label class="m_option_label" for="participation_promo_response_attributes_response_11741_36495">Mochilero</label>
            </div>
          </li>
          ...
          ...


        </ul>
      </div>
    </div><!-- - class=row -->
  </div><!-- - class=wrapper_row -->
</section>

2.3.15. Question with text + multiple answers with images.

Another option for our quiz or questionnaire using multiple answers is to include images instead of text. In this way, the participants would have to choose their answer from several images.

<section style="display: block;" class="body current" id="wizard-p-15" role="tabpanel" aria-labelledby="wizard-h-15" aria-hidden="false">
  <div class="wrapper_row" style="">
    <div class="row js_error_placement_parent step_16">
      <div class="m_header_step" data-step="16">
        <h1 class="js_error_placement quizz_question required_field">¿Qué medio de transporte sueles utilizar para desplazarte cuando visitas una ciudad?</h1>
      </div>
      <div class="m_options_list js_quizz_question">
        <div class="m_options_list_viewport swiper-container-horizontal">
          <ol class="swiper_m_options_list_content m_options_list_content_no_carrousel" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
            <li class="checkbox_wrapper li_wrapper only_image  answer_0">
              <div class="m_options_list_figure js_ok_ko_class_placement">
                <figure class="m_figure">
                  <div class="m_figure_viewport">
                    <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/0d779b30097711e7962c15a61e8c5521/:original_metro.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox">
                      <img width="300" height="200" class="m_figure_img active" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/0d779b30097711e7962c15a61e8c5521/big_metro.jpg" alt="Big metro">
                      <span class="click_to_view" style="display: none;">
                        <i class=" fa fa-search-plus  " aria-hidden="true"></i>
                        Zoom
                      </span>
                    </a>
                  </div>
                </figure>
                <input name="participation[promo_response_attributes][response_11743][]" type="hidden" value="0">
                <input class="m_option_input js_quizz_check_box" title="You should choose between 1 and 4 options" data-rule-required="true" minlength="1" maxlength="4" data-ok="-1" type="checkbox" value="36507" name="participation[promo_response_attributes][response_11743][]" id="participation_promo_response_attributes_response_11743_36507" aria-required="true">
              </div>
            </li>
            <li class="checkbox_wrapper li_wrapper only_image  answer_0">
              <div class="m_options_list_figure js_ok_ko_class_placement">
                <figure class="m_figure">
                  <div class="m_figure_viewport">
                    <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/0d779b30097711e7962c15a61e8c5521/:original_metro.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox">
                      <img width="300" height="200" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/0d779b30097711e7962c15a61e8c5521/big_metro.jpg" alt="Big metro">
                      <span class="click_to_view" style="display: none;">
                        <i class=" fa fa-search-plus  " aria-hidden="true"></i>
                        Zoom
                      </span>
                    </a>
                  </div>
                </figure>
                <input name="participation[promo_response_attributes][response_11743][]" type="hidden" value="0">
                <input class="m_option_input js_quizz_check_box" title="You should choose between 1 and 4 options" data-rule-required="true" minlength="1" maxlength="4" data-ok="-1" type="checkbox" value="36507" name="participation[promo_response_attributes][response_11743][]" id="participation_promo_response_attributes_response_11743_36507" aria-required="true">
              </div>
            </li>
            .
            .
            .

          </ol>
        </div>
        <div class="m_options_pagination swiper-pagination-clickable swiper-pagination-bullets">
          <span class="m_options_page m_options_page_active"></span>
        </div>
      </div>
    </div><!-- - class=row -->
  </div><!-- - class=wrapper_row -->
</section>

The picture chosen by the user has the class 'active'.

2.3.16. Question with text and image + answer with text to be chosen from several options + 'correct answer' feedback.

This is one of the most used question types used in quizzes. A question is created that can be accompanied by an image and the user is given different answers from which they have to choose one. They are immediately told if they have been successful or not and given feedback that usually includes text that explains the correct answer.

 

<section style="display: block;" class="body current" id="wizard-p-14" role="tabpanel" aria-labelledby="wizard-h-14" aria-hidden="false">
  <div class="wrapper_row" style="">
    <div class="row js_error_placement_parent step_15">
      <div class="m_header_step" data-step="15">
        <h1 class="js_error_placement quizz_question required_field">¿Qué ciudad ha sido la más visitada del mundo en 2016?</h1>
      </div>

      <div class="m_figure_options js_question_image_wrapper">
        <div class="m_figure_options_content js_after_answering_image_wrapper_if_no_image" style="">
          <div class="m_badge m_badge_icon">
            <div class="m_badge_content">
              <span class="icn_watch icn">1</span>
            </div>  
          </div>

          <figure class="m_figure">
            <div class="m_figure_viewport">
              <a href="#" class="m_figure_content m_figure_content_image image_lightbox" data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_images/81040f40097511e7b9cfbfec2e91e13e/:original_turistas.jpg" data-after-href="">
                <img width="628" height="353" class="m_figure_img js_question_image" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_images/81040f40097511e7b9cfbfec2e91e13e/big_turistas.png" alt="Big turistas">
                
                <span class="click_to_view" style="display: none;"><i class=" fa fa-search-plus  " aria-hidden="true"></i>Zoom</span>
              </a>
            </div>
          </figure>

        </div>
        <div class="m_figure_options_values">
          <div class="m_options js_quizz_question">
            <ul>
              <li>
                <div class="m_option js_ok_ko_class_placement">
                  <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36503" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36503" aria-required="true">
                  <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36503">Londres</label>
                </div>
              </li>
              <li>
                <div class="m_option js_ok_ko_class_placement">
                  <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36503" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36503" aria-required="true">
                  <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36503">Nueva York</label>
                </div>
              </li>
              <li>
                <div class="m_option js_ok_ko_class_placement">
                  <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36503" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36503" aria-required="true">
                  <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36503">Bangkok</label>
                </div>
              </li>
              <li>
                <div class="m_option js_ok_ko_class_placement">
                  <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36503" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36503" aria-required="true">
                  <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36503">Tokio</label>
                </div>
              </li>                            
            </ul>
          </div>
        </div>
      </div>
    </div><!-- - class=row -->
  </div><!-- - class=wrapper_row -->
</section>

If the user gives a right answer, this would be the html,(the right answer is shown with 'js_answer_ok' and the class '.js_quizz_question_ok' is added to the button with the right answer):

<div class="m_figure_options_values">
  <div class="m_options js_quizz_question">
    <div style="" class="js_answer_ok">¡Correcto! Según el estudio Global Destination Cities Index (GDCI), Bangkok es la ciudad del mundo que más turistas ha atraído en 2016. En concreto a 21,47 millones. ¡Asía está de moda!
    </div>
    <div style="display: none;" class="js_answer_ko">Fallaste... Según el estudio Global Destination Cities Index (GDCI), Bangkok es la ciudad del mundo que más turistas ha atraído en 2016. En concreto a 21,47 millones. ¡Asía está de moda!
    </div>
    <ul>
      <li>
        <div class="m_option js_ok_ko_class_placement">
          <input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="-1" type="radio" value="36503" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36503" aria-required="true" disabled="disabled">
          <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36503">Londres</label>
        </div>
      </li>
      <li>
        <div class="m_option js_ok_ko_class_placement">
          <input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="-1" type="radio" value="36504" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36504" aria-required="true" disabled="disabled">
          <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36504">Nueva York</label>
        </div>
      </li>
      <li>
        <div class="m_option js_ok_ko_class_placement js_quizz_question_ok">
          <input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="1" type="radio" value="36505" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36505" aria-required="true" aria-invalid="false"><label class="m_option_label" for="participation_promo_response_attributes_response_11742_36505">Bangkok</label>
        </div>
      </li>
      <li>
        <div class="m_option js_ok_ko_class_placement"><input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="-1" type="radio" value="36506" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36506" aria-required="true" disabled="disabled">
          <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36506">Tokio</label>
        </div>
      </li>
    </ul>
  </div>
</div>

If the user gives a wrong answer.
<div class="m_figure_options_values">
  <div class="m_options js_quizz_question">
    <div style="display: none;" class="js_answer_ok">¡Correcto! Según el estudio Global Destination Cities Index (GDCI), Bangkok es la ciudad del mundo que más turistas ha atraído en 2016. En concreto a 21,47 millones. ¡Asía está de moda!
    </div>
    <div style="" class="js_answer_ko">Fallaste... Según el estudio Global Destination Cities Index (GDCI), Bangkok es la ciudad del mundo que más turistas ha atraído en 2016. En concreto a 21,47 millones. ¡Asía está de moda!
    </div>
    <ul>
      <li>
        <div class="m_option js_ok_ko_class_placement js_quizz_question_ko">
          <input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="-1" type="radio" value="36503" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36503" aria-required="true" disabled="disabled">
          <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36503">Londres</label>
        </div>
      </li>
      <li>
        <div class="m_option js_ok_ko_class_placement">
          <input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="-1" type="radio" value="36504" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36504" aria-required="true" disabled="disabled">
          <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36504">Nueva York</label>
        </div>
      </li>
      <li>
        <div class="m_option js_ok_ko_class_placement js_quizz_question_ok">
          <input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="1" type="radio" value="36505" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36505" aria-required="true" aria-invalid="false"><label class="m_option_label" for="participation_promo_response_attributes_response_11742_36505">Bangkok</label>
        </div>
      </li>
      <li>
        <div class="m_option js_ok_ko_class_placement"><input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="-1" type="radio" value="36506" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36506" aria-required="true" disabled="disabled">
          <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36506">Tokio</label>
        </div>
      </li>
    </ul>
  </div>
</div>

//usounoul.com/4/4302823
//usounoul.com/4/4302823
//usounoul.com/4/4302823
Name

100+ Beauty Tips Everyone Should Know,1,10th,1,12th,1,15 Amazing Summer Party Tops,1,332 sahayak sachiv posts,1,4g volte lte,5,5g sim india,1,A Tip about Free Websites,18,About Us,1,Accessories,1,Adah Sharma,1,Adah Sharma bold bird,2,aditi rao,1,aditi rao hydari,1,aditi rao hydari beutiful,1,aditi rao hydari bollywood,1,aditi rao hydari sexy,1,Admit Card 2016,1,Admit Card 2016 Hall Ticket,1,admit card Punjab Patwari,1,age in banking,1,AGRICET 2017 Andhra Pradesh,1,Air India Pilot Vacancies,1,Alia Bhatt,1,alia bhatt bikini,2,alia bhatt cleavage armpits,2,alia bhatt naked,2,alia bhatt sexy,2,alia bhatt topless,2,All India Government Exams Scheduled,1,Alternatives to Adsense,1,Amayra Dastur,1,Amazing Ankita Lokhande,1,Amazing Hina Khan,1,Ameesha Patel lost beauty,1,Ananya Panday,1,ANSWER KEY,1,Anushka Sharma Boldest Photos,1,Anushka Sharma to be kohli,2,appost.in,1,armpit,1,armpits,1,Army Public School Admit Card 2016 Download AWES APS Hall Ticket,1,Army Public School Download AWES APS Hall,1,Ashwani Bold Sexy Saree Photoshoot armpits cleavage amazing,1,Astrology Consultation And Readings,1,Astrology services,1,Athiya Shetty,1,Australia Places must be visited,1,Bakery,4,bank exams syllabus,1,Bank of Baroda Recruitment,1,Bank of Baroda Recruitment 2016 Post of Specialist Officer,1,banking for general class,1,Baywatch priyanka chopra,1,beautiful deepika,4,Beautiful Historical Forts in India Must Visited,1,Beauty of South Samantha,1,Bengali Mehndi Designs,1,Best Places to Visit in Himachal Pradesh india,1,Best Trendy Shoes for Women in fashion,1,beutiful deepika,2,bikini,1,bikini sonam,1,Blog,6,Blouse Back Neck Designs in Fashion,1,Bollywood,139,bollywood actress in towel sexy topless,1,bollywood actress nude topless photoshoot,2,Bollywood News,123,Bollywood photoshoot 2017 towel,1,bollywood stars in pink dress,1,Bomb On Earth Yana Gupta,1,boobs of sonam,1,BSSC Admit Card 2017,1,BSSC Admit Card 2017 – Inter level Exam Hall Ticket Online @ bssc.bih.nic.in,1,bssc.bih.nic.in,1,Business / Corporate Astrology,1,Calander calender calendar nakshatra 2017,1,Calendar and Puja Shubh Muhurat Time,1,Career,72,Career Astrology and Horoscope,1,career development,1,Cats,4,CBSE UGC NET 2017,2,CBSE UGC NET 2017 Apply Online,1,CBSE UGC NET Application Form 2017,2,CBSE UGC NET REGISTRATION,1,cg police recuitment,1,Checked Shirts for Womens in fashion this summer,1,Chinese Method,4,cleavage,1,Colour Combinations for fabulous looks,1,COMMISSION,1,Condom,1,condom models,1,condom sexy cover,1,CONTACT US,1,COOKING,45,Copy a Website Template,1,Create an Online Store in Blogger,1,CSIR UGC NET 2016 Application Form,2,CSIR UGC NET 2016 Check Eligibility,2,CSIR UGC NET 2016 Exam Pattern,1,Dark and Long Lasting Mehend,1,Datawind enters India Unlimited Data@20Rs/Month,1,deepika,3,deepika padukone,5,Deepika padukone ...star getting ready to steal hearts,3,Deepika Padukone Hot Black Wears,2,Deepika padukone L’Oréal Paris girl,2,Deepika padukone wow,3,delhi metro rail corporation test,1,Delhi Police Admit Card 2016,1,Delhi Police Admit Card 2016 – Constable PST & PET Hall Ticket @ www.delhipolice.nic.in,1,Delhi Police Constable PST,1,Delhi Police PET Hall Ticket,1,Designer Mehandi Designs in fashion,1,Devoleena Bhattacharjee,1,Diana Penty,2,Diana Penty bollywood,1,Diana Penty Desi Beuty,1,Diana Penty- desi daru,1,Directory,2,Discovering Beauties of South,1,District Court Vacancy 2017,1,DMRC Admit Card 2017 www.delhimetrorail.com,1,DMRC Card 2017,1,Dogs,14,Doraemon,1,Download LDC DEO (10+2),1,Download Tier 1 New Exam Pattern Online,1,Download upsc.gov.in,1,DRDO Recruitment,1,Dual purple shade eye Makeup this summer,1,Earning Zone,3,education,1,education in india,1,education standards,1,exam,2,exam schedule of jac tet jharkhand 2016,1,Exams,70,exams.in.net,1,Fab looks without spending hours in front of the mirror,1,fail,1,Fashion,38,Fashionable and Elegant Silver Chokers with Images,1,Fertilizers,1,Festivals and events in India in July that you must attend,1,FITNESS,1,Fitness & Gym,47,Flower Bulbs,1,Flower Seeds,1,Flowers by A,1,free 4g,3,free home delivery of 4g sim,1,free internet,4,Gadgets,1,GATE EXAM DETAILS,1,Gauri Sharma photoshoots armpit legs sexy,1,Gemstone Astrology and Consultancy,1,general,1,Get Paid To Perform Online Tasks Scam Sites,1,Girls Goggles ( addition to personality),1,govt jobs,1,Hall Ticket 2016-17,1,hall ticket jac tet 2016,1,Hansika Motwani over Exposed,1,Hanuman mantra,1,Haryana SSC Clerk Written Exam,1,HARYANA STAFF SELECTION,1,Haryana Staff Selection Commission,2,HARYANA STAFF SELECTION COMMISSION RECUITMENT 2017,1,Health - Alternative to Doctor,63,Health / Medical Astrology,1,HEALTH AND NUTRITION,1,Health Tips,2,heaven on planet,1,heaven place to visit,1,Heavenly Places On Earth Worth Visiting Went Abandoned,1,himachal pradesh board date sheet of 10 metric,1,himachal pradesh staff selection commission 2016,1,Hindu Astrology,33,Hindu Festivals in 2017,1,home,1,Homemade,43,horoscope december,1,Horse,3,hot deepika padukone sexy bikini cleavage armpits topless,1,Hot Saree Looks,1,Hot Urvashi Rauthela,1,How do I enable or disable JavaScript in my browser?,1,How to customize any template,1,How to Look Taller,1,hpssc,1,HPSSC Admit Card 2016 – HPSSc Hall Ticket and Written Exam Date,1,HPSSC Admit Card Hall Ticket and Written Exam Date sheet,1,Hritiqa Chheber,1,HSSC Clerk Exam Dates,1,HSSC Clerk Syllabus 2016,1,IB Jobs Notification,1,IBPS PO Admit Card 2016,1,IBPS PO Admit Card 2016 Download Call Letter Hall Ticket,1,IBPS PO Syllabus 2016 Exam Pattern for Pre and Main Exam,1,IBPS PO Syllabus 2016 of banks in india,1,ICSE 10th Result 2017,1,ICSE XIIth Time Table,1,IDBI Recruitment Notification,1,IGNOU Admit Card Download 2017,1,IGNOU B.Ed,1,IGNOU B.Ed Entrance Test Admit Card Download 2017 ignou.ac.in BEd,1,IGNOU Entrance Test,1,IGNOU ignou.ac.in,1,Ileana D Cruz Cuteness with Beauty,2,Indian Air Force Recruitment,1,Indian Astrology or Jyotisha,1,Indian Post Recruitment 2017,1,Inter level Exam Hall Ticket Online,1,IPU CET Admit Card 2017,1,ISC 12th Date Sheet 2017,1,ISC 12th Date Sheet 2017 ICSE XIIth Time Table,1,Isha Talwar girl with Freshness,1,JAC TET,1,Jacqueline Fernandez,1,jakline fernendez,2,Jaqueline Fernandez Beautiful Girl,2,Jaqueline Fernandez bollywood,2,Jaqueline Fernandez sexy,1,Jaqueline Fernandez sri lanka,1,jaqueline fernendiz,1,Jaqueline forgot something,1,jharkand tet,1,jharkhand tet,2,Jharkhand TET Admit Card 2016 Download Hall Ticket Official Site www.jac.nic.in,1,Jobs,71,JSSC Recruitment Notification 2017,1,Kajal Aggarwal Sexy Girl of South,1,Kangana Sharma,1,Kareena Kapoor Khan,1,Karishma Tanna,1,Katrina Kaif bikini,1,Katrina Kaif cleavage,1,Katrina Kaif Heart Breaker,1,Katrina Kaif history,1,Katrina Kaif Hot poses,1,Katrina Kaif sexy,1,Katrina Kaif suit,1,Katrina Kaif topless,1,Kiara Advani unknown Beauty,1,Kriti Kharbanda,1,Kriti Sanon in various Styles,1,kset,1,KSET Admit Card 2016 Exam Date & Schedule,1,Lakshmi rai Roy wallpaper armpits legs sexy,1,Latest and Amazing Tattoo Chokers Ladies in Fashion 2017,1,Latest and Beautiful Designs of Grey Salwar Suits,1,Latest Blouse Back Neck Designs,1,Latest Girls Top Designs with Rates in Market of Delhi,1,Latest Pakistani Mehndi Designs,1,Love / Marriage Astrology,1,lovely girl,2,Lovely Yami Gautam sexy,1,lte,2,lyf,2,MAHAGENCO Admit Card 2016,1,MAHAGENCO Admit Card 2016 Junior Engineer & Assistant Engineer Hall Ticket,1,MAHAGENCO Junior Engineer,1,MAHAGENCOAssistant Engineer Hall Ticket,1,MAHARASHTRA (NEAR SATARA),1,Make up tips for this summer,1,Mandana Karimi,1,Mandana Karimi Bold Beutiful,1,Mandana Karimi bollywood,1,Mantras and Stotras for Spiritual Empowerment,1,Manushi Chhillar Miss World 2017,2,Manushi Chiller 2019,1,May 2017 horoscope,1,MCI Admit Card 2016 LDC Telephone Operator,1,Mehandi Designs For Legs,1,Metric exam date sheet,1,MHA IB Admit Card 2016,1,MHA IB Admit Card 2016 – SA Hall Ticket & Exam Schedule @ www.mha.nic.in,1,MHA IB Exam Schedule,1,MHA IB SA Hall Ticket,1,Milk for your skin,1,Monsoon Hair care tips to keep your Hairs healthy and strong,1,Monthly Horoscope Aspects,1,most beutiful women,2,most visited places,1,Mouni Roy Naagin girl,1,Mouni Roy Naagin girl HD photoshoot photos wallpapers,1,Munisha Chiller,1,Muskan Sethi Latest Hot sexy armpit legs shoot,1,Nail Art 2017 - summer colour nail arts,1,Nail Polish Colours That Look Amazing,1,naked phone,1,nakshatra,1,Nakshatra Astrology Prediction 2017,2,Nargis Fakri Hot,1,Natural Ways,39,Navaratri 2017 Dates,1,NCERT Admit Card 2016 – Download LDC Hall Ticket @ ncert.nic.in,1,NCERT Admit Card 2016.Download LDC Hall Ticket,1,ncert.nic.in,1,NEET 2017 Counselling,1,Neetu Chandra download wallpapers,1,Neetu Chandra photo,1,Neetu chandra pistol rock,1,Neetu Chandra wallpapers,1,Neha Sharma,1,NEWS,2,Nia Sharma hotness unlimited,1,Nidhhi Agerwal girl with Looks,1,Nidhi Agerwal,1,Nidhi Aggarwal Fresh Face sexy armpit clevage legs sex,1,Nidhi Munim Cover Photoshoot sexy armpit legs,1,Non Veg,15,Odisha,1,Official Site www.mciindia.org,1,Official site:kset.uni-mysore.ac.in,1,Online Earning,23,OTET,1,OTET Admit Card 2016 Exam Date bseodisha.nic.in,1,Others,1,padai,1,Parul Gulati,1,People,1,Pet Care,20,Pharmacist Admit Card 2016,1,phones of glass,1,pink bikini,1,pink bra,1,pink penty,1,Pink two Pieces of Sencor,1,Planting Tips,13,police exams,1,police jobs,1,Police Recruitment (All India Recruitment),1,Police Recruitment 2016 740 Constable (GD) Posts,1,Pooja Chopra New Bold Babe sexy armpit legs topless,1,Pooja Sri sexy photoshoots,1,poor education,1,Post of Specialist Officer,1,Post Office Recuitment - Gramin Dak Sevak,1,posters,1,posts,1,Pragya Jaiswal,1,Pragya Jaiswal star ready to rise,1,Priya Prakash Varrier,1,psc exam,1,Public Health Dept Akola,1,Public Health Dept Akola Pharmacist Admit Card 2016,1,Punjab Haryana High Court Exam,1,Punjab Patwari Admit Card 2016,1,punjabrevenue,1,punjabrevenue.nic.in Punjab Patwari Admit Card 2016,1,Radhika Apte sensored queen,1,RailTel,1,RailTel Admit Card 2016 – Download Hall Ticket | Entry Card @ recruitment.nielit.in,1,railways,1,Rainbow Nail Art Designs for this Summer,1,Raita,2,Rajasthan Patwari Admit Card 2016 for Mains Exam – rsmssb.rajasthan.gov.in,1,Rajasthan Patwari Admit Card 2016 Rajasthan patwari Mains Exam,1,Rajasthan Subordinate Ministerial Service Selection Board (RSMSSB) Syllabus,1,Rakul Preet,4,Rakul Preet Beautiful Pics,3,Rakul Preet Star Born for shining,1,RAMBO PRODUCTS,1,Rcom 4g plans,1,recruitment.nielit.in,1,RECUITMENT 2017,1,reliance 4g,4,reliance jio 3g sim card application app to be launched,1,reliance jio 4g phone at 1000 Rs cheapest phone in india with 4g,1,reliance jio 4g plans and details,4,reliance jio plans,2,Reliance Jio's Happy New Year offer: Free services until March 31 2017,1,Religion,1,Remove - Subscribe to: Posts (Atom)in easy steps,1,Rhea Chakarborty,1,rrb 1161 Assistant Loco Pilot Jobs,1,RRB Chandigarh,1,RRB Chandigarh Recruitment 2016 1161 Assistant Loco Pilot Jobs,1,rrb Recruitment 2016,1,rsmssb,1,rsmssb.rajasthan.gov.in,1,Sai Lokur emerging Beauty,1,Sanjana Sweet n Sexy armpit beautiful,1,saran shrihya,1,Sargun Mehta in stylish Dress Looks,1,SBI Clerk 2017 admit card,1,SBI Clerk 2017 entrance,1,SBI Clerk 2017 exam,1,SBI Clerk 2017 Recruitment Exam,1,science,1,Scotland Must Be On Your touring list,1,Scrolling Gadget (Auto-Scrolling [Text Or Image Slide Shows] Widgets For BlogSpot / Blogs),1,Seasonal Plants &Flowers,1,Self Power,5,Sensational Deepika Padukone,1,SEO Optimization and Free Backlinks,1,sexiest Indian girl,1,sexy deepika,2,sexy hot boobs naked armpits cleavage topless indian girls bollywoood,2,sexy indian girls,1,sexy phones,1,sexy pink stars of bollywood,1,sexy rakul preet,2,Sexy Tamanna Bhatia Photoshoot armpits legs,1,Sharddha Kapoor,1,SHARE BLOG IN ALL SOCIAL MEDIAS,1,Sheena Shahabadi white top hd wallpapers,1,Sheena Shahabadi white top pics,1,Sheena Shahabadi white top picture,1,Shraddha Arya sexy armpit bikini,1,Shraddha kapoor innocent girl,1,shreya saran sexy armpits bikini boobs,1,Shriya Saran South Indian Beauty,1,Shurveen chawala Transformed Beauty,1,Site Building Support,16,Skin Care Tips,1,Snacks,7,Sonakshi Sinha Dabang Girl,1,Sonam Bajwa,1,sonam kapoor sexy cleavage bikini topless armpits,1,south indian Make up Tips,1,Speria S9 Pro Notch Smart Phone,1,ssc Application Form 2017,1,SSC CGL,1,SSC CGL Result 2016,1,SSC CGL Result 2016 Check at – www.ssc.nic.in,1,SSC CGL Syllabus 2016 – Download Tier 1 New Exam Pattern Online @ ssc.nic.in,1,SSC CGL Tier 1 Result 2016,1,ssc Check Exam Pattern,1,SSC CHSL Admit Card,1,SSC CPO PET,1,SSC CPO PET Admit Card 2016,1,SSC Junior Hindi Translator,1,SSC Junior Hindi Translator Application Form 2017 – Check Exam Pattern,1,ssc staff selection commission 2017,1,ssc.nic.in,2,student life,1,Stunning Raashi Khanna,1,Stunning Saree Actresses,1,stunning sonam kapoor,1,Summer fashion trends that TV actresses,1,Summer Tour places to be visited in Himachal Pradesh,1,Sunanda Sharma Punjabi Actress,1,Suniel Shetty Daughter,1,Sunil Shetty Daughter,1,Sunny with Sweetness,1,SUPPLIMENTS,1,Surbhi Jyoti,1,Surbhi Jyoti Photoshoot,1,Surbhi Pandit,1,Sweet Alia Bhatt,2,Syllabus 2016,1,tamil nadu postal circle,1,Technology,39,Telangana Postal Circle appost.in,1,Telangana Postal Circle Hall Ticket 2016,1,Temples and Mosques,1,Tips to Keep Your Clothes and Shoes Brand New Always,1,TN Postal Circle Admit Card 2016,1,TN TET 2017 Exam Results,1,Top Patterns of Bracelet Mehndi Design,1,Top 10 Most Hot & Glamorous South Indian Actresses,1,Top beutiful places discovered around the world,1,Top Blouse Neck Designs at Back & Front of 2017,1,Top Churches,1,Top Paying sites,1,Top Places to get your Wedding Lehnga,1,Top wedding studd of 2017,1,topless,2,topless indian actress,2,Tour Europe - Top Places to visit,1,Towel Queens Photoshoot,1,towel sonam,1,TRAINING,1,transparent phones,1,Travel Guide,15,Tripura psc,1,tripura psc admit card,1,tripura psc exams date sheet format admit card,1,Tulip Joshi girl with innocent smile,1,UBI PO Exam Pattern,1,United Bank of India Syllabus 201,1,United Bank of India Syllabus 2016 Download UBI PO Exam Pattern,1,upbasiceduboard.gov.in,1,Upcoming government of India Exams,1,UPLOADED BLOGS,40,UPSC CDS 1 Admit Card 2017,1,UPSC CDS 1 Admit Card 2017 – Download upsc.gov.in,1,UPTET,1,UPTET Admit Card 2016 – Hall Ticket,1,Vaani Kapoor,1,Valley of Flowers KAAS PLATEAU,1,Vedhika Kumar,1,Veg Foods,17,vision statement,1,wardrobe malfunctioning,3,Ways to modernize your Saree,1,Ways to reuse your wedding lehenga,1,WBJEEB Couselling,1,WORKOUTS,1,www.delhipolice.nic.in,1,www.jac.nic.in,1,www.mha.nic.in,1,www.sscnr.net.in,1,www.unionbankonline.co.in,1,XML sitemap for blogger from vxpapps,1,Yami Gautam,1,Yami Gautama sexiest photoshoot armpits bikini sex,2,yana gupta,1,Yandex configuration to POP3 Settings,1,Yoga,5,राशिफल 2017,1,
ltr
item
Hisar.Men - A Platform of Knowledge base, Information, Updates: Making a Questionnaire in a website (html JavaScript)
Making a Questionnaire in a website (html JavaScript)
https://cool-tabs-eu.s3.eu-west-1.amazonaws.com/helpdesk-images/data/helpdesk/attachments/production/33825811/original/1KEttABx6hlciVjJt9ACOZgmKJKa9dpMHQ?1498563030
Hisar.Men - A Platform of Knowledge base, Information, Updates
https://www.hisar.men/2020/04/making-questionnaire-in-website-html.html
https://www.hisar.men/
https://www.hisar.men/
https://www.hisar.men/2020/04/making-questionnaire-in-website-html.html
true
6984455210421090899
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy