1. Introducción.
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 campañas 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.
El objetivo de este tutorial 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.
2. Paso a paso.
Además, con nuestra personalización avanzada es posible usar tu propio HTML custom y css para la/s pantalla/s del formulario de la siguiente forma:
<!DOCTYPE html>
<html {{{ cool_tabs_html_attributes }}} >
<head>
<!-- {{{ cool_tabs_head }}} -->
</head>
<body {{{ cool_tabs_body_attributes }}} >
<!-- {{{ 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. Las variables {{{ cool_tabs_head }}} y {{{ cool_tabs_body_end }}} son necesarias ya que cargan scripts y código necesarios para el correcto funcionamiento de las campañas, así como para el guardado de los datos de participación y visita de las mismas.
2.1. Clases personalizadas por cada pantalla.
Las campañas pueden configurarse de tres maneras: Quiz por pasos (una pregunta por pantalla), Quiz en 2 pasos (con todas las preguntas en una página y Formulario de recogida de datos personales en otra) y Quiz y Formulario de datos personales en una misma página.
En el caso de las Campañas con preguntas de Quiz por pasos y en 2 pasos 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.
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>
Quiz en un misma página:
<body>
<div class="wrapper form_layout js_locator_for_wizard_step_indicators">
.
</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>
2.2. 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>
2.3. Tipología de preguntas y respuestas de un quiz.
2.3.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 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_free_text js_type_free_text js_free_text" data-forkable="false" data-position="2" data-question-id="70885" 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" style="">
<div class="header_step" data-step="3">
<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>
<!-- timer -->
<div class="form_input css_quizz css_quizz_70885">
<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-adds-extra-text="0" autocomplete="off" data-question-type="free_text" type="text" name="participation[promo_response_attributes][response_70885]" id="participation_promo_response_attributes_response_70885" />
</div>
</div>
</div>
</div>
</div>
</section>
2.3.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 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_rate js_type_rate js_rate body current" data-forkable="false" data-position="3" data-question-id="50099" data-question-text="¿Qué valoración le darías al destino que has visitado?" data-question-type="rate" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-3" role="tabpanel" aria-labelledby="wizard-h-3" aria-hidden="false">
<div class="header_step" data-step="4">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Qué valoración le darías al destino que has visitado?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div class="mb-4">
<!-- timer -->
<div class="d-flex flex-row flex-wrap justify-content-center align-items-center form_fields star_row css_quizz css_quizz_50099" style="cursor: pointer;">
<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_50099]" style="cursor: pointer;">
<i data-alt="1" class="star-on-png" title="1"></i>
<i data-alt="2" class="star-on-png" title="2"></i>
<i data-alt="3" class="star-on-png" title="3"></i>
<i data-alt="4" class="star-on-png" title="4"></i>
<i data-alt="5" class="star-on-png" title="5"></i>
<i data-alt="6" class="star-off-png" title="6"></i>
<i data-alt="7" class="star-off-png" title="7"></i>
<i data-alt="8" class="star-off-png" title="8"></i>
<i data-alt="9" class="star-off-png" title="9"></i>
<i data-alt="10" class="star-off-png" title="10"></i>
<input name="participation[promo_response_attributes][response_50099]" type="hidden" value="5">
</div>
</div>
</div>
</div>
</section>
2.3.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 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_rate_numbers js_type_rate_numbers js_rate_numbers body current" data-forkable="false" data-position="4" data-question-id="50100" data-question-text="¿Qué puntuación le darías al viaje que has realizado con nosotros?" data-question-type="rate_numbers" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-4" role="tabpanel" aria-labelledby="wizard-h-4" aria-hidden="false">
<div class="header_step" data-step="5">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Qué puntuación le darías al viaje que has realizado con nosotros?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div class="star-numbers">
<!-- timer -->
<div class="form_fields star_numbers_row css_quizz css_quizz css_quizz_50100" data-max="10" data-score-name="participation[promo_response_attributes][response_50100]" 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 valid" data-next="1" data-adds-extra-text="0" autocomplete="off" data-question-type="rate_numbers" type="radio" value="0" name="participation[promo_response_attributes][response_50100]" id="participation_promo_response_attributes_response_50100_0">
<label class="m_option_label" for="participation_promo_response_attributes_response_50100_0">0</label>
</li>
<li class="star_number_1 star_number">
<input class="m_option_input js_quizz_radio_button valid" data-next="1" data-adds-extra-text="0" autocomplete="off" data-question-type="rate_numbers" type="radio" value="1" name="participation[promo_response_attributes][response_50100]" id="participation_promo_response_attributes_response_50100_1">
<label class="m_option_label" for="participation_promo_response_attributes_response_50100_1">1</label>
</li>
.
.
.
<li class="star_number_10 star_number">
<input class="m_option_input js_quizz_radio_button valid" data-next="1" data-adds-extra-text="0" autocomplete="off" data-question-type="rate_numbers" type="radio" value="10" name="participation[promo_response_attributes][response_50100]" id="participation_promo_response_attributes_response_50100_10">
<label class="m_option_label" for="participation_promo_response_attributes_response_50100_10">10</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
2.3.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, limitando 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 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_select js_type_select js_select body current" data-forkable="false" data-position="5" data-question-id="50101" data-question-text="¿Qué tipo de alojamiento sueles elegir en tus viajes?" data-question-type="select" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-5" role="tabpanel" aria-labelledby="wizard-h-5" aria-hidden="false">
<div class="header_step" data-step="6">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Qué tipo de alojamiento sueles elegir en tus viajes?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_select css_quizz css_quizz_50101">
<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 valid" data-custom="true" data-next="1" data-adds-extra-text="0" autocomplete="off" data-question-type="select" name="participation[promo_response_attributes][response_50101]" id="participation_promo_response_attributes_response_50101" aria-invalid="false">
<option value="" label=" "></option>
<option value="149589">Hotel</option>
<option value="149590">Hostal</option>
<option value="149591">B&B</option>
<option value="149592">Apartamento</option>
<option value="149593">Couchsurfing</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.
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 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="6" data-question-id="50102" 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" style="" id="wizard-p-6" role="tabpanel" aria-labelledby="wizard-h-6" aria-hidden="false">
<div class="header_step" data-step="7">
<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>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50102">
<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_149594 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="Semana Santa" data-question-type="radio_button" class="m_option_input js_quizz_radio_button valid" type="radio" value="149594" name="participation[promo_response_attributes][response_50102]" id="participation_promo_response_attributes_response_50102_149594">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50102_149594">
Semana Santa
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</section>
2.3.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 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="7" data-question-id="50103" data-question-text="¿Cuál de las siguientes capitales europeas te gustaría visitar próximamente?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-7" role="tabpanel" aria-labelledby="wizard-h-7" aria-hidden="false">
<div class="header_step" data-step="8">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Cuál de las siguientes capitales europeas te gustaría visitar próximamente?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50103">
<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_149598 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="https://uploads4.ct-assets.com/assets/promo_answer_images/cf0a1cba88f54790a53d6aa32a49d906/:original_photo-1431274172761-fca41d930114" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_image_lightbox">
<img class="m_figure_img" src="https://uploads4.ct-assets.com/assets/promo_answer_images/cf0a1cba88f54790a53d6aa32a49d906/big_photo-1431274172761-fca41d930114.jpg" width="300" height="200">
<span class="click_to_view"><i class=" fas fa-search-plus " aria-hidden="true"></i>Zoom</span>
</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="París" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="149598" name="participation[promo_response_attributes][response_50103]" id="participation_promo_response_attributes_response_50103_149598">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50103_149598">
París
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</section>
2.3.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 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="8" data-question-id="50104" data-question-text="¿Qué es lo qué más te interesa de una ciudad/país a la hora de elegirlo como destino?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-8" role="tabpanel" aria-labelledby="wizard-h-8" aria-hidden="false">
<div class="header_step" data-step="9">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Qué es lo qué más te interesa de una ciudad/país a la hora de elegirlo como destino?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50104">
<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_149603 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="https://uploads-old.ct-assets.com/assets/promo_answer_images/51487ec0096211e7862f59654d9e0f8f/:original_florence-1066314_1280.jpg" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_image_lightbox">
<img class="m_figure_img" src="https://uploads-old.ct-assets.com/assets/promo_answer_images/51487ec0096211e7862f59654d9e0f8f/big_florence-1066314_1280.jpg" width="300" height="206">
<span class="image_description">Catedral de Santa María del Fiore, Florencia (Italia)</span>
<span class="click_to_view"><i class=" fas 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">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Arquitectura" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="149603" name="participation[promo_response_attributes][response_50104]" id="participation_promo_response_attributes_response_50104_149603">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50104_149603">
Arquitectura
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</section>
2.3.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 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="9" data-question-id="50105" 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" style="" id="wizard-p-9" role="tabpanel" aria-labelledby="wizard-h-9" aria-hidden="false">
<div class="header_step" data-step="10">
<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>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50105">
<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_149608 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="https://uploads-old.ct-assets.com/assets/promo_answer_images/8375c5d0096511e7b4a6e152aee220c2/:original_Flag_of_Japan.svg.png" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_image_lightbox">
<img class="m_figure_img" src="https://uploads-old.ct-assets.com/assets/promo_answer_images/8375c5d0096511e7b4a6e152aee220c2/big_Flag_of_Japan.svg.png" width="300" height="200">
<span class="click_to_view"><i class=" fas fa-search-plus " aria-hidden="true"></i>Zoom</span>
</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="Flag_of_Japan.svg.png" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="149608" name="participation[promo_response_attributes][response_50105]" id="participation_promo_response_attributes_response_50105_149608">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50105_149608"></label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</section>
2.3.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 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="10" data-question-id="50106" 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" style="" id="wizard-p-10" role="tabpanel" aria-labelledby="wizard-h-10" aria-hidden="false">
<div class="header_step" data-step="11">
<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" style="">
<figure class="m_figure js_answer_image anim_all">
<a class="m_figure_content m_figure_content_image image_lightbox" data-href="https://uploads-old.ct-assets.com/assets/promo_question_images/5dc25db0096711e7b83dd1a14f5cf8f0/:original_maleta.jpg" data-after-href="">
<img class="m_figure_img js_question_image" src="https://uploads-old.ct-assets.com/assets/promo_question_images/5dc25db0096711e7b83dd1a14f5cf8f0/big_maleta.jpg" width="672" height="448">
<span class="click_to_view"><i class=" fas fa-search-plus " aria-hidden="true"></i>Ampliar</span>
</a>
</figure>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50106">
<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_149614 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="https://uploads-old.ct-assets.com/assets/promo_answer_images/a30593f0096811e7b83dd1a14f5cf8f0/:original_feet-1840619_960_720.jpg" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_image_lightbox">
<img class="m_figure_img opacity" src="https://uploads-old.ct-assets.com/assets/promo_answer_images/a30593f0096811e7b83dd1a14f5cf8f0/big_feet-1840619_960_720.jpg" width="300" height="200">
<span class="image_description">Zapatillas BRZ </span>
<span class="click_to_view" style="display: none;"><i class=" fas 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">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Calzado cómodo para patear la ciudad" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="149614" name="participation[promo_response_attributes][response_50106]" id="participation_promo_response_attributes_response_50106_149614">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50106_149614">
Calzado cómodo para patear la ciudad
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</section>
2.3.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 elegir entre las siguientes opciones:
Ejemplo:
El código 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="11" data-question-id="50107" data-question-text=" ¿Sabrías decirnos qué ciudad española se esconde en el vídeo? " data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-11" role="tabpanel" aria-labelledby="wizard-h-11" aria-hidden="false">
<div class="header_step" data-step="12">
<div class="quizz_question js_error_shake_and_mark_step_error">
<p> ¿Sabrías decirnos qué ciudad española se esconde en el vídeo? </p>
</div>
</div>
<div class="aspect-ratio">
<iframe class="youtube-player embed_video lazy-loaded" data-src="https://www.youtube-nocookie.com/embed/zOIawcK13DI?rel=0&" allowfullscreen="" src="https://www.youtube-nocookie.com/embed/zOIawcK13DI?rel=0&" width="397" height="360"></iframe>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50107">
<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_149619 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="Sevilla" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="149619" name="participation[promo_response_attributes][response_50107]" id="participation_promo_response_attributes_response_50107_149619">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50107_149619">
Sevilla
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</section>
2.3.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 elegir entre las siguientes opciones:
El tamaño de los vídeos se ajusta automáticamenteal tamaño de la columna que los contiene, medida que permite su correcta visualización.
El código html de esta pregunta 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="12" data-question-id="50108" data-question-text="¿En cuál de nuestros hoteles te gustaría poder alojarte?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-12" role="tabpanel" aria-labelledby="wizard-h-12" aria-hidden="false">
<div class="header_step" data-step="13">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿En cuál de nuestros hoteles te gustaría poder alojarte?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50108">
<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_149623 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" data-src="https://www.youtube-nocookie.com/embed/hK7EHGv35Dk?rel=0&" allowfullscreen="" src="https://www.youtube-nocookie.com/embed/hK7EHGv35Dk?rel=0&" width="397" height="360"></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="" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="149623" name="participation[promo_response_attributes][response_50108]" id="participation_promo_response_attributes_response_50108_149623">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50108_149623">
Seleccionar
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</section>
2.3.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 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="13" data-question-id="50109" data-question-text="¿Qué actividad de aventura no puede faltar en tus viajes?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-13" role="tabpanel" aria-labelledby="wizard-h-13" aria-hidden="false">
<div class="header_step" data-step="14">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Qué actividad de aventura no puede faltar en tus viajes?
</div>
</div>
<div class="form_fields js_question_image_wrapper" style="">
<figure class="m_figure js_answer_image anim_all">
<a class="m_figure_content m_figure_content_image image_lightbox" data-href="https://uploads-old.ct-assets.com/assets/promo_question_images/3c1e90c0097111e79e565f9704070fcf/:original_mountain-biking-1210066_960_720.jpg" data-after-href="">
<img class="m_figure_img js_question_image" src="https://uploads-old.ct-assets.com/assets/promo_question_images/3c1e90c0097111e79e565f9704070fcf/big_mountain-biking-1210066_960_720.jpg" width="672" height="504">
<span class="click_to_view"><i class=" fas fa-search-plus " aria-hidden="true"></i>Ampliar</span>
</a>
</figure>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50109">
<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_149627 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" data-src="https://www.youtube-nocookie.com/embed/x77Sb0TkHIE?rel=0&" allowfullscreen="" src="https://www.youtube-nocookie.com/embed/x77Sb0TkHIE?rel=0&" width="397" height="360"></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="Buceo " data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="149627" name="participation[promo_response_attributes][response_50109]" id="participation_promo_response_attributes_response_50109_149627">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50109_149627">
Buceo
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</section>
2.3.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 esta tipología, 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 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 question_bg js_radio_button body current" data-forkable="false" data-position="14" data-question-id="50110" 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("https://uploads-old.ct-assets.com/assets/promo_question_background_images/0d6ac6c0097311e7b88edb2866430f12/big_calendario-viajes.png"); min-height: 628px;" id="wizard-p-14" role="tabpanel" aria-labelledby="wizard-h-14" aria-hidden="false">
<div class="header_step" data-step="15">
<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>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50110">
<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_149631 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="149631" name="participation[promo_response_attributes][response_50110]" id="participation_promo_response_attributes_response_50110_149631">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50110_149631">
Una semana antes
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</section>
2.3.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 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_checkbox js_type_checkbox js_checkbox body current" data-forkable="false" data-position="15" data-question-id="50111" 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" style="" id="wizard-p-15" role="tabpanel" aria-labelledby="wizard-h-15" aria-hidden="false">
<div class="header_step" data-step="16">
<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>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50111">
<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_149635 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_50111][]" type="hidden" value="0" autocomplete="off"><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="50111" data-correct-position="1" class="m_option_input js_quizz_checkbox js_quizz_checkbox" type="checkbox" value="149635" name="participation[promo_response_attributes][response_50111][]" id="participation_promo_response_attributes_response_50111_149635">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50111_149635">
Mochilero
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</section>
2.3.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 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_checkbox js_type_checkbox js_checkbox body current" data-forkable="false" data-position="17" data-question-id="50113" data-question-text="¿Qué medio de transporte sueles utilizar para desplazarte cuando visitas una ciudad?" data-question-type="checkbox" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-17" role="tabpanel" aria-labelledby="wizard-h-17" aria-hidden="false">
<div class="header_step" data-step="18">
<div class="quizz_question js_error_shake_and_mark_step_error">
¿Qué medio de transporte sueles utilizar para desplazarte cuando visitas una ciudad?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50113">
<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_149647 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="https://uploads-old.ct-assets.com/assets/promo_answer_images/0d779b30097711e7962c15a61e8c5521/:original_metro.jpg" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_image_lightbox">
<img class="m_figure_img active" src="https://uploads-old.ct-assets.com/assets/promo_answer_images/0d779b30097711e7962c15a61e8c5521/big_metro.jpg" width="300" height="200">
<span class="click_to_view"><i class=" fas fa-search-plus " aria-hidden="true"></i>Zoom</span>
</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_50113][]" type="hidden" value="0" autocomplete="off"><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="metro.jpg" data-question-type="checkbox" data-response-id="50113" data-correct-position="1" class="m_option_input js_quizz_checkbox js_quizz_checkbox" type="checkbox" value="149647" name="participation[promo_response_attributes][response_50113][]" id="participation_promo_response_attributes_response_50113_149647">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50113_149647">
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</section>
Donde el elemento seleccionado (foto elegida por el usuario) tiene la clase 'active'
2.3.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 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="1" data-question-id="49115" data-question-text="Siete años después de celebrarse los Juegos Olímpicos de Londres 2012, una deportista recibió la medalla de oro en halterofilia, tras la descalificación por dopaje de sus rivales. ¿De qué deportista hablamos?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="7" data-last-question="false" style="" id="wizard-p-1" role="tabpanel" aria-labelledby="wizard-h-1" aria-hidden="false">
<div class="header_step" data-step="2">
<div class="quizz_question js_error_shake_and_mark_step_error">
Siete años después de celebrarse los Juegos Olímpicos de Londres 2012, una deportista recibió la medalla de oro en halterofilia, tras la descalificación por dopaje de sus rivales. ¿De qué deportista hablamos?
</div>
</div>
<!-- Mensaje de respuesta correcta -->
<div style="" class="js_answer_ok">
<p style="text-align: justify;"><span style="font-size:14px;">¡Bravo! <img draggable="false" class="emoji" alt="🏋️♀️" src="https://twemoji.maxcdn.com/v/12.1.6/72x72/1f3cb-fe0f-200d-2640-fe0f.png"> Lydia Valentín recibió, en 2019, la medalla de oro de los Juegos Olímpicos de Londres (2012), después de que se confirmase el positivo por dopaje de las cuatro deportistas que quedaron por delante de ella en la clasificación.</span>
</p>
</div>
<!-- Mensaje de respuesta incorrecta -->
<div style="display: none;" class="js_answer_ko">
<p style="text-align: justify;"><span style="font-size:14px;">Ups, no... <img draggable="false" class="emoji" alt="🏋️♀️" src="https://twemoji.maxcdn.com/v/12.1.6/72x72/1f3cb-fe0f-200d-2640-fe0f.png"> Mouna Skandi no compitió en halterofilia en los Juegos Olímpicos de Londres 2012. La que sí lo hizo fue Lydia Valentín que, tras quedar en 4ª posición, el pasado 28 de febrero, siete años después, recibió la medalla de oro, tras confirmarse la descalificaicón por dopaje de sus competidoras.</span>
</p>
</div>
<div class="form_fields">
<div class="js_error_placement required_field error_active"></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_49115">
<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_146377 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 js_quizz_question_ok no_click">
<div class="m_options_list_input no-description ">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-msg-required="Escoge una de las opciones" required="required" data-ok="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Lydia Valentín" data-question-type="radio_button" class="m_option_input js_quizz_radio_button valid" type="radio" value="146377" name="participation[promo_response_attributes][response_49115]" id="participation_promo_response_attributes_response_49115_146377" aria-invalid="false">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_49115_146377">
Lydia Valentín
</label>
</div>
</div>
</li>
<li class="li_wrapper m_options_list_item answer_146378 tt_answer_1 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer js_quizz_question_ko no_click">
<div class="m_options_list_input no-description ">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-msg-required="Escoge una de las opciones" required="required" data-ok="-1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Mouna Skandi" data-question-type="radio_button" class="m_option_input js_quizz_radio_button valid" type="radio" value="146378" name="participation[promo_response_attributes][response_49115]" id="participation_promo_response_attributes_response_49115_146378" readonly="readonly" disabled="">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_49115_146378" readonly="readonly">
Mouna Skandi
</label>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</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)
- 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).
<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_146377 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 js_quizz_question_ok no_click">
<div class="m_options_list_input no-description ">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-msg-required="Escoge una de las opciones" required="required" data-ok="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Lydia Valentín" data-question-type="radio_button" class="m_option_input js_quizz_radio_button valid" type="radio" value="146377" name="participation[promo_response_attributes][response_49115]" id="participation_promo_response_attributes_response_49115_146377" aria-invalid="false">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_49115_146377">
Lydia Valentín
</label>
</div>
</div>
</li>
<li class="li_wrapper m_options_list_item answer_146378 tt_answer_1 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer js_quizz_question_ko no_click">
<div class="m_options_list_input no-description ">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-msg-required="Escoge una de las opciones" required="required" data-ok="-1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Mouna Skandi" data-question-type="radio_button" class="m_option_input js_quizz_radio_button valid" type="radio" value="146378" name="participation[promo_response_attributes][response_49115]" id="participation_promo_response_attributes_response_49115_146378" readonly="readonly" disabled="">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_49115_146378" readonly="readonly">
Mouna Skandi
</label>
</div>
</div>
</li>
</ul>
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.