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 hmtl>
<html> <head> <!-- {{{ cool_tabs_head }}} --> </head> <body> {{{ cool_tabs_form }}} <!-- {{{ cool_tabs_body_end }}} --> </body> </html>
La variable {{{ cool_tabs_form }}} es la encargada de incluir las diferentes preguntas del quiz que se hayan configurado en la campaña, sin posibilidad (por el momento) de poder modificar el html directamente de las mismas.
2.1. Clases personalizadas por cada pantalla.
Las diferentes pantallas de un quiz o encuestas incluyen clases e ids dinámicas que varían en función del número de pregunta dónde nos encontremos. Además el último paso, el formulario de datos, siempre incluye una clase adicional ('last_step') para poder identificar esa pantalla y personalizarla de manera única.
<body> <div class="wrapper form_layout js_canvas_wrapper_for_wizard_current_step step1"> . </div> <div class="wrapper form_layout js_canvas_wrapper_for_wizard_current_step step2"> . </div> <div class="wrapper form_layout js_canvas_wrapper_for_wizard_current_step step last_step"> . </div> </body>
También se incluyen otros identificadores y clases en cada <section> de las preguntas (wizard-p-X) y clases 'step_X' por pregunta:
<body> <form> <div class="section"> <div id="wizard"> <section style="" class="body current" id="wizard-p-0" role="tabpanel" aria-labelledby="wizard-h-0" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_1">....</div> </div> </section> <section style="" class="body current" id="wizard-p-1" role="tabpanel" aria-labelledby="wizard-h-1" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_2">....</div> </div> </section> <section style="" class="body current" id="wizard-p-2" role="tabpanel" aria-labelledby="wizard-h-2" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_3">....</div> </div> </section> </div> </div> </form> </body>
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 style="" class="body current" id="wizard-p-0" role="tabpanel" aria-labelledby="wizard-h-0" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_1"> <div class="m_header_step" data-step="1"> <h1 class="js_error_placement quizz_question ">¿Qué tres aspectos valoras más a la hora de elegir un destino para viajar?</h1> <span class="not_mandatory">(optional)</span> </div> <div class="form_fields select_row"> <div class="form_input"> <span><input type="text" name="participation[promo_response_attributes][response_11728]" id="participation_promo_response_attributes_response_11728"></span> </div> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.2. Pregunta con texto (e/o imagen) + respuesta mediante valoración por estrellas entre 1 y N.
Con este tipo de respuesta estaremos permitiendo al participante que haga su valoración del 1 y el número máximo de estrellas que determines. Es un recurso muy utilizado en encuestas de opinión, a la hora de valorar productos o servicios. En 'Tipos de respuesta' selecciona la opción Calificación con estrella e Indica en número máxima que se podrá marcar en la respuesta.
El código html de este tipo de pregunta es el siguiente:
<section style="display: block;" class="body current" id="wizard-p-1" role="tabpanel" aria-labelledby="wizard-h-1" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_2"> <div class="m_header_step" data-step="2"> <h1 class="js_error_placement quizz_question required_field">¿Qué valoración le darías al destino que has visitado?</h1> </div> <div class="form_fields star_row" data-max="10" data-score-name="participation[promo_response_attributes][response_11729]" style="cursor: pointer;"> <i data-alt="1" class="star-on-png" title="1"></i> <i data-alt="2" class="star-off-png" title="2"></i> <i data-alt="3" class="star-off-png" title="3"></i> <i data-alt="4" class="star-off-png" title="4"></i> <i data-alt="5" class="star-off-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_11729]" type="hidden" value="1"> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </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 style="display: block;" class="body current" id="wizard-p-1" role="tabpanel" aria-labelledby="wizard-h-1" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_2"> <div class="m_header_step" data-step="2"> <h1 class="js_error_placement quizz_question required_field">¿Qué valoración le darías al destino que has visitado?</h1> </div> <div class="form_fields star_numbers_row" data-score-name="participation[promo_response_attributes]response_11730"> <ul class="m_options_list js_star_numbers"> <li class="star_number_0 star_number"> <input class="m_option_input js_quizz_radio" type="radio" value="0" name="participation[promo_response_attributes][response_11730]" id="participation_promo_response_attributes_response_11730_0"> <label class="m_option_label" for="participation_promo_response_attributes_response_11730_0">0</label> <span class="b_legend">Muy negativa</span> </li> <li class="star_number_1 star_number"> <input class="m_option_input js_quizz_radio" type="radio" value="1" name="participation[promo_response_attributes][response_11730]" id="participation_promo_response_attributes_response_11730_1"> <label class="m_option_label" for="participation_promo_response_attributes_response_11730_1">1</label> </li> . . . <li class="star_number_10 star_number"> <input class="m_option_input js_quizz_radio" type="radio" value="10" name="participation[promo_response_attributes][response_11730]" id="participation_promo_response_attributes_response_11730_10"> <label class="m_option_label" for="participation_promo_response_attributes_response_11730_10">10</label> <span class="l_legend">Muy positiva</span> </li> </ul> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.4. 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 style="display: block;" class="body current" id="wizard-p-1" role="tabpanel" aria-labelledby="wizard-h-1" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_2"> <div class="m_header_step" data-step="2"> <h1 class="js_error_placement quizz_question required_field">¿Qué tipo de alojamiento sueles elegir en tus viajes? <label id="participation_promo_response_attributes_response_11731-error" class="step_error" for="participation_promo_response_attributes_response_11731" style="display: none;"></label> </h1> </div> <div class="form_fields select_row"> <div class="form_select"> <div class="field_wrap select_field "> <span class="select platform platform57 not_msie custom-form_participation_promo_response_attributes_response_11731 responsive_select"> <span class="select_content"> <span class="select_button"> <span class="select_button_icon"></span> </span> </span> </span> <span class="select_label"> <select data-custom="true" data-msg-required="Required field" required="required" name="participation[promo_response_attributes][response_11731]" id="participation_promo_response_attributes_response_11731" aria-required="true" class="step_error"> <option value=""></option> <option value="Hotel">Hotel</option> <option value="Hostal">Hostal</option> <option value="B&B">B&B</option> <option value="Apartamento">Apartamento</option> <option value="Couchsurfing">Couchsurfing</option> </select> </span> </div> </div> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.5. Pregunta con texto (e/o imagen) + respuesta con texto a escoger entre varias opciones.
Si queremos crear o quiz sencillo esta es la tipología perfecta. Formulamos una pregunta y ofrecemos a los participantes diferentes opciones para que elija una.
El código html de esta pregunta sería:
<section style="display: block;" class="body current" id="wizard-p-4" role="tabpanel" aria-labelledby="wizard-h-4" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_5"> <div class="m_header_step" data-step="5"> <h1 class="js_error_placement quizz_question required_field">¿Cuál es tu época preferida del año para viajar?</h1> </div> <div class="m_options js_quizz_question"> <ul> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36428" name="participation[promo_response_attributes][response_11732]" id="participation_promo_response_attributes_response_11732_36428" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11732_36428">Semana Santa</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36429" name="participation[promo_response_attributes][response_11732]" id="participation_promo_response_attributes_response_11732_36429" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11732_36429">Verano</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36430" name="participation[promo_response_attributes][response_11732]" id="participation_promo_response_attributes_response_11732_36430" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11732_36430">Navidades</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36431" name="participation[promo_response_attributes][response_11732]" id="participation_promo_response_attributes_response_11732_36431" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11732_36431">Otros puentes/fiestas</label> </div> </li> </ul> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
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 style="display: block;" class="body current" id="wizard-p-5" role="tabpanel" aria-labelledby="wizard-h-5" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_6"> <div class="m_header_step" data-step="6"> <h1 class="js_error_placement quizz_question required_field">¿Cuál de los siguientes capitales europeas te gustaría visitar próximamente?</h1> </div> <div class="m_options_list js_quizz_question"> <div class="m_options_list_viewport swiper-container-horizontal"> <ol class="swiper_m_options_list_content m_options_list_content" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);"> <li class="li_wrapper m_options_list_item answer_0 swiper-no-swiping swiper-slide-active" style="width: 629px;"> <div class="m_options_list_figure"> <div class="m_badge"> <div class="m_badge_content">1</div> </div> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/:original_paris-2000275_1280.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="375" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/big_paris-2000275_1280.jpg" alt="Big paris 2000275 1280"> <span class="click_to_view" style="display: none;"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> </div> <div class="m_options_list_input"> <span class="m_options_list_separator"></span> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36432" name="participation[promo_response_attributes][response_11733]" id="participation_promo_response_attributes_response_11733_36432" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11733_36432">Paris</label> </div> </div> </li> <li class="li_wrapper m_options_list_item answer_0 swiper-no-swiping swiper-slide-active" style="width: 629px;"> <div class="m_options_list_figure"> <div class="m_badge"> <div class="m_badge_content">2</div> </div> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/:original_paris-2000275_1280.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="375" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/big_paris-2000275_1280.jpg" alt="Big paris 2000275 1280"> <span class="click_to_view" style="display: none;"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> </div> <div class="m_options_list_input"> <span class="m_options_list_separator"></span> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36432" name="participation[promo_response_attributes][response_11733]" id="participation_promo_response_attributes_response_11733_36432" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11733_36432">Berlín</label> </div> </div> </li> . . . </ol> </div> <div class="m_options_pagination swiper-pagination-clickable swiper-pagination-bullets"> <span class="m_options_page m_options_page_active"></span> <span class="m_options_page"></span> <span class="m_options_page"></span> <span class="m_options_page"></span> <span class="m_options_page"></span> </div> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.7. Pregunta con texto + respuesta con texto, imagen y descripción a escoger entre varias opciones.
Este modelo de respuesta añade una descripción en cada opción de respuesta. En las descripciones de nuestro ejemplo se hacen referencia a las diferentes localizaciones de las imágenes, pero si en el quiz hacemos referencia a nuestros productos o servicios, podríamos incluir el nombre, el precio o incluso la referencia de los mismo.
El código html de la pregunta sería:
<section style="display: block;" class="body current" id="wizard-p-5" role="tabpanel" aria-labelledby="wizard-h-5" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_6"> <div class="m_header_step" data-step="6"> <h1 class="js_error_placement quizz_question required_field">¿Qué es lo qué más te interesa de una ciudad/país a la hora de elegirlo como destino? (imagen) </h1> </div> <div class="m_options_list js_quizz_question"> <div class="m_options_list_viewport swiper-container-horizontal"> <ol class="swiper_m_options_list_content m_options_list_content" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);"> <li class="li_wrapper m_options_list_item answer_0 swiper-no-swiping swiper-slide-active" style="width: 629px;"> <div class="m_options_list_figure"> <div class="m_badge"> <div class="m_badge_content">1</div> </div> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/:original_paris-2000275_1280.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="375" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/big_paris-2000275_1280.jpg" alt="Big paris 2000275 1280"> <span class="click_to_view" style="display: none;"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> </div> <div class="m_options_list_input"> <span class="m_options_list_separator"></span> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36432" name="participation[promo_response_attributes][response_11733]" id="participation_promo_response_attributes_response_11733_36432" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11733_36432">Paris</label> </div> <span class="image_description">Catedral de Santa María del Fiore, Florencia (Italia)</span> </div> </li> <li class="li_wrapper m_options_list_item answer_0 swiper-no-swiping swiper-slide-active" style="width: 629px;"> <div class="m_options_list_figure"> <div class="m_badge"> <div class="m_badge_content">2</div> </div> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/:original_paris-2000275_1280.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="375" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/big_paris-2000275_1280.jpg" alt="Big paris 2000275 1280"> <span class="click_to_view" style="display: none;"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> </div> <div class="m_options_list_input"> <span class="m_options_list_separator"></span> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36432" name="participation[promo_response_attributes][response_11733]" id="participation_promo_response_attributes_response_11733_36432" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11733_36432">Berlín</label> </div> <span class="image_description">Tonkotsu ramen (Japón)</span> </div> </li> . . . </ol> </div> <div class="m_options_pagination swiper-pagination-clickable swiper-pagination-bullets"> <span class="m_options_page m_options_page_active"></span> <span class="m_options_page"></span> <span class="m_options_page"></span> <span class="m_options_page"></span> <span class="m_options_page"></span> </div> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
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 style="display: block;" class="body current" id="wizard-p-7" role="tabpanel" aria-labelledby="wizard-h-7" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_8"> <div class="m_header_step" data-step="8"> <h1 class="js_error_placement quizz_question required_field">¿Cuál de los siguientes país te gustaría visitar?</h1> </div> <div class="m_options_list js_quizz_question"> <div class="m_options_list_viewport swiper-container-horizontal"> <ol class="swiper_m_options_list_content m_options_list_content_no_carrousel" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);"> <li class="radio_wrapper li_wrapper only_image answer_0"> <div class="m_options_list_figure js_ok_ko_class_placement"> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/8375c5d0096511e7b4a6e152aee220c2/:original_Flag_of_Japan.svg.png" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="200" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/8375c5d0096511e7b4a6e152aee220c2/big_Flag_of_Japan.svg.png" alt="Big flag of japan.svg"> <span class="click_to_view" style="display: none;"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36468" name="participation[promo_response_attributes][response_11735]" id="participation_promo_response_attributes_response_11735_36468" aria-required="true"> </div> </li> <li class="radio_wrapper li_wrapper only_image answer_1"> <div class="m_options_list_figure js_ok_ko_class_placement"> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/95059f50096511e7b83dd1a14f5cf8f0/:original_usa-31021_960_720.png" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="158" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/95059f50096511e7b83dd1a14f5cf8f0/big_usa-31021_960_720.png" alt="Big usa 31021 960 720"> <span class="click_to_view" style="display: none;"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36469" name="participation[promo_response_attributes][response_11735]" id="participation_promo_response_attributes_response_11735_36469" aria-required="true"> </div> </li> . . . </ol> </div> <div class="m_options_pagination swiper-pagination-clickable swiper-pagination-bullets"> <span class="m_options_page m_options_page_active"></span> </div> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.9. Pregunta con texto e imagen + respuesta con imagen y descripción a escoger entre varias opciones.
Podemos formular la pregunta de nuestro quiz o cuestionario mediante texto, imagen o ambas opciones. En esta tipología, el texto de la pregunta se acompaña con imagen y en la tipología de respuesta se le da a los participantes diferentes imágenes a las que acompaña una descripción a modo de leyenda, entre las que deben escoger una.
Si decides incluir una imagen bien que contenga la pregunta o bien que acompañe a la pregunta, debes saber que el tamaño óptimo de las imágenes de las preguntas personalizadas es de 628x353px.
Y su código html correspondiente sería:
<section style="display: block;" class="body current" id="wizard-p-8" role="tabpanel" aria-labelledby="wizard-h-8" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_9"> <div class="m_header_step" data-step="9"> <h1 class="js_error_placement quizz_question required_field">¿Qué no puede faltar nunca en tu maleta?</h1> </div> <div class="m_figure_options js_question_image_wrapper"> <div class="m_figure_options_content js_after_answering_image_wrapper_if_no_image" style=""> <div class="m_badge m_badge_icon"> <div class="m_badge_content"> <span class="icn_watch icn">1</span> </div> </div> <figure class="m_figure"> <div class="m_figure_viewport"> <a href="#" class="m_figure_content m_figure_content_image image_lightbox" data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_images/5dc25db0096711e7b83dd1a14f5cf8f0/:original_maleta.jpg" data-after-href=""> <img width="672" height="448" class="m_figure_img js_question_image" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_images/5dc25db0096711e7b83dd1a14f5cf8f0/big_maleta.jpg" alt="Big maleta"> <span class="click_to_view" style="display: none;"><i class=" fa fa-search-plus " aria-hidden="true"></i>Zoom</span> </a> </div> </figure> </div> <div class="m_figure_options_values"> <div class="m_options_list js_quizz_question"> <div class="m_options_list_viewport swiper-container-horizontal"> <ol class="swiper_m_options_list_content m_options_list_content" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);"> <li class="li_wrapper m_options_list_item answer_0 swiper-no-swiping swiper-slide-active" style="width: 629px;"> <div class="m_options_list_figure"> <div class="m_badge"> <div class="m_badge_content">1</div> </div> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/a30593f0096811e7b83dd1a14f5cf8f0/:original_feet-1840619_960_720.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="200" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/a30593f0096811e7b83dd1a14f5cf8f0/big_feet-1840619_960_720.jpg" alt="Big feet 1840619 960 720"> <span class="click_to_view" style="display: none;"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> </div> <div class="m_options_list_input"> <span class="m_options_list_separator"></span> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36473" name="participation[promo_response_attributes][response_11736]" id="participation_promo_response_attributes_response_11736_36473" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11736_36473"> Calzado cómodo para patear la ciudad </label> </div> <span class="image_description"> Zapatillas BRZ </span> </div> </li> <li class="li_wrapper m_options_list_item answer_1 swiper-no-swiping swiper-slide-next" style="width: 629px;"> <div class="m_options_list_figure"> <div class="m_badge"> <div class="m_badge_content">2</div> </div> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/182dc130096811e795ec61a13e96826b/:original_monopod-785688_640-_1_.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="200" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/182dc130096811e795ec61a13e96826b/big_monopod-785688_640-_1_.jpg" alt="Big monopod 785688 640 1 "> <span class="click_to_view"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> </div> <div class="m_options_list_input"> <span class="m_options_list_separator"></span> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36474" name="participation[promo_response_attributes][response_11736]" id="participation_promo_response_attributes_response_11736_36474" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11736_36474"> Palo selfie </label> </div> <span class="image_description"> Palo selfie con disparador automático, EPICShopping </span> </div> </li> . . . </ol> </div> <div class="m_options_pagination swiper-pagination-clickable swiper-pagination-bullets"> <span class="m_options_page m_options_page_active"></span> <span class="m_options_page"></span> </div> </div> </div> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
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 style="display: block;" class="body current" id="wizard-p-9" role="tabpanel" aria-labelledby="wizard-h-9" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_10"> <div class="m_header_step" data-step="10">
<h1 class="js_error_placement quizz_question required_field">
¿Sabrías decirnos qué ciudad española se esconde en el vídeo?
</h1>
</div> <div class="m_options js_quizz_question"> <ul> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36479" name="participation[promo_response_attributes][response_11737]" id="participation_promo_response_attributes_response_11737_36479" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11737_36479">Sevilla</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36480" name="participation[promo_response_attributes][response_11737]" id="participation_promo_response_attributes_response_11737_36480" aria-required="true" ><label class="m_option_label" for="participation_promo_response_attributes_response_11737_36480">Valencia</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36481" name="participation[promo_response_attributes][response_11737]" id="participation_promo_response_attributes_response_11737_36481" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11737_36481">Madrid</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36482" name="participation[promo_response_attributes][response_11737]" id="participation_promo_response_attributes_response_11737_36482" aria-required="true"><label class="m_option_label" for="participation_promo_response_attributes_response_11737_36482">Bilbao</label> </div> </li> </ul> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.11. 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áticamente a 230px x 129px, medida que permite su correcta visualización.
El código html de esta pregunta sería:
<section style="display: block;" class="body current" id="wizard-p-10" role="tabpanel" aria-labelledby="wizard-h-10" aria-hidden="false">
<div class="wrapper_row" style="">
<div class="row js_error_placement_parent step_11">
<div class="m_header_step" data-step="11">
<h1 class="js_error_placement quizz_question required_field">¿En cuál de nuestros hoteles te gustaría poder alojarte?</h1>
</div>
<div class="m_options js_quizz_question">
<ul>
<li>
<div class="m_option js_ok_ko_class_placement">
<input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36483" name="participation[promo_response_attributes][response_11738]" id="participation_promo_response_attributes_response_11738_36483" aria-required="true">
<label class="m_option_label" for="participation_promo_response_attributes_response_11738_36483">
</label>
</div>
</li>
<li>
<div class="m_option js_ok_ko_class_placement">
<input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36483" name="participation[promo_response_attributes][response_11738]" id="participation_promo_response_attributes_response_11738_36483" aria-required="true">
<label class="m_option_label" for="participation_promo_response_attributes_response_11738_36483">
</label>
</div>
</li>
<li>
<div class="m_option js_ok_ko_class_placement">
<input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36483" name="participation[promo_response_attributes][response_11738]" id="participation_promo_response_attributes_response_11738_36483" aria-required="true">
<label class="m_option_label" for="participation_promo_response_attributes_response_11738_36483">
</label>
</div>
</li>
<li>
<div class="m_option js_ok_ko_class_placement">
<input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36483" name="participation[promo_response_attributes][response_11738]" id="participation_promo_response_attributes_response_11738_36483" aria-required="true">
<label class="m_option_label" for="participation_promo_response_attributes_response_11738_36483">
</label>
</div>
</li>
</ul>
</div>
</div><!-- - class=row -->
</div><!-- - class=wrapper_row -->
</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 style="display: block;" class="body current" id="wizard-p-11" role="tabpanel" aria-labelledby="wizard-h-11" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_12"> <div class="m_header_step" data-step="12"> <h1 class="js_error_placement quizz_question required_field">¿Qué actividad de aventura no puede faltar en tus viajes?</h1> </div> <div class="m_figure_options js_question_image_wrapper"> <div class="m_figure_options_content js_after_answering_image_wrapper_if_no_image" style=""> <div class="m_badge m_badge_icon"> <div class="m_badge_content"> <span class="icn_watch icn">1</span> </div> </div> <figure class="m_figure"> <div class="m_figure_viewport"> <a href="#" class="m_figure_content m_figure_content_image image_lightbox" data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_images/3c1e90c0097111e79e565f9704070fcf/:original_mountain-biking-1210066_960_720.jpg" data-after-href=""> <img width="672" height="504" class="m_figure_img js_question_image" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_images/3c1e90c0097111e79e565f9704070fcf/big_mountain-biking-1210066_960_720.jpg" alt="Big mountain biking 1210066 960 720"> <span class="click_to_view" style="display: none;"><i class=" fa fa-search-plus " aria-hidden="true"></i>Zoom</span> </a> </div> </figure> </div> <div class="m_figure_options_values"> <div class="m_options js_quizz_question"> <ul> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36487" name="participation[promo_response_attributes][response_11739]" id="participation_promo_response_attributes_response_11739_36487" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11739_36487">Buceo <iframe width="450" height="250" src="https://www.youtube.com/embed/x77Sb0TkHIE" frameborder="0" allowfullscreen=""></iframe> </label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36487" name="participation[promo_response_attributes][response_11739]" id="participation_promo_response_attributes_response_11739_36487" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11739_36487">Senderismo <iframe width="450" height="250" src="https://www.youtube.com/embed/x77Sb0TkHIE" frameborder="0" allowfullscreen=""></iframe> </label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36487" name="participation[promo_response_attributes][response_11739]" id="participation_promo_response_attributes_response_11739_36487" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11739_36487">Montar en bicicleta <iframe width="450" height="250" src="https://www.youtube.com/embed/x77Sb0TkHIE" frameborder="0" allowfullscreen=""></iframe> </label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36487" name="participation[promo_response_attributes][response_11739]" id="participation_promo_response_attributes_response_11739_36487" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11739_36487">Esqui <iframe width="450" height="250" src="https://www.youtube.com/embed/x77Sb0TkHIE" frameborder="0" allowfullscreen=""></iframe> </label> </div> </li> </ul> </div> </div> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.13. 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 style="background-image: url("https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_background_images/0d6ac6c0097311e7b88edb2866430f12/big_calendario-viajes.png"); min-height: 628px; display: block;" class="question_bg body current" id="wizard-p-12" role="tabpanel" aria-labelledby="wizard-h-12" aria-hidden="false"> <div class="wrapper_row" style="min-height: 628px;line-height: 628px;"> <div class="row js_error_placement_parent step_13"> <div class="m_header_step" data-step="13"> <h1 class="js_error_placement quizz_question required_field">Eres de los que planifican su viaje...</h1> </div> <div class="m_options js_quizz_question"> <ul> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36491" name="participation[promo_response_attributes][response_11740]" id="participation_promo_response_attributes_response_11740_36491" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11740_36491">Una semana antes</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36492" name="participation[promo_response_attributes][response_11740]" id="participation_promo_response_attributes_response_11740_36492" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11740_36492">El día de antes busco qué visitar en Internet</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36493" name="participation[promo_response_attributes][response_11740]" id="participation_promo_response_attributes_response_11740_36493" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11740_36493">Meses antes ¡Me gusta estar preparado!</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36494" name="participation[promo_response_attributes][response_11740]" id="participation_promo_response_attributes_response_11740_36494" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11740_36494">¿Panificar? Viajo a la aventura</label> </div> </li> </ul> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.14. Pregunta con texto + respuesta múltiples opciones con texto.
Hemos visto diferentes ejemplo con la opción de marcar una única respuesta, pero también existe la posibilidad de que los participantes tengan que elegir su respuesta entre una abanico de opciones y que puedan seleccionar desde 0 a todas. Para ello tenemos que, en 'Tipos de respuestas', seleccionar la opción Múltiples respuesta.
Podemos establecer en el apartado indicado para ello que, el usuario tenga que marcar un mínimo y un máximo de respuestas para esa pregunta. De esa manera, si no marca el mínimo establecido o intenta marcar más, la aplicación le indicará que no puede pasar a la siguiente pregunta.
Cuyo código html sería:
<section style="display: block;" class="body current" id="wizard-p-13" role="tabpanel" aria-labelledby="wizard-h-13" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_14"> <div class="m_header_step" data-step="14"> <h1 class="js_error_placement quizz_question required_field">¿Qué tipo de viajero eres?</h1> </div> <div class="m_options js_quizz_question"> <ul> <li> <div class="m_option js_ok_ko_class_placement"> <input name="participation[promo_response_attributes][response_11741][]" type="hidden" value="0"><input class="m_option_input js_quizz_check_box" title="You should choose between 1 and 7 options" data-rule-required="true" minlength="1" maxlength="7" type="checkbox" value="36495" name="participation[promo_response_attributes][response_11741][]" id="participation_promo_response_attributes_response_11741_36495" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11741_36495">Mochilero</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input name="participation[promo_response_attributes][response_11741][]" type="hidden" value="0"><input class="m_option_input js_quizz_check_box" title="You should choose between 1 and 7 options" data-rule-required="true" minlength="1" maxlength="7" type="checkbox" value="36495" name="participation[promo_response_attributes][response_11741][]" id="participation_promo_response_attributes_response_11741_36495" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11741_36495">Mochilero</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input name="participation[promo_response_attributes][response_11741][]" type="hidden" value="0"><input class="m_option_input js_quizz_check_box" title="You should choose between 1 and 7 options" data-rule-required="true" minlength="1" maxlength="7" type="checkbox" value="36495" name="participation[promo_response_attributes][response_11741][]" id="participation_promo_response_attributes_response_11741_36495" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11741_36495">Mochilero</label> </div> </li> ... ... </ul> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
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 style="display: block;" class="body current" id="wizard-p-15" role="tabpanel" aria-labelledby="wizard-h-15" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_16"> <div class="m_header_step" data-step="16"> <h1 class="js_error_placement quizz_question required_field">¿Qué medio de transporte sueles utilizar para desplazarte cuando visitas una ciudad?</h1> </div> <div class="m_options_list js_quizz_question"> <div class="m_options_list_viewport swiper-container-horizontal"> <ol class="swiper_m_options_list_content m_options_list_content_no_carrousel" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);"> <li class="checkbox_wrapper li_wrapper only_image answer_0"> <div class="m_options_list_figure js_ok_ko_class_placement"> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/0d779b30097711e7962c15a61e8c5521/:original_metro.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="200" class="m_figure_img active" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/0d779b30097711e7962c15a61e8c5521/big_metro.jpg" alt="Big metro"> <span class="click_to_view" style="display: none;"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> <input name="participation[promo_response_attributes][response_11743][]" type="hidden" value="0"> <input class="m_option_input js_quizz_check_box" title="You should choose between 1 and 4 options" data-rule-required="true" minlength="1" maxlength="4" data-ok="-1" type="checkbox" value="36507" name="participation[promo_response_attributes][response_11743][]" id="participation_promo_response_attributes_response_11743_36507" aria-required="true"> </div> </li> <li class="checkbox_wrapper li_wrapper only_image answer_0"> <div class="m_options_list_figure js_ok_ko_class_placement"> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/0d779b30097711e7962c15a61e8c5521/:original_metro.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="200" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/0d779b30097711e7962c15a61e8c5521/big_metro.jpg" alt="Big metro"> <span class="click_to_view" style="display: none;"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> <input name="participation[promo_response_attributes][response_11743][]" type="hidden" value="0"> <input class="m_option_input js_quizz_check_box" title="You should choose between 1 and 4 options" data-rule-required="true" minlength="1" maxlength="4" data-ok="-1" type="checkbox" value="36507" name="participation[promo_response_attributes][response_11743][]" id="participation_promo_response_attributes_response_11743_36507" aria-required="true"> </div> </li> . . . </ol> </div> <div class="m_options_pagination swiper-pagination-clickable swiper-pagination-bullets"> <span class="m_options_page m_options_page_active"></span> </div> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
Donde el elemento seleccionado (foto elegida por el usuario) tiene la clase 'active'
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 style="display: block;" class="body current" id="wizard-p-14" role="tabpanel" aria-labelledby="wizard-h-14" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_15"> <div class="m_header_step" data-step="15"> <h1 class="js_error_placement quizz_question required_field">¿Qué ciudad ha sido la más visitada del mundo en 2016?</h1> </div> <div class="m_figure_options js_question_image_wrapper"> <div class="m_figure_options_content js_after_answering_image_wrapper_if_no_image" style=""> <div class="m_badge m_badge_icon"> <div class="m_badge_content"> <span class="icn_watch icn">1</span> </div> </div> <figure class="m_figure"> <div class="m_figure_viewport"> <a href="#" class="m_figure_content m_figure_content_image image_lightbox" data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_images/81040f40097511e7b9cfbfec2e91e13e/:original_turistas.jpg" data-after-href=""> <img width="628" height="353" class="m_figure_img js_question_image" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_images/81040f40097511e7b9cfbfec2e91e13e/big_turistas.png" alt="Big turistas"> <span class="click_to_view" style="display: none;"><i class=" fa fa-search-plus " aria-hidden="true"></i>Zoom</span> </a> </div> </figure> </div> <div class="m_figure_options_values"> <div class="m_options js_quizz_question"> <ul> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36503" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36503" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36503">Londres</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36503" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36503" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36503">Nueva York</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36503" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36503" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36503">Bangkok</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36503" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36503" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36503">Tokio</label> </div> </li> </ul> </div> </div> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
Si el usuario acierta la pregunta, el html correspondiente sería el siguiente (se muestra el mensaje de acierto con clase 'js_answer_ok' y se añade la clase '.js_quizz_question_ok' al botón con la respuesta correcta):
<div class="m_figure_options_values">
<div class="m_options js_quizz_question">
<div style="" class="js_answer_ok">¡Correcto! Según el estudio Global Destination Cities Index (GDCI), Bangkok es la ciudad del mundo que más turistas ha atraído en 2016. En concreto a 21,47 millones. ¡Asía está de moda!
</div>
<div style="display: none;" class="js_answer_ko">Fallaste... Según el estudio Global Destination Cities Index (GDCI), Bangkok es la ciudad del mundo que más turistas ha atraído en 2016. En concreto a 21,47 millones. ¡Asía está de moda!
</div>
<ul>
<li>
<div class="m_option js_ok_ko_class_placement">
<input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="-1" type="radio" value="36503" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36503" aria-required="true" disabled="disabled">
<label class="m_option_label" for="participation_promo_response_attributes_response_11742_36503">Londres</label>
</div>
</li>
<li>
<div class="m_option js_ok_ko_class_placement">
<input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="-1" type="radio" value="36504" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36504" aria-required="true" disabled="disabled">
<label class="m_option_label" for="participation_promo_response_attributes_response_11742_36504">Nueva York</label>
</div>
</li>
<li>
<div class="m_option js_ok_ko_class_placement js_quizz_question_ok">
<input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="1" type="radio" value="36505" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36505" aria-required="true" aria-invalid="false"><label class="m_option_label" for="participation_promo_response_attributes_response_11742_36505">Bangkok</label>
</div>
</li>
<li>
<div class="m_option js_ok_ko_class_placement"><input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="-1" type="radio" value="36506" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36506" aria-required="true" disabled="disabled">
<label class="m_option_label" for="participation_promo_response_attributes_response_11742_36506">Tokio</label>
</div>
</li>
</ul>
</div>
</div>
Si el usuario falla la pregunta, el html correspondiente sería (igual al anterior pero se muestra el mensaje de fallo, con la clase 'js_answer_ko' y se añade la clase 'js_quizz_question_ko' a la respuesta errónea).
<div class="m_figure_options_values"> <div class="m_options js_quizz_question"> <div style="display: none;" class="js_answer_ok">¡Correcto! Según el estudio Global Destination Cities Index (GDCI), Bangkok es la ciudad del mundo que más turistas ha atraído en 2016. En concreto a 21,47 millones. ¡Asía está de moda! </div> <div style="" class="js_answer_ko">Fallaste... Según el estudio Global Destination Cities Index (GDCI), Bangkok es la ciudad del mundo que más turistas ha atraído en 2016. En concreto a 21,47 millones. ¡Asía está de moda! </div> <ul> <li> <div class="m_option js_ok_ko_class_placement js_quizz_question_ko"> <input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="-1" type="radio" value="36503" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36503" aria-required="true" disabled="disabled"> <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36503">Londres</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="-1" type="radio" value="36504" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36504" aria-required="true" disabled="disabled"> <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36504">Nueva York</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement js_quizz_question_ok"> <input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="1" type="radio" value="36505" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36505" aria-required="true" aria-invalid="false"><label class="m_option_label" for="participation_promo_response_attributes_response_11742_36505">Bangkok</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"><input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="-1" type="radio" value="36506" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36506" aria-required="true" disabled="disabled"> <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36506">Tokio</label> </div> </li> </ul> </div> </div>
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:
<div class="wrapper_row js_complete_quizz_question_wrapper" style=""> <div class="row js_error_placement_parent step_17"> <div class="m_header_step" data-step="17"> <h1 class="js_error_placement quizz_question ">¿Qué presupuesto tienes para gastar en tu próximo viaje?</h1> </div> <div class="form_fields select_row js_quizz_select_autocomplete autocomplete_select"> <div class="form_select css_quizz css_quizz_13929"> <div class="field_wrap select_field "> <div class="select2-container" id="s2id_participation_promo_response_attributes_response_13929"> <a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabindex="-1"> <span class="select2-chosen"></span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow"><b></b></span></a><input class="select2-focusser select2-offscreen" type="text" id="s2id_autogen1"> <div class="select2-drop select2-display-none select2-with-searchbox"> <div class="select2-search"> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input"> </div> <ul class="select2-results"> </ul> </div> </div> <select data-adds-extra-text="0" name="participation[promo_response_attributes][response_13929]" id="participation_promo_response_attributes_response_13929" tabindex="-1" class="select2-offscreen"> <option value=""></option> <option value="47298">Menos de 50€</option> <option value="47299">Entre 50 y 100€</option> <option value="47300">Entre 100 y 200€</option> <option value="47301">Entre 200 y 300€</option> <option value="47302">Entre 300 y 400€</option> <option value="47303">Entre 400 y 500€</option> <option value="47304">Entre 500 y 600€</option> <option value="47305">Entre 600 y 700€</option> <option value="47306">Entre 700 y 800€</option> <option value="47307">Entre 800 y 900€</option> <option value="47308">Entre 900 y 1.000€</option> </select> </div> </div> </div> </div> <!-- - class=row --> </div>
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:
<div class="wrapper_row js_complete_quizz_question_wrapper" style=""> <div class="row js_error_placement_parent step_18"> <div class="m_header_step" data-step="18"> <h1 class="js_error_placement quizz_question "></h1> </div> <div style="position: relative; height: 0px; padding-bottom: 56.25%; text-align: center;"><iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/5L2N4CRIw60?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640"></iframe></div> </div> <!-- - class=row --> </div>
El html sería:
<div class="wrapper_row js_complete_quizz_question_wrapper" style=""> <div class="row js_error_placement_parent step_19"> <div class="m_header_step" data-step="19"> <h1 class="js_error_placement quizz_question ">¿Qué famoso museo aparece en el vídeo que acabas de ver?</h1> </div> <div class="m_options js_quizz_question css_quizz css_quizz_12425"> <ul> <li class="answer_0 js_quizz_answer"> <div class="m_option js_ok_ko_class_placement"><input class="m_option_input js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="41160" name="participation[promo_response_attributes][response_12425]" id="participation_promo_response_attributes_response_12425_41160"><label class="m_option_label" for="participation_promo_response_attributes_response_12425_41160">Museo Thyssen – Bornemisza, Madrid</label></div> </li> <li class="answer_1 js_quizz_answer"> <div class="m_option js_ok_ko_class_placement"><input class="m_option_input js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="41161" name="participation[promo_response_attributes][response_12425]" id="participation_promo_response_attributes_response_12425_41161"><label class="m_option_label" for="participation_promo_response_attributes_response_12425_41161">Museu d'Art Contemporani de Barcelona - MACBA, Barcelona</label></div> </li> <li class="answer_2 js_quizz_answer"> <div class="m_option js_ok_ko_class_placement"><input class="m_option_input js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="41162" name="participation[promo_response_attributes][response_12425]" id="participation_promo_response_attributes_response_12425_41162"><label class="m_option_label" for="participation_promo_response_attributes_response_12425_41162">Museo Guggenheim, Bilbao</label></div> </li> <li class="answer_3 js_quizz_answer"> <div class="m_option js_ok_ko_class_placement"><input class="m_option_input js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="41163" name="participation[promo_response_attributes][response_12425]" id="participation_promo_response_attributes_response_12425_41163"><label class="m_option_label" for="participation_promo_response_attributes_response_12425_41163">Museo Nacional del Prado, Madrid</label></div> </li> </ul> </div> </div> <!-- - class=row --> </div>
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:
<div class="wrapper_row js_complete_quizz_question_wrapper" style="">
<div class="row js_error_placement_parent step_20">
<div class="m_header_step" data-step="20">
<h1 class="js_error_placement quizz_question ">Cuéntanos, a través de una fotografía, qué es para ti viajar.</h1>
</div>
<div class="row js_ask_picture_form_field js_quiz_ask_picture_form_field css_quizz css_quizz_12426"><div class="field_wrap js_top_enclosing ">
<div class="js_enclosing js_data_promo_responses_transloadit_response_12426 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_12426]" id="participation_promo_response_attributes_transloadit_response_12426"></textarea>
<div class="js_error_placement"></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 ">
<span class="js_upload_btn_text">Elegir imagen</span>
<input type="file" name="js_form_for_promo_responses_transloadit_response_12426" id="js_form_for_promo_responses_transloadit_response_12426" data-params="{"auth":{"key":"4914af5b0fb040a492da5ecbd7a4bf37","max_size":10485760,"expires":"2018/07/06 11:38:59+00:00"},"template_id":"d80dc302be7b46378f6f5b0be1ef364e"}" data-signature="a0008ee1f9227baf57d2990a9a65b695d58a42fc" 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_12426" data-thumb-name="fan_page" 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 de 10 megabytes." size="50">
</div>
</div>
<div class="delete_img_btn js_delete_img_btn" style=" display: none;">
<div class="btn btn-danger m_btn">
<span><i class="fa fa-trash"></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" type="hidden" name="participation[promo_response_attributes][destroy_response_12426]" id="participation_promo_response_attributes_destroy_response_12426"></div></div>
</div><!-- - class=row -->
</div>
<div class="wrapper_row js_complete_quizz_question_wrapper" style=""> <div class="row js_error_placement_parent step_21"> <div class="m_header_step" data-step="21"> <h1 class="js_error_placement quizz_question ">Sube tu vídeo contándonos, en menos de 30 segundos, qué es lo que más te gusta de viajar.</h1> </div> <div class="row video_wrapper js_ask_video_form_field js_quiz_ask_video_form_field css_quizz css_quizz_12431"><div class="video_options js_video_options justify-content-center row"><a class="youtube active" href="#"><i class=" fa fa-youtube " aria-hidden="true"></i></a> <a class="vimeo" href="#"><i class=" fa fa-vimeo " aria-hidden="true"></i></a> <a class="vine" href="#"><i class=" fa fa-vine " aria-hidden="true"></i></a></div><div class="form_fields"><div class="form_input"><span class="js_video_url d-flex"><input placeholder="Escribe una url válida de Youtube, Vine o Vimeo" class="" type="text" name="participation[promo_response_attributes][video_url_12431]" id="participation_promo_response_attributes_video_url_12431"></span></div></div></div> </div><!-- - class=row --> </div>
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:
<div class="wrapper_row js_complete_quizz_question_wrapper" style=""> <div class="row js_error_placement_parent step_25"> <div class="m_header_step" data-step="25"> <h1 class="js_error_placement quizz_question ">¿En qué año naciste?</h1> </div> <div class="form_fields select_row"> <div class="form_input css_quizz css_quizz_36334"><span><input type="hidden" name="participation[promo_response_attributes][response_36334]" id="participation_promo_response_attributes_response_36334"><input data-next="1" data-adds-extra-text="0" autocomplete="off" class="js_quiz_datepicker hasDatepicker" readonly="readonly" data-altfield="#participation_promo_response_attributes_response_36334" data-minyear="1930" data-maxyear="2028" data-defaultdate="2018-07-06" data-mindate="1930-01-01" data-maxdate="2028-07-06 12:08:59 +0200" type="text" name="participation[promo_response_attributes][datepicker_response_36334]" id="participation_promo_response_attributes_datepicker_response_36334"></span></div> </div> </div> <!-- - class=row --> </div>
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:
<div class="wrapper_row js_complete_quizz_question_wrapper" style=""> <div class="row js_error_placement_parent step_26"> <div class="m_header_step" data-step="26"> <h1 class="js_error_placement quizz_question required_field">Valida un código o cupón</h1> </div> <div class="form_fields css_quizz css_quizz_36335"> <div class="col-12 col-md-6 form_input"> <span class=""><input required="required" class=" required_field" object="#<Participation:0x00007f9a603bf248>" type="text" name="participation[validated_coupon_code]" id="participation_validated_coupon_code"></span> </div> </div> </div> <!-- - class=row --> </div>
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:
<div class="wrapper_row js_complete_quizz_question_wrapper" style=""> <div class="row js_error_placement_parent step_22"> <div class="m_header_step" data-step="22"> <h1 class="js_error_placement quizz_question ">¿Cómo clasificamos los siguientes atributos?</h1> </div> <div class="form_fields matrix_content matrix_single"> <ul class="cols-5"> <li class="question_row header"><span class="question" style="max-width: calc( (100% / (5 + 1) ) - 1em);"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);">Muy por debajo del promedio</span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);">Por debajo del promedio</span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);">Promedio</span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);">Por encima del promedio</span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);">Muy por encima del promedio</span></li> <li class="question_row"><span class="question" style="max-width: calc( (100% / (5 + 1) ) - 1em);">Experiencia de servicio al cliente</span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103622" name="participation[promo_response_attributes][response_36203_matrix_question_20]" id="participation_promo_response_attributes_response_36203_matrix_question_20_103622"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103623" name="participation[promo_response_attributes][response_36203_matrix_question_20]" id="participation_promo_response_attributes_response_36203_matrix_question_20_103623"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103624" name="participation[promo_response_attributes][response_36203_matrix_question_20]" id="participation_promo_response_attributes_response_36203_matrix_question_20_103624"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103625" name="participation[promo_response_attributes][response_36203_matrix_question_20]" id="participation_promo_response_attributes_response_36203_matrix_question_20_103625"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103626" name="participation[promo_response_attributes][response_36203_matrix_question_20]" id="participation_promo_response_attributes_response_36203_matrix_question_20_103626"></span></li> <li class="question_row"><span class="question" style="max-width: calc( (100% / (5 + 1) ) - 1em);">La entrega a tiempo de servicio</span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103622" name="participation[promo_response_attributes][response_36203_matrix_question_21]" id="participation_promo_response_attributes_response_36203_matrix_question_21_103622"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103623" name="participation[promo_response_attributes][response_36203_matrix_question_21]" id="participation_promo_response_attributes_response_36203_matrix_question_21_103623"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103624" name="participation[promo_response_attributes][response_36203_matrix_question_21]" id="participation_promo_response_attributes_response_36203_matrix_question_21_103624"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103625" name="participation[promo_response_attributes][response_36203_matrix_question_21]" id="participation_promo_response_attributes_response_36203_matrix_question_21_103625"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103626" name="participation[promo_response_attributes][response_36203_matrix_question_21]" id="participation_promo_response_attributes_response_36203_matrix_question_21_103626"></span></li> <li class="question_row"><span class="question" style="max-width: calc( (100% / (5 + 1) ) - 1em);">Profesionalismo</span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103622" name="participation[promo_response_attributes][response_36203_matrix_question_22]" id="participation_promo_response_attributes_response_36203_matrix_question_22_103622"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103623" name="participation[promo_response_attributes][response_36203_matrix_question_22]" id="participation_promo_response_attributes_response_36203_matrix_question_22_103623"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103624" name="participation[promo_response_attributes][response_36203_matrix_question_22]" id="participation_promo_response_attributes_response_36203_matrix_question_22_103624"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103625" name="participation[promo_response_attributes][response_36203_matrix_question_22]" id="participation_promo_response_attributes_response_36203_matrix_question_22_103625"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103626" name="participation[promo_response_attributes][response_36203_matrix_question_22]" id="participation_promo_response_attributes_response_36203_matrix_question_22_103626"></span></li> <li class="question_row"><span class="question" style="max-width: calc( (100% / (5 + 1) ) - 1em);">La experiencia de compra</span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103622" name="participation[promo_response_attributes][response_36203_matrix_question_23]" id="participation_promo_response_attributes_response_36203_matrix_question_23_103622"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103623" name="participation[promo_response_attributes][response_36203_matrix_question_23]" id="participation_promo_response_attributes_response_36203_matrix_question_23_103623"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103624" name="participation[promo_response_attributes][response_36203_matrix_question_23]" id="participation_promo_response_attributes_response_36203_matrix_question_23_103624"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103625" name="participation[promo_response_attributes][response_36203_matrix_question_23]" id="participation_promo_response_attributes_response_36203_matrix_question_23_103625"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103626" name="participation[promo_response_attributes][response_36203_matrix_question_23]" id="participation_promo_response_attributes_response_36203_matrix_question_23_103626"></span></li> <li class="question_row"><span class="question" style="max-width: calc( (100% / (5 + 1) ) - 1em);">Calidad del servicio</span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103622" name="participation[promo_response_attributes][response_36203_matrix_question_24]" id="participation_promo_response_attributes_response_36203_matrix_question_24_103622"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103623" name="participation[promo_response_attributes][response_36203_matrix_question_24]" id="participation_promo_response_attributes_response_36203_matrix_question_24_103623"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103624" name="participation[promo_response_attributes][response_36203_matrix_question_24]" id="participation_promo_response_attributes_response_36203_matrix_question_24_103624"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103625" name="participation[promo_response_attributes][response_36203_matrix_question_24]" id="participation_promo_response_attributes_response_36203_matrix_question_24_103625"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103626" name="participation[promo_response_attributes][response_36203_matrix_question_24]" id="participation_promo_response_attributes_response_36203_matrix_question_24_103626"></span></li> <li class="question_row"><span class="question" style="max-width: calc( (100% / (5 + 1) ) - 1em);">Comprensión de las necesidades de los clientes</span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103622" name="participation[promo_response_attributes][response_36203_matrix_question_25]" id="participation_promo_response_attributes_response_36203_matrix_question_25_103622"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103623" name="participation[promo_response_attributes][response_36203_matrix_question_25]" id="participation_promo_response_attributes_response_36203_matrix_question_25_103623"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103624" name="participation[promo_response_attributes][response_36203_matrix_question_25]" id="participation_promo_response_attributes_response_36203_matrix_question_25_103624"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103625" name="participation[promo_response_attributes][response_36203_matrix_question_25]" id="participation_promo_response_attributes_response_36203_matrix_question_25_103625"></span><span class="answer" style="max-width: calc( (100% / (5 + 1) ) - 1em);"><input class="js_quizz_radio_button" data-next="1" data-adds-extra-text="0" type="radio" value="103626" name="participation[promo_response_attributes][response_36203_matrix_question_25]" id="participation_promo_response_attributes_response_36203_matrix_question_25_103626"></span></li> </ul> </div> </div> <!-- - class=row --> </div>
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:
<div class="wrapper_row js_complete_quizz_question_wrapper" style=""> <div class="row js_error_placement_parent step_23"> <div class="m_header_step" data-step="23"> <h1 class="js_error_placement quizz_question ">¿En qué momento del día haces uso de las siguientes redes sociales?</h1> </div> <div class="form_fields matrix_content matrix_multiple"> <ul class="cols-3"> <li class="question_row header"><span class="question" style="max-width: calc( (100% / (3 + 1) ) - 1em);"></span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);">Mañana</span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);">Tarde</span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);">Noche</span></li> <li class="question_row"><span class="question" style="max-width: calc( (100% / (3 + 1) ) - 1em);">Facebook</span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);"><input name="participation[promo_response_attributes][response_36308_matrix_question_28][]" type="hidden" value="0"><input class="js_quizz_checkbox" data-rule-required="false" data-next="1" data-adds-extra-text="0" type="checkbox" value="103854" name="participation[promo_response_attributes][response_36308_matrix_question_28][]" id="participation_promo_response_attributes_response_36308_matrix_question_28_103854"></span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);"><input name="participation[promo_response_attributes][response_36308_matrix_question_28][]" type="hidden" value="0"><input class="js_quizz_checkbox" data-rule-required="false" data-next="1" data-adds-extra-text="0" type="checkbox" value="103855" name="participation[promo_response_attributes][response_36308_matrix_question_28][]" id="participation_promo_response_attributes_response_36308_matrix_question_28_103855"></span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);"><input name="participation[promo_response_attributes][response_36308_matrix_question_28][]" type="hidden" value="0"><input class="js_quizz_checkbox" data-rule-required="false" data-next="1" data-adds-extra-text="0" type="checkbox" value="103856" name="participation[promo_response_attributes][response_36308_matrix_question_28][]" id="participation_promo_response_attributes_response_36308_matrix_question_28_103856"></span></li> <li class="question_row"><span class="question" style="max-width: calc( (100% / (3 + 1) ) - 1em);">Twitter</span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);"><input name="participation[promo_response_attributes][response_36308_matrix_question_29][]" type="hidden" value="0"><input class="js_quizz_checkbox" data-rule-required="false" data-next="1" data-adds-extra-text="0" type="checkbox" value="103854" name="participation[promo_response_attributes][response_36308_matrix_question_29][]" id="participation_promo_response_attributes_response_36308_matrix_question_29_103854"></span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);"><input name="participation[promo_response_attributes][response_36308_matrix_question_29][]" type="hidden" value="0"><input class="js_quizz_checkbox" data-rule-required="false" data-next="1" data-adds-extra-text="0" type="checkbox" value="103855" name="participation[promo_response_attributes][response_36308_matrix_question_29][]" id="participation_promo_response_attributes_response_36308_matrix_question_29_103855"></span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);"><input name="participation[promo_response_attributes][response_36308_matrix_question_29][]" type="hidden" value="0"><input class="js_quizz_checkbox" data-rule-required="false" data-next="1" data-adds-extra-text="0" type="checkbox" value="103856" name="participation[promo_response_attributes][response_36308_matrix_question_29][]" id="participation_promo_response_attributes_response_36308_matrix_question_29_103856"></span></li> <li class="question_row"><span class="question" style="max-width: calc( (100% / (3 + 1) ) - 1em);">Instagram</span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);"><input name="participation[promo_response_attributes][response_36308_matrix_question_30][]" type="hidden" value="0"><input class="js_quizz_checkbox" data-rule-required="false" data-next="1" data-adds-extra-text="0" type="checkbox" value="103854" name="participation[promo_response_attributes][response_36308_matrix_question_30][]" id="participation_promo_response_attributes_response_36308_matrix_question_30_103854"></span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);"><input name="participation[promo_response_attributes][response_36308_matrix_question_30][]" type="hidden" value="0"><input class="js_quizz_checkbox" data-rule-required="false" data-next="1" data-adds-extra-text="0" type="checkbox" value="103855" name="participation[promo_response_attributes][response_36308_matrix_question_30][]" id="participation_promo_response_attributes_response_36308_matrix_question_30_103855"></span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);"><input name="participation[promo_response_attributes][response_36308_matrix_question_30][]" type="hidden" value="0"><input class="js_quizz_checkbox" data-rule-required="false" data-next="1" data-adds-extra-text="0" type="checkbox" value="103856" name="participation[promo_response_attributes][response_36308_matrix_question_30][]" id="participation_promo_response_attributes_response_36308_matrix_question_30_103856"></span></li> </ul> </div> </div> <!-- - class=row --> </div>
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:
<div class="wrapper_row js_complete_quizz_question_wrapper" style=""> <div class="row js_error_placement_parent step_24"> <div class="m_header_step" data-step="24"> <h1 class="js_error_placement quizz_question ">¿Qué tipo de comida crees que:</h1> </div> <div class="form_fields matrix_content matrix_free_text"> <ul class="cols-3"> <li class="question_row header"><span class="question" style="max-width: calc( (100% / (3 + 1) ) - 1em);"></span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);">En el desayuno</span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);">En el almuerzo</span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);">En la cena</span></li> <li class="question_row"><span class="question" style="max-width: calc( (100% / (3 + 1) ) - 1em);">Es mejor</span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);"><input class="" data-next="1" data-adds-extra-text="0" type="text" name="participation[promo_response_attributes][response_36309_matrix_question_31_answer_103857]" id="participation_promo_response_attributes_response_36309_matrix_question_31_answer_103857"></span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);"><input class="" data-next="1" data-adds-extra-text="0" type="text" name="participation[promo_response_attributes][response_36309_matrix_question_31_answer_103858]" id="participation_promo_response_attributes_response_36309_matrix_question_31_answer_103858"></span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);"><input class="" data-next="1" data-adds-extra-text="0" type="text" name="participation[promo_response_attributes][response_36309_matrix_question_31_answer_103859]" id="participation_promo_response_attributes_response_36309_matrix_question_31_answer_103859"></span></li> <li class="question_row"><span class="question" style="max-width: calc( (100% / (3 + 1) ) - 1em);">Es más saludable</span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);"><input class="" data-next="1" data-adds-extra-text="0" type="text" name="participation[promo_response_attributes][response_36309_matrix_question_32_answer_103857]" id="participation_promo_response_attributes_response_36309_matrix_question_32_answer_103857"></span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);"><input class="" data-next="1" data-adds-extra-text="0" type="text" name="participation[promo_response_attributes][response_36309_matrix_question_32_answer_103858]" id="participation_promo_response_attributes_response_36309_matrix_question_32_answer_103858"></span><span class="answer" style="max-width: calc( (100% / (3 + 1) ) - 1em);"><input class="" data-next="1" data-adds-extra-text="0" type="text" name="participation[promo_response_attributes][response_36309_matrix_question_32_answer_103859]" id="participation_promo_response_attributes_response_36309_matrix_question_32_answer_103859"></span></li> </ul> </div> </div> <!-- - class=row --> </div>
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.