Con las aplicaciones Cool Promo o Cool Promo White Label puedes crear encuestas o quizzes compuesto de preguntas y respuestas dinámicas. La opción para añadir el cuestionario o encuesta a tus promociones y concursos se encuentra en la sección 'Añade un cuestionario o encuesta a tu concurso (preguntas personalizadas).


Cool Tabs te permite crear diferentes modelos de cuestionarios, quizzes o encuestas, como encuestas de opinión, test de personalidad, quizzes por etapas, con puntos por aciertos, por calificación personalizada (NPS) o con límite de tiempos, entre otros. Y te da la posibilidad de incluir las preguntas y las respuestas mediante diferentes tipologías. 


Además, con nuestro sistema de plantillas es posible usar tu propio html y css para la/s pantalla/s del formulario de la siguiente forma:


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


La variable {{{ cool_tabs_form }}} es la encargada de incluir las diferentes preguntas del quiz que se hayan configurado en la campaña, sin posibilidad (por el momento) de poder modificar el html directamente de las mismas. 


El objetivo de este documento es explicar paso a paso ese html que por defecto se incluye para las preguntas del quiz con la finalidad de poder modificar de una manera sencilla la CSS asociada al formulario.


Clases personalizadas por cada pantalla


Las diferentes pantallas de un quiz o encuestas incluyen clases e ids dinámicas que varían en función del número de pregunta dónde nos encontremos. Además el último paso, el formulario de datos, siempre incluye una clase adicional ('last_step') para poder identificar esa pantalla y personalizarla de manera única.


<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>


También se incluyen otros identificadores y clases en cada <section> de las preguntas (wizard-p-X) y clases 'step_X' por pregunta


<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>


Errores generales


Cada pregunta puede mostrar un mensaje de error (Campo obligatorio, escoge exactamente 2 opciones, etc..) que se muestra en un <label> con la clase "step_error"


<label id="participation_promo_response_attributes_response_11731-error" class="step_error" for="participation_promo_response_attributes_response_11731">Required field</label>



Tipología de preguntas y respuestas de un quiz


1. Pregunta con texto (e/o imagen) + respuesta textual.


Este modelo es muy sencillo, solo tienes que formular una pregunta sobre tus productos o servicios o sobre aquello de lo que trata tu encuesta o quiz y seleccionar en 'Tipos de respuesta', la opción de respuesta textual. De esta manera permitirás que los participantes den rienda suelta a su creatividad o que expresen de forma abierta su opinión. Si lo prefieres puedes acompañar la pregunta con una imagen.




El código html de este tipo de pregunta es el siguiente:


<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. Pregunta con texto (e/o imagen) + respuesta mediante valoración por estrellas entre 1 y N.


Con este tipo de respuesta estaremos permitiendo al participante que haga su valoración del 1 y el número máximo de estrellas que determines. Es un recurso muy utilizado en encuestas de opinión, a la hora de valorar productos o servicios. En 'Tipos de respuesta' selecciona la opción Calificación con estrella e Indica en número máxima que se podrá marcar en la respuesta. 



El código html de este tipo de pregunta es el siguiente:


<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>




3. Pregunta con texto (e/o imagen) + respuesta mediante calificación numérica.


Como en el caso anterior, este es un tipo de tipología de respuesta que se emplea con frecuencia en encuestas de opinión para valorar productos o servicios. Mediante la calificación personalizada podrás realizar cuestionarios que te permitirán medir el NPS (Net Promoter Score). 



El código html de este tipo de pregunta es el siguiente:


<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>



4. Pregunta con texto + respuesta con desplegable.


Al establecer el tipo de respuesta mediante desplegable, estarás ofreciendo a los participantes una abanico de respuestas entre las que tendrás que escoger, limitándo estas a las opciones que les propongas. Con esta tipología de respuesta, solo se podrá elegir una. 


El html de este tipo de pregunta es:


<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>




5. Pregunta con texto (e/o imagen) + respuesta con texto a escoger entre varias opciones.


Si queremos crear o quiz sencillo esta es la tipología perfecta. Formulamos una pregunta y ofrecemos a los participantes diferentes opciones para que elija una. 


El código html de esta pregunta sería:


<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>



6. Pregunta con texto + respuesta con texto e imagen a escoger entre varias opciones.


Esta opción es similar a la anterior tipología de pregunta, pero incluíamos una fotografía. Es una buena opción para incluir imágenes de los productos o servicios a los que se hacen referencia en la respuesta. 


El tamaño de las imágenes personalizadas que acompañan a cada respuesta es de 300x168px



El código html de esta pregunta sería:


<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>




7. Pregunta con texto + respuesta con texto, imagen y descripción a escoger entre varias opciones.


Este modelo de respuesta añade una descripción en cada opción de respuesta. En las descripciones de nuestro ejemplo se hacen referencia a las diferentes localizaciones de las imágenes, pero si en el quiz hacemos referencia a nuestros productos o servicios, podríamos incluir el nombre, el precio o incluso la referencia de los mismo.



El código html de la pregunta sería:


<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>




8. Pregunta con texto + respuesta con imágenes a escoger entre varias opciones. 


Esta opción de respuesta podemos utilizarla si queremos crear un quiz o encuesta muy visual o si por ejemplo los participantes tienen que adivinar un personaje, destino, etc. con los datos que se ofrecen al formular la pregunta. 



Y su código html sería:


<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>



9. Pregunta con texto e imagen + respuesta con imagen y descripción a escoger entre varias opciones.


Podemos formular la pregunta de nuestro quiz o cuestionario mediante texto, imagen o ambas opciones. En esta tipología, el texto de la pregunta se acompaña con imagen y en la tipología de respuesta se le da a los participantes diferentes imágenes a las que acompaña una descripción a modo de leyenda, entre las que deben escoger una.


Si decides incluir una imagen bien que contenga la pregunta o bien que acompañe a la pregunta, debes saber que el tamaño óptimo de las imágenes de las preguntas personalizadas es de 628x353px



Y su código html correspondiente sería:


<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>



10. Pregunta con texto y vídeo + respuesta con texto a escoger entre varias opciones.


Otra de las opciones que tenemos al formular la pregunta de nuestro quiz o cuestionario es incluir un vídeo sobre el que los participantes tengan que responder. El tamaño óptimo para que el vídeo se visualice correctamente y para que los participantes no tengan que hacer demasiado scroll es de 560x315px 


Para añadir el vídeo tienes que incluir el html del vídeo a continuación en el mismo apartado en el que incluyes la pregunta. 


En nuestro caso sería: 


<p> ¿Sabrías decirnos qué ciudad española se esconde en el vídeo? </p>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/zOIawcK13DI" frameborder="0" allowfullscreen></iframe></p>




El código html sería:


<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">
          <p> ¿Sabrías decirnos qué ciudad española se esconde en el vídeo? </p>
          <p>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/zOIawcK13DI" frameborder="0" allowfullscreen=""></iframe>
          </p>
        </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>



11. Pregunta con texto + respuesta con vídeo a escoger entre varias opciones.


Una segunda tipología con el vídeo como protagonista es la que permite incluir el vídeo en el apartado de respuestas. Para subir los diferentes vídeos a modo de respuesta, tienes que pegar el html del vídeo que quieras subir en cada apartado destinado a la respuesta. Por ejemplo: <iframe width="450" height="250" src="https://www.youtube.com/embed/hK7EHGv35Dk" frameborder="0" allowfullscreen></iframe></p>


El tamaño de los vídeos se ajusta automáticamente a 230x230px, medida que permite su correcta visualización. 




El código html de esta pregunta sería:


<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>





12. Pregunta con texto e imagen + respuesta mediante vídeos a escoger entre varias opciones.


Una tercera posibilidad que te ofrece Cool Tabs es incluir en las respuesta, además del vídeo, un texto. En nuestro ejemplo hemos incluido también una imagen que acompaña a la pregunta. 



El código html en este caso sería:


<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>




13. Pregunta texto e imagen de fondo para la pregunta + respuesta con texto a escoger entre varias opciones.


Si has optado por crear un quiz o cuestionario lo más visual posible, te recomendamos este tipologia, que incluye una imagen de fondo con la pregunta y las diferentes respuestas, de las cuales el participante tendrá que seleccionar una. 


En este caso, la imagen de fondo tiene un tamaño de 660x660px. Para que no se desfigure la imagen, te recomendamos que mejor elijas una fotografía cuadrada


En cuanto al número de respuestas que puedes incluir, no hay un máximo pero ten en cuenta que está optimizada para un máximo de ocho. Si vas a incluir más, comprueba que le resultado que obtienes se adapta a lo que necesitas. 



Y el correspondiente código html:


<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>



14. Pregunta con texto + respuesta múltiples opciones con texto. 


Hemos visto diferentes ejemplo con la opción de marcar una única respuesta, pero también existe la posibilidad de que los participantes tengan que elegir su respuesta entre una abanico de opciones y que puedan seleccionar desde 0 a todas. Para ello tenemos que, en 'Tipos de respuestas', seleccionar la opción Múltiples respuesta. 


Podemos establecer en el apartado indicado para ello que, el usuario tenga que marcar un mínimo y un máximo de respuestas para esa pregunta. De esa manera, si no marca el mínimo establecido o intenta marcar más, la aplicación le indicará que no puede pasar a la siguiente pregunta. 



Cuyo código html sería:


<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>




15. Pregunta con texto + respuesta múltiples opciones con imágenes.


Otra de las opciones opciones para nuestro quiz o cuestionario con la tipología de respuesta múltiple es incluir imágenes en vez de texto. De esta forma, los participantes tendrían que escoger su respuesta entre varias imágenes. 



Cuyo html sería:


<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>



Donde el elemento seleccionado (foto elegida por el usuario) tiene la clase 'active'


16. Pregunta con texto e imagen + respuesta con texto a escoger entre varias opciones + feedback de 'respuesta correcta'.


Esta es una de las tipologías más utilizadas en los quiz. Se formula una pregunta que puede ir acompañada de una imagen y se da al usuario diferentes respuestas entre las que debe elegir una. Inmediatamente, se le indica si ha acertado o no y se le da un feedback en el que se suele incluir un texto que explica la respuesta correcta



El código html para esta pregunta sería:



<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>


Si el usuario acierta la pregunta, el html correspondiente sería el siguiente (se muestra el mensaje de acierto con clase 'js_answer_ok' y se añade la clase '.js_quizz_question_ok' al botón con la respuesta correcta):

<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>


Si el usuario falla la pregunta, el html correspondiente sería (igual al anterior pero se muestra el mensaje de fallo, con la clase 'js_answer_ko' y se añade la clase 'js_quizz_question_ko' a la respuesta errónea)


<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>






Consulta nuestra demo de tipologías de preguntas y respuestas de un quiz para comprobar cómo quedarían en tu quiz o cuestionario. 


Comienza a crear tu quiz o cuestionario. Te explicamos cómo hacerlo en este tutorial