1. Introducción.
Cuando creas una campaña en Cool Tabs con preguntas personalizadas, puedes elegir entre una gran variedad de tipos de preguntas y respuestas: texto libre, valoración por estrellas, NPS, selección única o múltiple, matrices, subida de archivos, y más.
Cada tipo genera un HTML específico con sus propias clases. Conocer esa estructura te permite personalizar el diseño del quiz o encuesta con tu propia CSS, sin alterar el funcionamiento de la campaña.
En este tutorial encontrarás el HTML de referencia para cada uno de los tipos disponibles.
2. Estructura HTML.
Para personalizar las pantallas de tu campaña con HTML y CSS propio, consulta el tutorial Cómo configurar tu propio HTML para las distintas pantallas de una campaña.
El HTML de una campaña con quiz requiere, además de las 4 variables obligatorias, la variable {{{ cool_tabs_form }}}, que es la encargada de renderizar las preguntas configuradas en la campaña:
<!DOCTYPE html>
<html {{{ cool_tabs_html_attributes }}} >
<head>
<!-- {{{ cool_tabs_head }}} -->
</head>
<body {{{ cool_tabs_body_attributes }}} >
{{{ cool_tabs_form }}}
<!-- {{{ cool_tabs_body_end }}} -->
</body>
</html>
Las variables {{{ cool_tabs_head }}} y {{{ cool_tabs_body_end }}} cargan los scripts necesarios para el correcto funcionamiento de la campaña, el guardado de datos y el acceso a estadísticas.
2.1. Clases por tipo de configuración del quiz.
Las campañas pueden configurarse de tres maneras:
Quiz por pasos: una pregunta por pantalla.
Quiz en 2 pasos: todas las preguntas en una página y el formulario de datos personales en otra.
Preguntas de quiz y datos personales en la misma página: todo en una única pantalla.
En el caso de quiz por pasos y quiz en 2 pasos, cada pantalla incluye clases e IDs dinámicos que varían según el número de pregunta. El último paso (formulario de datos) incluye siempre la clase adicional last_step para poder identificarlo y personalizarlo de forma única.
Quiz por pasos:
<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>
Quiz en 2 pasos:
// Paso 1
<body>
<div class="wrapper form_layout js_locator_for_wizard_step_indicators step0">
.
</div>
</body>
// Paso 2
<body>
<div class="wrapper form_layout js_locator_for_wizard_step_indicators step1 last_step">
.
</div>
</body>
Preguntas de quiz y datos personales en la misma página:
<body>
<div class="wrapper form_layout js_locator_for_wizard_step_indicators">
.
</div>
</body>
También se incluyen 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 id="wizard-p-0" class="body current" role="tabpanel">
<div class="wrapper_row">
<div class="row js_error_placement_parent step_1">....</div>
</div>
</section>
<section id="wizard-p-1" class="body" role="tabpanel">
<div class="wrapper_row">
<div class="row js_error_placement_parent step_2">....</div>
</div>
</section>
<section id="wizard-p-2" class="body" role="tabpanel">
<div class="wrapper_row">
<div class="row js_error_placement_parent step_3">....</div>
</div>
</section>
</div>
</div>
</form>
</body>2.2. Errores generales.
Cada pregunta puede mostrar un mensaje de error (campo obligatorio, escoge exactamente 2 opciones, etc.) en un <label> con la clase step_error, ubicado dentro del contenedor js_error_placement. Cuando el error está activo, ese contenedor recibe las clases required_field y error_active:
<div class="js_error_placement required_field error_active"> <label class="step_error" for="participation_promo_response_attributes_response_XXXXX"> Campo obligatorio </label> </div>
El color del error se controla mediante las variables CSS --ct-error-text-color (texto) y --ct-error-color (fondo), configurables desde el editor de la campaña en Formulario > Avanzado > Estilos del formulario.
2.3. Tipología de preguntas y respuestas.
A continuación se detalla la estructura HTML de cada tipo de pregunta y respuesta disponible. Cada tipo incluye sus clases específicas, que puedes usar para aplicar estilos CSS personalizados.
2.3.1. Pregunta con texto (e/o imagen) + respuesta textual.
Tipo de respuesta: Texto libre, el participante escribe la respuesta.
El participante responde escribiendo libremente. Es ideal para preguntas abiertas de opinión o creatividad. Opcionalmente puedes acompañar la pregunta con una imagen.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_free_text js_type_free_text js_free_text body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="¿Dónde te gustaría ir de viaje?" data-question-type="free_text" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Dónde te gustaría ir de viaje?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<div class="d-flex row justify-content-center align-items-start">
<div class="col-12 col-md-8 mx-auto">
<input data-next="1" data-question-type="free_text" type="text" name="participation[promo_response_attributes][response_XXXXX]">
</div>
</div>
</div>
</div>
</section>
2.3.2. Pregunta con texto (e/o imagen) + respuesta mediante valoración por estrellas entre 1 y N.
Tipo de respuesta: Calificación por estrellas, el participante selecciona una puntuación entre 1 y el máximo configurado.
Muy utilizado en encuestas de satisfacción para valorar productos o servicios.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_rate js_type_rate js_rate body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="¿Qué valoración le darías?" data-question-type="rate" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Qué valoración le darías?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="mb-4">
<div class="d-flex justify-content-center align-items-center form_fields star_row css_quizz css_quizz_XXXXX" style="cursor: pointer;">
<div class="star_row_content">
<div class="form_stars js_form_stars d-flex flex-wrap py-1 justify-content-center" data-max="10" data-score-name="participation[promo_response_attributes][response_XXXXX]" style="cursor: pointer;">
<i data-alt="1" class="star-on-png" title="1"></i>
<i data-alt="2" class="star-off-png" title="2"></i>
...
<i data-alt="10" class="star-off-png" title="10"></i>
<input name="participation[promo_response_attributes][response_XXXXX]" type="hidden" value="1">
</div>
</div>
</div>
</div>
</div>
</section>
2.3.3. Pregunta con texto (e/o imagen) + respuesta mediante calificación numérica.
Tipo de respuesta: Calificación personalizada entre 0 y N.
Ideal para medir el NPS (Net Promoter Score).
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_rate_numbers js_type_rate_numbers js_rate_numbers body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="¿Qué puntuación le darías?" data-question-type="rate_numbers" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Qué puntuación le darías?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="star-numbers">
<div class="form_fields star_numbers_row css_quizz css_quizz_XXXXX" data-max="10" data-score-name="participation[promo_response_attributes][response_XXXXX]" style="cursor: pointer;">
<div class="star-number-container">
<ul class="m_options_list js_star_numbers d-flex flex-wrap flex-md-nowrap flex-row justify-content-center mb-0">
<li class="star_number_0 star_number">
<input class="m_option_input js_quizz_radio_button" data-next="1" data-question-type="rate_numbers" type="radio" value="0" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_0">
<label class="m_option_label" for="participation_promo_response_attributes_response_XXXXX_0">0</label>
</li>
...
<li class="star_number_10 star_number">
<input class="m_option_input js_quizz_radio_button" data-next="1" data-question-type="rate_numbers" type="radio" value="10" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_10">
<label class="m_option_label" for="participation_promo_response_attributes_response_XXXXX_10">10</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
2.3.4. Pregunta con texto + respuesta con desplegable.
Tipo de respuesta: Desplegable con respuestas individuales, donde solo se puede elegir una opción.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_select js_type_select js_select body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="¿Qué tipo de alojamiento sueles elegir?" data-question-type="select" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Qué tipo de alojamiento sueles elegir?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div>
<div class="form_select css_quizz css_quizz_XXXXX">
<div class="field_wrap select_field d-flex flex-row row justify-content-center">
<div class="col-12 col-md-6">
<span class="select platform platform60 not_msie responsive_select active_select">
<span class="select_content">
<span class="select_button">
<span class="select_button_icon"></span>
</span>
<span class="select_label"><span></span></span>
</span>
<div>
<select class="custom-select" data-custom="true" data-next="1" data-question-type="select" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX">
<option value=""></option>
<option value="XXXXX">Opción 1</option>
<option value="XXXXX">Opción 2</option>
<option value="XXXXX">Opción 3</option>
</select>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
2.3.5. Pregunta con texto (e/o imagen) + respuesta con texto a escoger entre varias opciones.
Tipo de respuesta: Una sola opción donde el participante escoge una respuesta entre varias.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button js_radio_button body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="¿Cuál es tu época preferida del año para viajar?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Cuál es tu época preferida del año para viajar?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Opción 1" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Opción 1
</label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.6. Pregunta con texto + respuesta con texto e imagen a escoger entre varias opciones.
Tipo de respuesta: Una sola opción con imagen donde el participante escoge una respuesta entre varias, cada una acompañada de una imagen.
El tamaño óptimo de las imágenes de respuesta es de 300x200px.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button js_radio_button body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="¿Cuál de las siguientes capitales europeas te gustaría visitar?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Cuál de las siguientes capitales europeas te gustaría visitar?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_3">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a data-href="URL_IMAGEN" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_answer_with_image">
<img width="300" height="200" class="m_figure_img" src="URL_IMAGEN">
</a>
</div>
</figure>
</div>
<div class="m_options_list_input no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Opción 1" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Opción 1
</label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.7. Pregunta con texto + respuesta con texto, imagen y descripción a escoger entre varias opciones.
Tipo de respuesta: Una sola opción con imagen y descripción. Igual que el tipo anterior, pero cada imagen incluye un texto descriptivo a modo de leyenda.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button js_radio_button body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="¿Qué es lo que más te interesa de una ciudad?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Qué es lo que más te interesa de una ciudad?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_3">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a data-href="URL_IMAGEN" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_answer_with_image">
<img width="300" height="200" class="m_figure_img" src="URL_IMAGEN">
<span class="image_description">Descripción de la imagen</span>
</a>
</div>
</figure>
</div>
<div class="m_options_list_input">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Opción 1" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Opción 1
</label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.8. Pregunta con texto + respuesta con imágenes a escoger entre varias opciones.
Tipo de respuesta: Una sola opción solo con imagen, sin texto en la respuesta. El participante elige directamente guiado por la imagen..
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button js_radio_button body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="¿Cuál de los siguientes países te gustaría visitar?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Cuál de los siguientes países te gustaría visitar?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_3">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks no-answer-with-image">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a data-href="URL_IMAGEN" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_answer_with_image">
<img width="300" height="200" class="m_figure_img" src="URL_IMAGEN">
</a>
</div>
</figure>
</div>
<div class="m_options_list_input no-answer no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX"></label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.9. Pregunta con texto e imagen + respuesta con imagen y descripción a escoger entre varias opciones.
Tipo de respuesta: Una sola opción con imagen y descripción. La pregunta se acompaña de una imagen y las respuestas combinan imagen, descripción y texto.
El tamaño óptimo de la imagen de la pregunta es 628x353px.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button js_radio_button body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="¿Qué no puede faltar nunca en tu maleta?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Qué no puede faltar nunca en tu maleta?
</div>
</div>
<div class="form_fields js_question_image_wrapper">
<figure class="m_figure js_answer_image anim_all">
<a class="m_figure_content m_figure_content_image image_lightbox" data-href="URL_IMAGEN_PREGUNTA" data-after-href="">
<img width="672" height="448" class="m_figure_img js_question_image" src="URL_IMAGEN_PREGUNTA">
</a>
</figure>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_3">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a data-href="URL_IMAGEN_RESPUESTA" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_answer_with_image">
<img width="300" height="200" class="m_figure_img" src="URL_IMAGEN_RESPUESTA">
<span class="image_description">Descripción de la imagen</span>
</a>
</div>
</figure>
</div>
<div class="m_options_list_input">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Opción 1" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Opción 1
</label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.10. Pregunta con texto y vídeo + respuesta con texto a escoger entre varias opciones.
Tipo de respuesta: Una sola opción. En la pregunta se incluye un vídeo embebido y las respuestas son texto.
El tamaño óptimo para el vídeo es de 560x315px (proporción 16:9), para que se visualice correctamente sin que los participantes tengan que hacer demasiado scroll.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button js_radio_button body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="¿Qué ciudad aparece en el vídeo?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Qué ciudad aparece en el vídeo?
</div>
</div>
<div class="aspect-ratio">
<iframe class="youtube-player embed_video lazy-loaded" width="397" height="360" src="https://www.youtube-nocookie.com/embed/VIDEO_ID?rel=0&" allowfullscreen=""></iframe>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Opción 1" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Opción 1
</label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.11. Pregunta con texto + respuesta con vídeo a escoger entre varias opciones.
Tipo de respuesta: Una sola opción. Las respuestas son vídeos entre los que el participante elige.
El tamaño de los vídeos se ajusta automáticamente al tamaño de la columna que los contiene.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button js_radio_button body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="¿Cuál de estos destinos prefieres?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Cuál de estos destinos prefieres?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a class="m_figure_content m_figure_content_image m_figure_content_horizontal">
<div class="aspect-ratio">
<video class="video-js vjs-sublime-skin embed_video lazy-hidden" controls="" preload="none" width="480" height="270"
data-poster="URL_POSTER" poster="URL_POSTER">
<source src="URL_VIDEO.mp4" type="video/mp4">
<source src="URL_VIDEO.webm" type="video/webm">
</video>
</div>
</a>
</div>
</figure>
</div>
<div class="m_options_list_input no-description video-answer">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Opción 1" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Opción 1
</label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.12. Pregunta con texto e imagen + respuesta mediante vídeos a escoger entre varias opciones.
Tipo de respuesta: Una sola opción. La pregunta incluye una imagen y las respuestas son vídeos con texto.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button js_radio_button body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="¿Qué actividad no puede faltar en tus viajes?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Qué actividad no puede faltar en tus viajes?
</div>
</div>
<div class="form_fields js_question_image_wrapper">
<figure class="m_figure js_answer_image anim_all">
<a class="m_figure_content m_figure_content_image image_lightbox" data-href="URL_ORIGINAL" data-after-href="">
<img class="m_figure_img js_question_image" src="URL_IMAGEN" width="672" height="504">
</a>
</figure>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a class="m_figure_content m_figure_content_image m_figure_content_horizontal">
<div class="aspect-ratio">
<iframe class="youtube-player embed_video lazy-loaded" width="397" height="360"
src="https://www.youtube-nocookie.com/embed/VIDEO_ID?rel=0&" allowfullscreen=""></iframe>
</div>
</a>
</div>
</figure>
</div>
<div class="m_options_list_input no-description video-answer">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Opción 1" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Opción 1
</label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.13. Pregunta texto e imagen de fondo para la pregunta + respuesta con texto a escoger entre varias opciones.
Tipo de respuesta: Una sola opción. La imagen aparece como fondo de toda la pregunta y las respuestas son texto.
El tamaño óptimo para la imagen de fondo es de 660x660px (imagen cuadrada).
En cuanto al número de respuestas, 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 el resultado se adapta a lo que necesitas.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button question_bg js_radio_button body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="Eres de los que planifican su viaje..." data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="background-image: url('URL_IMAGEN_FONDO'); min-height: 628px;">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
Eres de los que planifican su viaje...
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Una semana antes" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Una semana antes
</label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.14. Pregunta con texto + respuesta múltiples opciones con texto.
Tipo de respuesta: Múltiples opciones. El participante puede seleccionar varias respuestas.
Se puede configurar un mínimo y un máximo de selecciones.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_checkbox js_type_checkbox js_checkbox body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="¿Qué tipo de viajero eres?" data-question-type="checkbox" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Qué tipo de viajero eres?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input name="participation[promo_response_attributes][response_XXXXX][]" type="hidden" value="0">
<input title="Escoge entre 1 y 7 opciones" data-rule-required="false" minlength="1" maxlength="7" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Mochilero" data-question-type="checkbox" data-response-id="XXXXX" data-correct-position="1" class="m_option_input js_quizz_checkbox js_has_eurovision_points" type="checkbox" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX][]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Mochilero
</label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.15. Pregunta con texto + respuesta múltiples opciones con imágenes.
Tipo de respuesta: Múltiples opciones. El participante escoge entre varias imágenes.
Se puede configurar un mínimo y un máximo de selecciones.
El tamaño óptimo de las imágenes de respuesta es de 300x200 px.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_checkbox js_type_checkbox js_checkbox body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="¿Qué medio de transporte usas?" data-question-type="checkbox" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Qué medio de transporte usas?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks no-answer-with-image">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a data-href="URL_ORIGINAL" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_answer_with_image">
<img class="m_figure_img" src="URL_IMAGEN" width="300" height="200">
</a>
</div>
</figure>
</div>
<div class="m_options_list_input no-answer no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input name="participation[promo_response_attributes][response_XXXXX][]" type="hidden" value="0">
<input title="Escoge entre 1 y 4 opciones" data-rule-required="false" minlength="1" maxlength="4" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="" data-question-type="checkbox" data-response-id="XXXXX" data-correct-position="1" class="m_option_input js_quizz_checkbox js_has_eurovision_points" type="checkbox" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX][]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX"></label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
Al seleccionar una imagen, el elemento <img> recibe la clase active.
2.3.16. Pregunta con texto e imagen + respuesta con texto a escoger entre varias opciones + feedback de 'respuesta correcta'.
Tipo de respuesta: Una sola opción. El participante escoge una respuesta entre varias.
Esta tipología es una de las más usadas en quizzes de conocimiento. La pregunta puede incluir una imagen de apoyo. Al seleccionar, se muestra inmediatamente si ha acertado o no, junto con un texto de feedback que habitualmente explica la respuesta correcta.
El tamaño óptimo para la imagen de la pregunta es de 628x353 px.
<section class="... type_radio_button js_type_radio_button js_radio_button body" data-component="quiz-question" data-question-type="radio_button" ...>
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Qué ciudad fue la más visitada?
</div>
</div>
<div class="form_fields js_question_image_wrapper">
<figure class="m_figure js_answer_image anim_all">
<a class="m_figure_content m_figure_content_image image_lightbox" data-href="URL_ORIGINAL" data-after-href="">
<img width="628" height="353" class="m_figure_img js_question_image" src="URL_IMAGEN">
</a>
</figure>
</div>
<!-- Mensaje de respuesta correcta -->
<div style="display: none;" class="js_answer_ok">
<p>¡Correcto! Bangkok lidera el ranking.</p>
</div>
<!-- Mensaje de respuesta incorrecta -->
<div style="display: none;" class="js_answer_ko">
Fallaste... Bangkok lidera el ranking.
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<!-- Respuesta correcta: data-ok="1" -->
<li class="li_wrapper m_options_list_item answer_XXXXX js_quizz_answer js_checkbox_container js_ok_ko_class_placement ... only-text-answer">
<div class="m_options_list_input no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-ok="1" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Bangkok" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="...">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="...">Bangkok</label>
</div>
</div>
</li>
<!-- Respuestas incorrectas: data-ok="-1" -->
<li class="li_wrapper m_options_list_item answer_XXXXX js_quizz_answer js_checkbox_container js_ok_ko_class_placement ... only-text-answer">
<div class="m_options_list_input no-description">
<div class="m_option">
<input data-ok="-1" data-next="1" ... type="radio" ...>
<div class="control-point"></div>
<label ...>Londres</label>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
Estado post-respuesta, tras seleccionar:
- Si acierta:
js_answer_okse muestra; la<li>con la respuesta correcta recibejs_quizz_question_okyno_click. - Si falla:
js_answer_kose muestra; la<li>seleccionada (incorrecta) recibejs_quizz_question_koyno_click. Las opciones no seleccionadas quedan conreadonlyydisabled.
<!-- Ejemplo post-respuesta: usuario ha seleccionado la opción incorrecta -->
<li class="... only-text-answer js_quizz_question_ok no_click">
<!-- Respuesta correcta (no seleccionada) -->
<input data-ok="1" ... type="radio" value="XXXXX">
</li>
<li class="... only-text-answer js_quizz_question_ko no_click">
<!-- Respuesta incorrecta (seleccionada por el usuario) -->
<input data-ok="-1" ... type="radio" value="XXXXX" readonly="readonly" disabled="">
</li>
2.3.17. Pregunta con texto (e/o imagen) + respuesta con texto a escoger entre varias opciones + respuesta textual.
A la hora de ofrecer respuestas a los participantes, tenemos la posibilidad no solo de establecer una respuesta cerrada, sino de habilitar un campo para que el usuario escriba su respuesta. Así, el participante podrá escoger su respuesta entre las diferentes opciones que le damos o, si no aplica ninguna, escribir otra.
Además de incluir el campo de respuesta textual a completar por el participante, podremos personalizar el mensaje por defecto que queremos que le aparezca. Lo vemos con un ejemplo: Preguntamos a los usuarios qué aspecto de un alojamiento es más importante para ellos a la hora de realizar una reserva. En tipo de respuesta, seleccionamos respuesta a elegir entre varias opciones (Ubicación, precio, servicios u otros) y, en esta última opción 'otros', habilitamos el campo de pregunta textual para que el participante escriba lo que quiera y lo personalizamos (Escribe tu respuesta).
Cuyo html sería:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_radio_button js_type_radio_button js_radio_button body current" data-forkable="false" data-position="19" data-question-id="50115" data-question-text="¿Qué lo que más valoras a la hora de reservar un alojamiento?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-19" role="tabpanel" aria-labelledby="wizard-h-19" aria-hidden="false">
<div class="header_step" data-step="20">
<div class="quizz_question js_error_shake_and_mark_step_error" style="position: relative; left: 0px;">
¿Qué lo que más valoras a la hora de reservar un alojamiento?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement " style="position: relative; left: 0px;"></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50115">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end
answer_columns_2">
.
.
.
<li class="li_wrapper m_options_list_item answer_149665 tt_answer_3 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description ">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="1" autocomplete="off" data-textual-answer="Otros" data-question-type="radio_button" class="m_option_input js_quizz_radio_button valid" type="radio" value="149665" name="participation[promo_response_attributes][response_50115]" id="participation_promo_response_attributes_response_50115_149665" aria-invalid="false">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50115_149665">
Otros
</label>
</div>
</div>
<div class="form_input extra-text-response-option">
<div class="d-flex flex-row row justify-content-center align-items-start">
<div class="col-12 col-md-6 col-md-offset-3">
<input placeholder="Escribe tu respuesta" class="js_quizz_extra_text" style="" data-rule-required="true" type="text" name="participation[promo_response_attributes][response_50115_extra_text_149665]" id="participation_promo_response_attributes_response_50115_extra_text_149665">
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
2.3.18. Pregunta sin respuesta.
Otra de las opciones que tenemos a la hora de crear el quiz es incluir solo contenido, que el participante visualizará, sin dar opción a responder. Ese contenido puede ser html, banner, imagen, vídeo, etc. Para ello, tenemos que dejar en blanco el campo pregunta y, en 'Tipos de respuestas', seleccionar la opción 'Pregunta sin respuesta (el usuario solo visualizará un contenido)'.
Una de las principales utilidades de este tipo de contenido es mostrar publicidad a los usuarios que estén completando un quiz. De esa manera, les parecerá por ejemplo un vídeo con publicidad o les saltará un banner entre una pregunta y otra.
También es muy útil emplear este tipo de respuesta para mostrar una imagen o vídeo sobre el que formularás una o varias preguntas en el siguiente paso del quiz. Lo vemos con un ejemplo:
El html sería:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_inline_advertisement js_type_inline_advertisement js_inline_advertisement body current" data-forkable="false" data-position="20" data-question-id="50116" data-question-text="" data-question-type="inline_advertisement" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-20" role="tabpanel" aria-labelledby="wizard-h-20" aria-hidden="false">
<div class="header_step" data-step="21">
<div class="quizz_question js_error_shake_and_mark_step_error" style="position: relative; left: 0px;">
</div>
</div>
<div class="form_fields">
<div class="js_error_placement " style="position: relative; left: 0px;"></div>
<div class="advertisement-question">
<div style="position: relative; height: 0px; padding-bottom: 56.25%; text-align: center;"><div class="advertisement_body_with_video"><iframe allowfullscreen="" src="https://www.youtube.com/embed/5L2N4CRIw60?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0"></iframe></div></div>
</div>
</div>
</section>
El html sería:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_radio_button js_type_radio_button js_radio_button body current" data-forkable="false" data-position="21" data-question-id="50117" data-question-text="¿Qué famoso museo aparece en el vídeo que acabas de ver?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-21" role="tabpanel" aria-labelledby="wizard-h-21" aria-hidden="false">
<div class="header_step" data-step="22">
<div class="quizz_question js_error_shake_and_mark_step_error" style="position: relative; left: 0px;">
¿Qué famoso museo aparece en el vídeo que acabas de ver?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement " style="position: relative; left: 0px;"></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50117">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end
answer_columns_2">
<li class="li_wrapper m_options_list_item answer_149666 tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description ">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Museo Thyssen – Bornemisza, Madrid" data-question-type="radio_button" class="m_option_input js_quizz_radio_button valid" type="radio" value="149666" name="participation[promo_response_attributes][response_50117]" id="participation_promo_response_attributes_response_50117_149666" aria-invalid="false">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50117_149666">
Museo Thyssen – Bornemisza, Madrid
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</section>
2.3.19. Pregunta textual + respuesta con imagen o vídeo subido por el participante.
Con esta tipología de pregunta/respuesta, formulamos una pregunta al usuario y le damos la opción de que, al responder, suba contenido ya sea en forma de imagen o de vídeo. Podemos utilizar esta funcionalidad como una pregunta más de nuestro quiz o para crear un concurso de fotos o vídeos.
Pregunta textual + respuesta del participante mediante imagen: ten cuenta que la posibilidad de que el usuario pueda subir más de una foto está solo disponible para Cool Promo White Label.
- Pregunta textual + respuesta del participante mediante vídeo: los participantes podrán subir su vídeo de Youtube, Vimeo o Vine.
Cuyo html sería:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_ask_image js_type_ask_image js_ask_image body current" data-forkable="false" data-position="22" data-question-id="50118" data-question-text="Cuéntanos, a través de una fotografía, qué es para ti viajar." data-question-type="ask_image" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-22" role="tabpanel" aria-labelledby="wizard-h-22" aria-hidden="false">
<div class="header_step" data-step="23">
<div class="quizz_question js_error_shake_and_mark_step_error" style="position: relative; left: 0px;">
Cuéntanos, a través de una fotografía, qué es para ti viajar.
</div>
</div>
<div class="form_fields">
<div class="js_error_placement " style="position: relative; left: 0px;"></div>
<div class="d-flex justify-content-center h-100 upload-contender">
<!-- timer -->
<div class="d-flex justify-content-center flex-column js_ask_picture_form_field js_quiz_ask_picture_form_field css_quizz css_quizz_50118">
<div class="field_wrap js_top_enclosing ">
<div class="upload-contender js_enclosing js_data_promo_responses_transloadit_response_50118 js_data_promo_responses_transloadit_response js_error_placement_parent">
<textarea style="display:none" class="js_transloadit_data" name="participation[promo_response_attributes][transloadit_response_50118]" id="participation_promo_response_attributes_transloadit_response_50118"></textarea>
<div class="js_error_placement" style="position: relative; left: 0px;"></div>
<div class="js_transloadit_error" style="display: none;"></div>
<div class="upload_image_btn js_upload_image_btn ">
<div class="m_btn m_btn_standard button btn-stock">
<span class="js_upload_btn_text upload-btn-text">Elegir imagen
<svg width="20px" height="20px" version="1.1" id="image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve" class="image">
<path class="image-path" d="M12,1H0v12h12V1z M11,10H1V2h10V10z M8,5L7.3,6.4L5,3L2,9h8L8,5z M13,3.9V14H1.9l-0.1,0.7L13.7,16L15,4.1L13,3.9z"></path>
</svg>
</span>
<input type="file" name="js_form_for_promo_responses_transloadit_response_50118" id="js_form_for_promo_responses_transloadit_response_50118_fake_id_556" data-params="{"auth":{"key":"4914af5b0fb040a492da5ecbd7a4bf37","max_size":10485760,"expires":"2023/08/03 06:52:57+00:00"},"template_id":"58343500778d11e787fb7d5849a052e5","steps":{"files":{"use":":original","robot":"/file/filter","result":false,"accepts":[["${file.mime}","regex","image"]]}},"fields":{"user_id":null,"account_id":null,"promotion_id":87264,"current_promo_user_id":68841844,"object_class":"PromoResponse","object_id":null,"request_url":"https://www.your-promos.com/promos/ct_demo_all_quiz_question_types/participations/new?locale=es\u0026use_auth=anonymous\u0026v=2c644\u0026referer=https%3A%2F%2Fwww.cool-tabs.com%2F","current_time_utc":"2023/08/03 05:22:57+00:00","current_time":"2023-08-03 07:22:57 +0200"},"notify_url":"https://www.cool-tabs.com/api/transloadit_notifications"}" data-signature="7c87bd192920fa8dbc660d012c5fb3657e301cfe" data-behavior="transloadit_file" data-service="https://api2-us-east-1.transloadit.com/" data-original-image-txt="Elegir imagen" data-related-form="form_for_promo_responses_transloadit_response_50118" data-thumb-name=":original" data-error-filter-failed="Este fichero no es una imagen. Por favor, escoge una imagen" accept="image/*" data-max-size="10485760" data-error-max-size="Lo sentimos, pero la imagen que has intentado subir es demasiado grande. El tamaño máximo admitido en esta campaña es de 10 megabytes." size="50">
</div>
</div>
<div class="delete_img_btn js_delete_img_btn tt_not_present" style=" display: none;">
<div class="btn btn-danger m_btn">
<span><i class="fas fa-trash-alt"></i></span>
</div>
</div>
<div class="js_transloadit_progress css_transloadit_progress"><div>
</div>
</div>
<div class="js_result_thumb"></div>
</div>
<input class="jj_transloadit_destroy" autocomplete="off" type="hidden" name="participation[promo_response_attributes][destroy_response_50118]" id="participation_promo_response_attributes_destroy_response_50118">
</div>
</div>
</div>
</div>
</section>
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_ask_video js_type_ask_video js_ask_video body current" data-forkable="false" data-position="23" data-question-id="50119" data-question-text="Sube tu vídeo contándonos, en menos de 30 segundos, qué es lo que más te gusta de viajar" data-question-type="ask_video" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-23" role="tabpanel" aria-labelledby="wizard-h-23" aria-hidden="false">
<div class="header_step" data-step="24">
<div class="quizz_question js_error_shake_and_mark_step_error" style="position: relative; left: 0px;">
Sube tu vídeo contándonos, en menos de 30 segundos, qué es lo que más te gusta de viajar
</div>
</div>
<div class="form_fields">
<div class="js_error_placement " style="position: relative; left: 0px;"></div>
<div>
<!-- timer -->
<div class="video_wrapper js_ask_video_form_field js_quiz_ask_video_form_field css_quizz css_quizz_50119">
<div class="video_options js_video_options justify-content-center row">
<a class="video" href="#"><i class=" fas fa-video " aria-hidden="true"></i></a>
<a class="youtube active" href="#"><i class=" fab fa-youtube " aria-hidden="true"></i></a>
<a class="vimeo" href="#"><i class=" fab fa-vimeo " aria-hidden="true"></i></a>
<a class="vine" href="#"><i class=" fab fa-vine " aria-hidden="true"></i></a>
</div>
<div class="form_input">
<div class="js_video_url flex-row row justify-content-center align-items-start" style="">
<div class="col-12">
<input placeholder="Escribe una url válida de Youtube, Vine o Vimeo" class="" type="text" name="participation[promo_response_attributes][video_url_50119]" id="participation_promo_response_attributes_video_url_50119">
</div>
</div>
</div>
<div class="field_wrap js_top_enclosing ">
<div class="upload-contender js_enclosing js_data_promo_responses_transloadit_video_response_50119 js_data_promo_responses_transloadit_video_response js_error_placement_parent" style="display: none;">
<textarea style="display:none" class="js_transloadit_data" name="participation[promo_response_attributes][transloadit_video_response_50119]" id="participation_promo_response_attributes_transloadit_video_response_50119"></textarea>
<div class="js_error_placement" style="position: relative; left: 0px;"></div>
<div class="js_transloadit_error" style="display: none;"></div>
<div class="upload_image_btn js_upload_image_btn ">
<div class="m_btn m_btn_standard button btn-stock">
<span class="js_upload_btn_text upload-btn-text">Elegir vídeo
<svg width="20px" height="20px" version="1.1" id="video" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve" class="video">
<path class="video-path" d="M15.3,4c-0.2,0-0.3,0.1-0.5,0.2l-2.8,2V4.5C12,3.7,11.3,3,10.5,3h-9C0.7,3,0,3.7,0,4.5v7C0,12.3,0.7,13,1.5,13h9
c0.8,0,1.5-0.7,1.5-1.5V9.8l2.8,2c0.2,0.1,0.3,0.2,0.5,0.2l0,0c0.2,0,0.4-0.1,0.6-0.3c0.1-0.1,0.2-0.3,0.2-0.5V4.8
C16,4.3,15.6,4,15.3,4L15.3,4z"></path>
</svg>
</span>
<input type="file" name="js_form_for_promo_responses_transloadit_video_response_50119" id="js_form_for_promo_responses_transloadit_video_response_50119_fake_id_437" data-params="{"auth":{"key":"4914af5b0fb040a492da5ecbd7a4bf37","max_size":104857600,"expires":"2023/08/03 06:52:57+00:00"},"template_id":"e4d7e9b0d4f911e7bd5573ac4034b33d","steps":{"files":{"use":":original","robot":"/file/filter","result":false,"accepts":[["${file.mime}","regex","video|audio"]]}},"fields":{"user_id":null,"account_id":null,"promotion_id":87264,"current_promo_user_id":68841844,"object_class":"PromoResponse","object_id":null,"request_url":"https://www.your-promos.com/promos/ct_demo_all_quiz_question_types/participations/new?locale=es\u0026use_auth=anonymous\u0026v=2c644\u0026referer=https%3A%2F%2Fwww.cool-tabs.com%2F","current_time_utc":"2023/08/03 05:22:57+00:00","current_time":"2023-08-03 07:22:57 +0200"},"notify_url":"https://www.cool-tabs.com/api/transloadit_notifications"}" data-signature="61a60b4ed5338a471e4d62d305fc54e98e13f773" data-behavior="transloadit_file" data-service="https://api2-us-east-1.transloadit.com/" data-original-image-txt="Elegir vídeo" data-related-form="form_for_promo_responses_transloadit_video_response_50119" data-thumb-name="screenshot" data-error-filter-failed="Este fichero no es un vídeo. Por favor, escoge un vídeo" accept="video/*" data-max-size="104857600" data-error-max-size="Lo sentimos, pero la imagen que has intentado subir es demasiado grande. El tamaño máximo admitido en esta campaña es de 100 megabytes." size="50">
</div>
</div>
<div class="delete_img_btn js_delete_img_btn tt_not_present" style=" display: none;">
<div class="btn btn-danger m_btn">
<span><i class="fas fa-trash-alt"></i></span>
</div>
</div>
<div class="js_transloadit_progress css_transloadit_progress"><div>
</div>
</div>
<div class="js_result_thumb">
</div>
</div>
<input class="jj_transloadit_destroy" autocomplete="off" type="hidden" name="participation[promo_response_attributes][destroy_video_response_50119]" id="participation_promo_response_attributes_destroy_video_response_50119"></div>
</div>
</div>
</div>
</section>
Además podrás habilitar la opción para que los usuarios suban su vídeo directamente desde el móvil o el ordenador, de manera que no tengan que subirlos previamente a ninguna plataforma de vídeos. Ten en cuenta que esta opción está solo disponible para Cool Promo White Label e incluye la subida de 50 vídeos. Una vez superado ese número, tiene un coste adicional de 50 euros por cada 100 vídeos.
2.3.20. Pregunta textual + respuesta con fecha.
Con esta tipología de pregunta/respuesta, formulamos una pregunta al usuario y le damos la opción de que, al responder, elija una fecha.
Html:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_datepicker js_type_datepicker js_datepicker body current" data-forkable="false" data-position="28" data-question-id="50123" data-question-text="¿Cuándo fue tu último viaje?" data-question-type="datepicker" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-28" role="tabpanel" aria-labelledby="wizard-h-28" aria-hidden="false">
<div class="header_step" data-step="29">
<div class="quizz_question js_error_shake_and_mark_step_error" style="position: relative; left: 0px;">
¿Cuándo fue tu último viaje?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement " style="position: relative; left: 0px;"></div>
<!-- timer -->
<div class="form_input js_error_placement_parent text-center">
<div class="row js_error_placement" style="position: relative; left: 0px;"></div>
<div class="col-12 col-md-6 mx-auto">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-question-type="datepicker" readonly="readonly" class="js_datepicker hasDatepicker" data-altfield="#participation_promo_response_attributes_response_50123" type="text" name="participation[promo_response_attributes][response_50123]" id="participation_promo_response_attributes_response_50123">
</div>
</div>
</div>
</section>
2.3.21. Valida un código o cupón según las opciones que configures en la sección de "Validación de códigos".
Para poder usar este tipo de respuesta, tendremos que activar la opción de "Activar validación de cupones o códigos", en la sección de "Cupones". De esta manera, el usuario, si quiere participar, tendrá que introducir un código o cupón que previamente se les ha facilitado.
Cuyo html sería:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_validate_coupon js_type_validate_coupon js_validate_coupon body current" data-forkable="false" data-position="29" data-question-id="132377" data-question-text="Introduce tu código para participar" data-question-type="validate_coupon" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-29" role="tabpanel" aria-labelledby="wizard-h-29" aria-hidden="false">
<div class="header_step" data-step="30">
<div class="quizz_question js_error_shake_and_mark_step_error" style="position: relative; left: 0px;">
Introduce tu código para participar
</div>
</div>
<div class="form_fields">
<div class="js_error_placement required_field error_active" style="position: relative; left: 0px;">
<label id="participation_validated_coupon_code-error" class="step_error" for="participation_validated_coupon_code" style="display: none;">
</label>
</div>
<div>
<div class="form_input css_quizz css_quizz_132377">
<div class="d-flex row justify-content-center align-items-start">
<div class="col-12 col-md-8 mx-auto">
<span>
<input data-msg-required="Campo obligatorio" required="required" data-next="1" data-adds-extra-text="0" autocomplete="off" data-question-type="validate_coupon" type="text" name="participation[validated_coupon_code]" id="participation_validated_coupon_code" class="step_error" aria-invalid="true">
</span>
</div>
</div>
</div>
</div>
</div>
</section>
2.3.22. Matriz de preguntas con múltiples opciones y una única elección.
Con esta tipología de pregunta/respuesta, formulamos una pregunta general al usuario y establecemos las preguntas de la matriz que queramos, combinando respuestas para que el usuario seleccione una opción.
Ejemplo: en un cuestionario de satisfacción, quieres conocer la experiencia del usuario al realizar cualquier tipo de servicio. Entonces tendremos una matriz compuesta por una pregunta principal y un conjunto de respuestas a seleccionar.
El html sería el siguiente:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_matrix_single js_type_matrix_single js_matrix_single body current" data-forkable="false" data-position="25" data-question-id="50120" data-question-text="Basándote en tu última compra, ¿cómo valorarías los siguientes atributos?" data-question-type="matrix_single" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-25" role="tabpanel" aria-labelledby="wizard-h-25" aria-hidden="false">
<div class="header_step" data-step="26">
<div class="quizz_question js_error_shake_and_mark_step_error" style="position: relative; left: 0px;">
Basándote en tu última compra, ¿cómo valorarías los siguientes atributos?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement " style="position: relative; left: 0px;"></div>
<div>
<!-- timer -->
<div class="matrix_content matrix_single css_quizz css_quizz_50120 ">
<ul class="cols-5">
<li class="question_row header">
<span class="question" style="max-width: calc( (100% / (5 + 1) ) );"></span>
<span class="answer" style="max-width: calc( (100% / (5 + 1) ) );">Muy por debajo del promedio</span>
<span class="answer" style="max-width: calc( (100% / (5 + 1) ) );">Por debajo del promedio</span>
<span class="answer" style="max-width: calc( (100% / (5 + 1) ) );">Promedio</span>
<span class="answer" style="max-width: calc( (100% / (5 + 1) ) );">Por encima del promedio</span>
<span class="answer" style="max-width: calc( (100% / (5 + 1) ) );">Muy por encima del promedio</span>
</li>
<li class="question_row">
<span class="question" style="max-width: calc( (100% / (5 + 1) ) );">Experiencia de compra</span>
<span class="answer" style="max-width: calc( (100% / (5 + 1) ) );">
<input class="js_quizz_radio_button js_quizz_matrix_single_radio_button" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Muy por debajo del promedio" data-question-type="matrix_single" type="radio" value="149670" name="participation[promo_response_attributes][response_50120_matrix_question_847]" id="participation_promo_response_attributes_response_50120_matrix_question_847_149670">
</span>
<span class="answer" style="max-width: calc( (100% / (5 + 1) ) );">
<input class="js_quizz_radio_button js_quizz_matrix_single_radio_button" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Por debajo del promedio" data-question-type="matrix_single" type="radio" value="149671" name="participation[promo_response_attributes][response_50120_matrix_question_847]" id="participation_promo_response_attributes_response_50120_matrix_question_847_149671">
</span>
<span class="answer" style="max-width: calc( (100% / (5 + 1) ) );">
<input class="js_quizz_radio_button js_quizz_matrix_single_radio_button" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Promedio" data-question-type="matrix_single" type="radio" value="149672" name="participation[promo_response_attributes][response_50120_matrix_question_847]" id="participation_promo_response_attributes_response_50120_matrix_question_847_149672">
</span>
<span class="answer" style="max-width: calc( (100% / (5 + 1) ) );">
<input class="js_quizz_radio_button js_quizz_matrix_single_radio_button" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Por encima del promedio" data-question-type="matrix_single" type="radio" value="149673" name="participation[promo_response_attributes][response_50120_matrix_question_847]" id="participation_promo_response_attributes_response_50120_matrix_question_847_149673">
</span>
<span class="answer" style="max-width: calc( (100% / (5 + 1) ) );">
<input class="js_quizz_radio_button js_quizz_matrix_single_radio_button" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Muy por encima del promedio" data-question-type="matrix_single" type="radio" value="149674" name="participation[promo_response_attributes][response_50120_matrix_question_847]" id="participation_promo_response_attributes_response_50120_matrix_question_847_149674">
</span>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</section>
2.3.23. Matriz de preguntas con múltiples opciones y elección múltiple.
En este caso, el usuario puede seleccionar más de una opción para sus respuestas.
Html:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_matrix_multiple js_type_matrix_multiple js_matrix_multiple body current" data-forkable="false" data-position="26" data-question-id="50121" data-question-text="¿En qué momento del día haces uso de las siguientes redes sociales?" data-question-type="matrix_multiple" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-26" role="tabpanel" aria-labelledby="wizard-h-26" aria-hidden="false">
<div class="header_step" data-step="27">
<div class="quizz_question js_error_shake_and_mark_step_error" style="position: relative; left: 0px;">
¿En qué momento del día haces uso de las siguientes redes sociales?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement " style="position: relative; left: 0px;"></div>
<div>
<!-- timer -->
<div class="matrix_content matrix_multiple css_quizz css_quizz_50121 ">
<ul class="cols-3">
<li class="question_row header">
<span class="question" style="max-width: calc( (100% / (3 + 1) ) );"></span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">Mañana</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">Tarde</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">Noche</span>
</li>
<li class="question_row">
<span class="question" style="max-width: calc( (100% / (3 + 1) ) );">Facebook</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input name="participation[promo_response_attributes][response_50121_matrix_question_850][]" type="hidden" value="0" autocomplete="off"><input class="js_quizz_checkbox valid" data-rule-required="false" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Mañana" data-question-type="matrix_multiple" type="checkbox" value="149675" name="participation[promo_response_attributes][response_50121_matrix_question_850][]" id="participation_promo_response_attributes_response_50121_matrix_question_850_149675">
</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input name="participation[promo_response_attributes][response_50121_matrix_question_850][]" type="hidden" value="0" autocomplete="off"><input class="js_quizz_checkbox" data-rule-required="false" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Tarde" data-question-type="matrix_multiple" type="checkbox" value="149676" name="participation[promo_response_attributes][response_50121_matrix_question_850][]" id="participation_promo_response_attributes_response_50121_matrix_question_850_149676" aria-invalid="false">
</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input name="participation[promo_response_attributes][response_50121_matrix_question_850][]" type="hidden" value="0" autocomplete="off"><input class="js_quizz_checkbox" data-rule-required="false" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Noche" data-question-type="matrix_multiple" type="checkbox" value="149677" name="participation[promo_response_attributes][response_50121_matrix_question_850][]" id="participation_promo_response_attributes_response_50121_matrix_question_850_149677">
</span>
</li>
<li class="question_row">
<span class="question" style="max-width: calc( (100% / (3 + 1) ) );">Twitter</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input name="participation[promo_response_attributes][response_50121_matrix_question_851][]" type="hidden" value="0" autocomplete="off"><input class="js_quizz_checkbox valid" data-rule-required="false" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Mañana" data-question-type="matrix_multiple" type="checkbox" value="149675" name="participation[promo_response_attributes][response_50121_matrix_question_851][]" id="participation_promo_response_attributes_response_50121_matrix_question_851_149675" aria-invalid="false">
</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input name="participation[promo_response_attributes][response_50121_matrix_question_851][]" type="hidden" value="0" autocomplete="off"><input class="js_quizz_checkbox" data-rule-required="false" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Tarde" data-question-type="matrix_multiple" type="checkbox" value="149676" name="participation[promo_response_attributes][response_50121_matrix_question_851][]" id="participation_promo_response_attributes_response_50121_matrix_question_851_149676">
</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input name="participation[promo_response_attributes][response_50121_matrix_question_851][]" type="hidden" value="0" autocomplete="off"><input class="js_quizz_checkbox" data-rule-required="false" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Noche" data-question-type="matrix_multiple" type="checkbox" value="149677" name="participation[promo_response_attributes][response_50121_matrix_question_851][]" id="participation_promo_response_attributes_response_50121_matrix_question_851_149677">
</span>
</li>
<li class="question_row">
<span class="question" style="max-width: calc( (100% / (3 + 1) ) );">Instagram</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input name="participation[promo_response_attributes][response_50121_matrix_question_852][]" type="hidden" value="0" autocomplete="off"><input class="js_quizz_checkbox valid" data-rule-required="false" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Mañana" data-question-type="matrix_multiple" type="checkbox" value="149675" name="participation[promo_response_attributes][response_50121_matrix_question_852][]" id="participation_promo_response_attributes_response_50121_matrix_question_852_149675">
</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input name="participation[promo_response_attributes][response_50121_matrix_question_852][]" type="hidden" value="0" autocomplete="off"><input class="js_quizz_checkbox" data-rule-required="false" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Tarde" data-question-type="matrix_multiple" type="checkbox" value="149676" name="participation[promo_response_attributes][response_50121_matrix_question_852][]" id="participation_promo_response_attributes_response_50121_matrix_question_852_149676" aria-invalid="false">
</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input name="participation[promo_response_attributes][response_50121_matrix_question_852][]" type="hidden" value="0" autocomplete="off"><input class="js_quizz_checkbox" data-rule-required="false" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Noche" data-question-type="matrix_multiple" type="checkbox" value="149677" name="participation[promo_response_attributes][response_50121_matrix_question_852][]" id="participation_promo_response_attributes_response_50121_matrix_question_852_149677" aria-invalid="false">
</span>
</li>
</ul>
</div>
</div>
</div>
</section>
2.3.24. Matriz con respuestas textuales. El participante escribe la respuesta.
Esta opción permite a los usuarios escribir su opinión sobre cada tema.
El html sería:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_matrix_free_text js_type_matrix_free_text js_matrix_free_text body current" data-forkable="false" data-position="27" data-question-id="50122" data-question-text="Qué destinos visitarías" data-question-type="matrix_free_text" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-27" role="tabpanel" aria-labelledby="wizard-h-27" aria-hidden="false">
<div class="header_step" data-step="28">
<div class="quizz_question js_error_shake_and_mark_step_error" style="position: relative; left: 0px;">
Qué destinos visitarías
</div>
</div>
<div class="form_fields">
<div class="js_error_placement " style="position: relative; left: 0px;"></div>
<div>
<!-- timer -->
<div class="matrix_content matrix_free_text css_quizz css_quizz_50122 ">
<ul class="cols-3">
<li class="question_row header">
<span class="question" style="max-width: calc( (100% / (3 + 1) ) );"></span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">Semana Santa</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">Verano</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">Navidad</span>
</li>
<li class="question_row">
<span class="question" style="max-width: calc( (100% / (3 + 1) ) );">España</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input class="valid" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Semana Santa" data-question-type="matrix_free_text" type="text" name="participation[promo_response_attributes][response_50122_matrix_question_853_answer_149678]" id="participation_promo_response_attributes_response_50122_matrix_question_853_answer_149678" aria-invalid="false">
</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input class="valid" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Verano" data-question-type="matrix_free_text" type="text" name="participation[promo_response_attributes][response_50122_matrix_question_853_answer_149679]" id="participation_promo_response_attributes_response_50122_matrix_question_853_answer_149679" aria-invalid="false">
</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input class="" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Navidad" data-question-type="matrix_free_text" type="text" name="participation[promo_response_attributes][response_50122_matrix_question_853_answer_149680]" id="participation_promo_response_attributes_response_50122_matrix_question_853_answer_149680">
</span>
</li>
<li class="question_row">
<span class="question" style="max-width: calc( (100% / (3 + 1) ) );">Europa</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input class="" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Semana Santa" data-question-type="matrix_free_text" type="text" name="participation[promo_response_attributes][response_50122_matrix_question_854_answer_149678]" id="participation_promo_response_attributes_response_50122_matrix_question_854_answer_149678">
</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input class="" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Verano" data-question-type="matrix_free_text" type="text" name="participation[promo_response_attributes][response_50122_matrix_question_854_answer_149679]" id="participation_promo_response_attributes_response_50122_matrix_question_854_answer_149679">
</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input class="" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Navidad" data-question-type="matrix_free_text" type="text" name="participation[promo_response_attributes][response_50122_matrix_question_854_answer_149680]" id="participation_promo_response_attributes_response_50122_matrix_question_854_answer_149680">
</span>
</li>
<li class="question_row">
<span class="question" style="max-width: calc( (100% / (3 + 1) ) );">Oriente Medio</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input class="" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Semana Santa" data-question-type="matrix_free_text" type="text" name="participation[promo_response_attributes][response_50122_matrix_question_12508_answer_149678]" id="participation_promo_response_attributes_response_50122_matrix_question_12508_answer_149678">
</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input class="" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Verano" data-question-type="matrix_free_text" type="text" name="participation[promo_response_attributes][response_50122_matrix_question_12508_answer_149679]" id="participation_promo_response_attributes_response_50122_matrix_question_12508_answer_149679">
</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input class="" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Navidad" data-question-type="matrix_free_text" type="text" name="participation[promo_response_attributes][response_50122_matrix_question_12508_answer_149680]" id="participation_promo_response_attributes_response_50122_matrix_question_12508_answer_149680">
</span>
</li>
<li class="question_row">
<span class="question" style="max-width: calc( (100% / (3 + 1) ) );">Asia</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input class="" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Semana Santa" data-question-type="matrix_free_text" type="text" name="participation[promo_response_attributes][response_50122_matrix_question_12509_answer_149678]" id="participation_promo_response_attributes_response_50122_matrix_question_12509_answer_149678">
</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input class="" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Verano" data-question-type="matrix_free_text" type="text" name="participation[promo_response_attributes][response_50122_matrix_question_12509_answer_149679]" id="participation_promo_response_attributes_response_50122_matrix_question_12509_answer_149679">
</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input class="" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Navidad" data-question-type="matrix_free_text" type="text" name="participation[promo_response_attributes][response_50122_matrix_question_12509_answer_149680]" id="participation_promo_response_attributes_response_50122_matrix_question_12509_answer_149680">
</span>
</li>
</ul>
</div>
</div>
</div>
</section>
3. Otras especificaciones.
Si tienes alguna consulta durante el proceso, no dudes en contactar con nosotros a través del chat de nuestra web o nuestro mail de soporte help@cool-tabs.com
4. Contenido relacionado.
Consulta nuestra demo de tipologías de preguntas y respuestas de un quiz para comprobar cómo quedarían en tu quiz o cuestionario.
Qué tipos de preguntas/respuestas puedes incluir en un quiz o encuesta >>
Comienza a crear tu quiz o cuestionario >>
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.