2.3.13. Text and background image for question + answer with text to be chosen from several options.
1. Introduction.
With our Cool Promo o Cool Promo White Label apps you can create your own quizzes and surveys with dynamic questions and answers.
Thanks to our Advanced Personalization, you can use your own html or css this way:
<!DOCTYPE html>
<html> <head> <!-- {{{ cool_tabs_head }}} --> </head> <body> {{{ cool_tabs_form }}} <!-- {{{ cool_tabs_body_end }}} --> </body> </html>
You can use {{{ cool_tabs_form }}} to include the different questions of your quiz. You can't modify the html directly on them. You can see how to set this html up in this document, with the objective of modifying the CSS in an easy way.
2. Step by step.
2.1. Personalized classes for each screen.
The different screens of a quiz or survey include dynamic classes and ids which change depending on the number of question. The last step, the entry form, always includes an additional class ('last_step') so you can identify that screen and personalize it.
<body> <div class="wrapper form_layout js_canvas_wrapper_for_wizard_current_step step1"> . </div> <div class="wrapper form_layout js_canvas_wrapper_for_wizard_current_step step2"> . </div> <div class="wrapper form_layout js_canvas_wrapper_for_wizard_current_step step last_step"> . </div> </body>
Other identifiers and classes are include on each <section> of the questions (wizard-p-X) y classes 'step_X'
<body> <form> <div class="section"> <div id="wizard"> <section style="" class="body current" id="wizard-p-0" role="tabpanel" aria-labelledby="wizard-h-0" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_1">....</div> </div> </section> <section style="" class="body current" id="wizard-p-1" role="tabpanel" aria-labelledby="wizard-h-1" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_2">....</div> </div> </section> <section style="" class="body current" id="wizard-p-2" role="tabpanel" aria-labelledby="wizard-h-2" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_3">....</div> </div> </section> </div> </div> </form> </body>
2.2. General errors.
Each question can show a general error which is shown in a <label> with the "step_error" class
<label id="participation_promo_response_attributes_response_11731-error" class="step_error" for="participation_promo_response_attributes_response_11731">Required field</label>
2.3. Different Type of Questions/Anwers you can include in your Questionnaire or Survey.
Check out the html code for each question and answer below them.
2.3.1. Question with text (and/or image) + written response.
This type is very simple, you only have to ask a question about your products or services or about what your survey or quiz is about and select the written answer option from the 'answer types'. In this way you will allow the participants to unleash their creativity or openly express their opinion. If you prefer you can accompany the question with an image.
<section style="" class="body current" id="wizard-p-0" role="tabpanel" aria-labelledby="wizard-h-0" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_1"> <div class="m_header_step" data-step="1"> <h1 class="js_error_placement quizz_question ">¿Qué tres aspectos valoras más a la hora de elegir un destino para viajar?</h1> <span class="not_mandatory">(optional)</span> </div> <div class="form_fields select_row"> <div class="form_input"> <span><input type="text" name="participation[promo_response_attributes][response_11728]" id="participation_promo_response_attributes_response_11728"></span> </div> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.2. Question with text (and/or image) + answer by star rating between 1 and N.
With this type of answer we will be allowing the participant to give a valuation of between 1 and the maximum number of stars that you decide. It is a resource widely used in opinion polls, when evaluating products or services. Select the Star Rating option from 'answer types' and indicate the maximum number that can be given in the answer.
<section style="display: block;" class="body current" id="wizard-p-1" role="tabpanel" aria-labelledby="wizard-h-1" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_2"> <div class="m_header_step" data-step="2"> <h1 class="js_error_placement quizz_question required_field">¿Qué valoración le darías al destino que has visitado?</h1> </div> <div class="form_fields star_row" data-max="10" data-score-name="participation[promo_response_attributes][response_11729]" style="cursor: pointer;"> <i data-alt="1" class="star-on-png" title="1"></i> <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. Question with text (and/or image) + answer using numeric rating.
As for the previous option, this is a type of answer that is frequently used in opinion surveys to evaluate products or services. Through the personalised score you will be able to carry out questionnaires that will allow you to measure the NPS (Net Promoter Score).
<section style="display: block;" class="body current" id="wizard-p-1" role="tabpanel" aria-labelledby="wizard-h-1" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_2"> <div class="m_header_step" data-step="2"> <h1 class="js_error_placement quizz_question required_field">¿Qué valoración le darías al destino que has visitado?</h1> </div> <div class="form_fields star_numbers_row" data-score-name="participation[promo_response_attributes]response_11730"> <ul class="m_options_list js_star_numbers"> <li class="star_number_0 star_number"> <input class="m_option_input js_quizz_radio" type="radio" value="0" name="participation[promo_response_attributes][response_11730]" id="participation_promo_response_attributes_response_11730_0"> <label class="m_option_label" for="participation_promo_response_attributes_response_11730_0">0</label> <span class="b_legend">Muy negativa</span> </li> <li class="star_number_1 star_number"> <input class="m_option_input js_quizz_radio" type="radio" value="1" name="participation[promo_response_attributes][response_11730]" id="participation_promo_response_attributes_response_11730_1"> <label class="m_option_label" for="participation_promo_response_attributes_response_11730_1">1</label> </li> . . . <li class="star_number_10 star_number"> <input class="m_option_input js_quizz_radio" type="radio" value="10" name="participation[promo_response_attributes][response_11730]" id="participation_promo_response_attributes_response_11730_10"> <label class="m_option_label" for="participation_promo_response_attributes_response_11730_10">10</label> <span class="l_legend">Muy positiva</span> </li> </ul> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.4. Question with text + reply with drop down.
By setting the type of answer using the drop-down, you will be offering the participants a range of answers that they will have to choose from, limiting them to the options that you put forward. With this type of answer, only one answer can be chosen.
<section style="display: block;" class="body current" id="wizard-p-1" role="tabpanel" aria-labelledby="wizard-h-1" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_2"> <div class="m_header_step" data-step="2"> <h1 class="js_error_placement quizz_question required_field">¿Qué tipo de alojamiento sueles elegir en tus viajes? <label id="participation_promo_response_attributes_response_11731-error" class="step_error" for="participation_promo_response_attributes_response_11731" style="display: none;"></label> </h1> </div> <div class="form_fields select_row"> <div class="form_select"> <div class="field_wrap select_field "> <span class="select platform platform57 not_msie custom-form_participation_promo_response_attributes_response_11731 responsive_select"> <span class="select_content"> <span class="select_button"> <span class="select_button_icon"></span> </span> </span> </span> <span class="select_label"> <select data-custom="true" data-msg-required="Required field" required="required" name="participation[promo_response_attributes][response_11731]" id="participation_promo_response_attributes_response_11731" aria-required="true" class="step_error"> <option value=""></option> <option value="Hotel">Hotel</option> <option value="Hostal">Hostal</option> <option value="B&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. Question with text (and/or image) + answer with text to be chosen from several options.
If we want to create or simple quiz this is the perfect type of question. We ask a question and we offer the participants different options from which to choose one.
<section style="display: block;" class="body current" id="wizard-p-4" role="tabpanel" aria-labelledby="wizard-h-4" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_5"> <div class="m_header_step" data-step="5"> <h1 class="js_error_placement quizz_question required_field">¿Cuál es tu época preferida del año para viajar?</h1> </div> <div class="m_options js_quizz_question"> <ul> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36428" name="participation[promo_response_attributes][response_11732]" id="participation_promo_response_attributes_response_11732_36428" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11732_36428">Semana Santa</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36429" name="participation[promo_response_attributes][response_11732]" id="participation_promo_response_attributes_response_11732_36429" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11732_36429">Verano</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36430" name="participation[promo_response_attributes][response_11732]" id="participation_promo_response_attributes_response_11732_36430" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11732_36430">Navidades</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36431" name="participation[promo_response_attributes][response_11732]" id="participation_promo_response_attributes_response_11732_36431" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11732_36431">Otros puentes/fiestas</label> </div> </li> </ul> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.6. Question with text + answer with text and image to choose from several options.
This option is similar to the previous question type, but we include a photograph. It is a good option for including images of the products or services referred to in the answer.
The size of the personalised images that accompany each answer is 300x168px.
<section style="display: block;" class="body current" id="wizard-p-5" role="tabpanel" aria-labelledby="wizard-h-5" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_6"> <div class="m_header_step" data-step="6"> <h1 class="js_error_placement quizz_question required_field">¿Cuál de los siguientes capitales europeas te gustaría visitar próximamente?</h1> </div> <div class="m_options_list js_quizz_question"> <div class="m_options_list_viewport swiper-container-horizontal"> <ol class="swiper_m_options_list_content m_options_list_content" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);"> <li class="li_wrapper m_options_list_item answer_0 swiper-no-swiping swiper-slide-active" style="width: 629px;"> <div class="m_options_list_figure"> <div class="m_badge"> <div class="m_badge_content">1</div> </div> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/:original_paris-2000275_1280.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="375" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/big_paris-2000275_1280.jpg" alt="Big paris 2000275 1280"> <span class="click_to_view" style="display: none;"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> </div> <div class="m_options_list_input"> <span class="m_options_list_separator"></span> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36432" name="participation[promo_response_attributes][response_11733]" id="participation_promo_response_attributes_response_11733_36432" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11733_36432">Paris</label> </div> </div> </li> <li class="li_wrapper m_options_list_item answer_0 swiper-no-swiping swiper-slide-active" style="width: 629px;"> <div class="m_options_list_figure"> <div class="m_badge"> <div class="m_badge_content">2</div> </div> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/:original_paris-2000275_1280.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="375" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/big_paris-2000275_1280.jpg" alt="Big paris 2000275 1280"> <span class="click_to_view" style="display: none;"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> </div> <div class="m_options_list_input"> <span class="m_options_list_separator"></span> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36432" name="participation[promo_response_attributes][response_11733]" id="participation_promo_response_attributes_response_11733_36432" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11733_36432">Berlín</label> </div> </div> </li> . . . </ol> </div> <div class="m_options_pagination swiper-pagination-clickable swiper-pagination-bullets"> <span class="m_options_page m_options_page_active"></span> <span class="m_options_page"></span> <span class="m_options_page"></span> <span class="m_options_page"></span> <span class="m_options_page"></span> </div> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.7. Question with text + answer with text, image and description to choose from several options.
This type of answer adds a description to each answer option. In the descriptions of our example we refer to the different locations of the images, but if we refer to our products or services in the quiz, we could include the name, price or even the reference of them.
<section style="display: block;" class="body current" id="wizard-p-5" role="tabpanel" aria-labelledby="wizard-h-5" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_6"> <div class="m_header_step" data-step="6"> <h1 class="js_error_placement quizz_question required_field">¿Qué es lo qué más te interesa de una ciudad/país a la hora de elegirlo como destino? (imagen) </h1> </div> <div class="m_options_list js_quizz_question"> <div class="m_options_list_viewport swiper-container-horizontal"> <ol class="swiper_m_options_list_content m_options_list_content" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);"> <li class="li_wrapper m_options_list_item answer_0 swiper-no-swiping swiper-slide-active" style="width: 629px;"> <div class="m_options_list_figure"> <div class="m_badge"> <div class="m_badge_content">1</div> </div> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/:original_paris-2000275_1280.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="375" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/big_paris-2000275_1280.jpg" alt="Big paris 2000275 1280"> <span class="click_to_view" style="display: none;"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> </div> <div class="m_options_list_input"> <span class="m_options_list_separator"></span> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36432" name="participation[promo_response_attributes][response_11733]" id="participation_promo_response_attributes_response_11733_36432" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11733_36432">Paris</label> </div> <span class="image_description">Catedral de Santa María del Fiore, Florencia (Italia)</span> </div> </li> <li class="li_wrapper m_options_list_item answer_0 swiper-no-swiping swiper-slide-active" style="width: 629px;"> <div class="m_options_list_figure"> <div class="m_badge"> <div class="m_badge_content">2</div> </div> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/:original_paris-2000275_1280.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="375" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/d3fdacd0095f11e78a389351f6f96375/big_paris-2000275_1280.jpg" alt="Big paris 2000275 1280"> <span class="click_to_view" style="display: none;"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> </div> <div class="m_options_list_input"> <span class="m_options_list_separator"></span> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36432" name="participation[promo_response_attributes][response_11733]" id="participation_promo_response_attributes_response_11733_36432" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11733_36432">Berlín</label> </div> <span class="image_description">Tonkotsu ramen (Japón)</span> </div> </li> . . . </ol> </div> <div class="m_options_pagination swiper-pagination-clickable swiper-pagination-bullets"> <span class="m_options_page m_options_page_active"></span> <span class="m_options_page"></span> <span class="m_options_page"></span> <span class="m_options_page"></span> <span class="m_options_page"></span> </div> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.8. Question with text + answer with images to choose from several options.
This answer option can be used if we want to create a quiz or very visual survey or if for example the participants have to guess a character, destination, etc. with the information that is given when formulating the question.
<section style="display: block;" class="body current" id="wizard-p-7" role="tabpanel" aria-labelledby="wizard-h-7" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_8"> <div class="m_header_step" data-step="8"> <h1 class="js_error_placement quizz_question required_field">¿Cuál de los siguientes país te gustaría visitar?</h1> </div> <div class="m_options_list js_quizz_question"> <div class="m_options_list_viewport swiper-container-horizontal"> <ol class="swiper_m_options_list_content m_options_list_content_no_carrousel" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);"> <li class="radio_wrapper li_wrapper only_image answer_0"> <div class="m_options_list_figure js_ok_ko_class_placement"> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/8375c5d0096511e7b4a6e152aee220c2/:original_Flag_of_Japan.svg.png" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="200" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/8375c5d0096511e7b4a6e152aee220c2/big_Flag_of_Japan.svg.png" alt="Big flag of japan.svg"> <span class="click_to_view" style="display: none;"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36468" name="participation[promo_response_attributes][response_11735]" id="participation_promo_response_attributes_response_11735_36468" aria-required="true"> </div> </li> <li class="radio_wrapper li_wrapper only_image answer_1"> <div class="m_options_list_figure js_ok_ko_class_placement"> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/95059f50096511e7b83dd1a14f5cf8f0/:original_usa-31021_960_720.png" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="158" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/95059f50096511e7b83dd1a14f5cf8f0/big_usa-31021_960_720.png" alt="Big usa 31021 960 720"> <span class="click_to_view" style="display: none;"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36469" name="participation[promo_response_attributes][response_11735]" id="participation_promo_response_attributes_response_11735_36469" aria-required="true"> </div> </li> . . . </ol> </div> <div class="m_options_pagination swiper-pagination-clickable swiper-pagination-bullets"> <span class="m_options_page m_options_page_active"></span> </div> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.9. Question with text and image + answer with image and description to be chosen from several options.
We can ask the question in our quiz or questionnaire through text, image or both options. For this type of question, the text is accompanied by an image and in the answer type the participants are given different images with accompanying descriptions as a legend, from which they must choose one.
If you decide to include an image that either contains the question or accompanies the question, you should know that the optimal size of the images for the personalised questions is 628x353px.
<section style="display: block;" class="body current" id="wizard-p-8" role="tabpanel" aria-labelledby="wizard-h-8" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_9"> <div class="m_header_step" data-step="9"> <h1 class="js_error_placement quizz_question required_field">¿Qué no puede faltar nunca en tu maleta?</h1> </div> <div class="m_figure_options js_question_image_wrapper"> <div class="m_figure_options_content js_after_answering_image_wrapper_if_no_image" style=""> <div class="m_badge m_badge_icon"> <div class="m_badge_content"> <span class="icn_watch icn">1</span> </div> </div> <figure class="m_figure"> <div class="m_figure_viewport"> <a href="#" class="m_figure_content m_figure_content_image image_lightbox" data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_images/5dc25db0096711e7b83dd1a14f5cf8f0/:original_maleta.jpg" data-after-href=""> <img width="672" height="448" class="m_figure_img js_question_image" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_images/5dc25db0096711e7b83dd1a14f5cf8f0/big_maleta.jpg" alt="Big maleta"> <span class="click_to_view" style="display: none;"><i class=" fa fa-search-plus " aria-hidden="true"></i>Zoom</span> </a> </div> </figure> </div> <div class="m_figure_options_values"> <div class="m_options_list js_quizz_question"> <div class="m_options_list_viewport swiper-container-horizontal"> <ol class="swiper_m_options_list_content m_options_list_content" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);"> <li class="li_wrapper m_options_list_item answer_0 swiper-no-swiping swiper-slide-active" style="width: 629px;"> <div class="m_options_list_figure"> <div class="m_badge"> <div class="m_badge_content">1</div> </div> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/a30593f0096811e7b83dd1a14f5cf8f0/:original_feet-1840619_960_720.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="200" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/a30593f0096811e7b83dd1a14f5cf8f0/big_feet-1840619_960_720.jpg" alt="Big feet 1840619 960 720"> <span class="click_to_view" style="display: none;"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> </div> <div class="m_options_list_input"> <span class="m_options_list_separator"></span> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36473" name="participation[promo_response_attributes][response_11736]" id="participation_promo_response_attributes_response_11736_36473" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11736_36473"> Calzado cómodo para patear la ciudad </label> </div> <span class="image_description"> Zapatillas BRZ </span> </div> </li> <li class="li_wrapper m_options_list_item answer_1 swiper-no-swiping swiper-slide-next" style="width: 629px;"> <div class="m_options_list_figure"> <div class="m_badge"> <div class="m_badge_content">2</div> </div> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/182dc130096811e795ec61a13e96826b/:original_monopod-785688_640-_1_.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="200" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/182dc130096811e795ec61a13e96826b/big_monopod-785688_640-_1_.jpg" alt="Big monopod 785688 640 1 "> <span class="click_to_view"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> </div> <div class="m_options_list_input"> <span class="m_options_list_separator"></span> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36474" name="participation[promo_response_attributes][response_11736]" id="participation_promo_response_attributes_response_11736_36474" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11736_36474"> Palo selfie </label> </div> <span class="image_description"> Palo selfie con disparador automático, EPICShopping </span> </div> </li> . . . </ol> </div> <div class="m_options_pagination swiper-pagination-clickable swiper-pagination-bullets"> <span class="m_options_page m_options_page_active"></span> <span class="m_options_page"></span> </div> </div> </div> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.10. Question with text and video + text answer to choose from several options.
Another option that we have when formulating the question for our quiz or questionnaire is to include a video about which participants have to respond. The optimal size for the video to be displayed correctly and for participants not to have to scroll too much is 560x315px
To add the video you have to include the html of the video below in the same section in which you include the question.
In our case it would be:
¿Sabrías decirnos qué ciudad española se esconde en el vídeo? <div class="aspect-ratio"><iframe width="560" height="315" src="https://www.youtube.com/embed/zOIawcK13DI" frameborder="0" allowfullscreen></iframe></div>
<section style="display: block;" class="body current" id="wizard-p-9" role="tabpanel" aria-labelledby="wizard-h-9" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_10"> <div class="m_header_step" data-step="10"> <h1 class="js_error_placement quizz_question required_field"> ¿Sabrías decirnos qué ciudad española se esconde en el vídeo? <div class="aspect-ratio"><iframe width="560" height="315" src="https://www.youtube.com/embed/zOIawcK13DI" frameborder="0" allowfullscreen></iframe></div> </h1> </div> <div class="m_options js_quizz_question"> <ul> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36479" name="participation[promo_response_attributes][response_11737]" id="participation_promo_response_attributes_response_11737_36479" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11737_36479">Sevilla</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36480" name="participation[promo_response_attributes][response_11737]" id="participation_promo_response_attributes_response_11737_36480" aria-required="true" ><label class="m_option_label" for="participation_promo_response_attributes_response_11737_36480">Valencia</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36481" name="participation[promo_response_attributes][response_11737]" id="participation_promo_response_attributes_response_11737_36481" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11737_36481">Madrid</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36482" name="participation[promo_response_attributes][response_11737]" id="participation_promo_response_attributes_response_11737_36482" aria-required="true"><label class="m_option_label" for="participation_promo_response_attributes_response_11737_36482">Bilbao</label> </div> </li> </ul> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.11. Question with text + video answer to choose from several options.
A second type that includes video is the one that allows for inclusion of video in the answers section. To upload the different videos as answers, you have to paste the html of the video you want to upload in each section to be used as an answer. For example: <iframe width="450" height="250" src="https://www.youtube.com/embed/hK7EHGv35Dk" frameborder="0" allowfullscreen></iframe></p>
The size of videos is automatically adjusted to 230x230px, as it allows them to be correctly displayed.
<section style="display: block;" class="body current" id="wizard-p-10" role="tabpanel" aria-labelledby="wizard-h-10" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_11"> <div class="m_header_step" data-step="11"> <h1 class="js_error_placement quizz_question required_field">¿En cuál de nuestros hoteles te gustaría poder alojarte?</h1> </div> <div class="m_options js_quizz_question"> <ul> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36483" name="participation[promo_response_attributes][response_11738]" id="participation_promo_response_attributes_response_11738_36483" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11738_36483"> <iframe width="450" height="250" src="https://www.youtube.com/embed/hK7EHGv35Dk" frameborder="0" allowfullscreen=""></iframe><p></p> </label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36483" name="participation[promo_response_attributes][response_11738]" id="participation_promo_response_attributes_response_11738_36483" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11738_36483"> <iframe width="450" height="250" src="https://www.youtube.com/embed/hK7EHGv35Dk" frameborder="0" allowfullscreen=""></iframe><p></p> </label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36483" name="participation[promo_response_attributes][response_11738]" id="participation_promo_response_attributes_response_11738_36483" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11738_36483"> <iframe width="450" height="250" src="https://www.youtube.com/embed/hK7EHGv35Dk" frameborder="0" allowfullscreen=""></iframe><p></p> </label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36483" name="participation[promo_response_attributes][response_11738]" id="participation_promo_response_attributes_response_11738_36483" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11738_36483"> <iframe width="450" height="250" src="https://www.youtube.com/embed/hK7EHGv35Dk" frameborder="0" allowfullscreen=""></iframe><p></p> </label> </div> </li> </ul> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.12. Question with text and image + answer using videos to choose from several options.
A third possibility that Cool Tabs offers to you is to include text in addition to the video in the answer. In our example we have also included an image that accompanies the question.
<section style="display: block;" class="body current" id="wizard-p-11" role="tabpanel" aria-labelledby="wizard-h-11" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_12"> <div class="m_header_step" data-step="12"> <h1 class="js_error_placement quizz_question required_field">¿Qué actividad de aventura no puede faltar en tus viajes?</h1> </div> <div class="m_figure_options js_question_image_wrapper"> <div class="m_figure_options_content js_after_answering_image_wrapper_if_no_image" style=""> <div class="m_badge m_badge_icon"> <div class="m_badge_content"> <span class="icn_watch icn">1</span> </div> </div> <figure class="m_figure"> <div class="m_figure_viewport"> <a href="#" class="m_figure_content m_figure_content_image image_lightbox" data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_images/3c1e90c0097111e79e565f9704070fcf/:original_mountain-biking-1210066_960_720.jpg" data-after-href=""> <img width="672" height="504" class="m_figure_img js_question_image" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_images/3c1e90c0097111e79e565f9704070fcf/big_mountain-biking-1210066_960_720.jpg" alt="Big mountain biking 1210066 960 720"> <span class="click_to_view" style="display: none;"><i class=" fa fa-search-plus " aria-hidden="true"></i>Zoom</span> </a> </div> </figure> </div> <div class="m_figure_options_values"> <div class="m_options js_quizz_question"> <ul> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36487" name="participation[promo_response_attributes][response_11739]" id="participation_promo_response_attributes_response_11739_36487" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11739_36487">Buceo <iframe width="450" height="250" src="https://www.youtube.com/embed/x77Sb0TkHIE" frameborder="0" allowfullscreen=""></iframe> </label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36487" name="participation[promo_response_attributes][response_11739]" id="participation_promo_response_attributes_response_11739_36487" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11739_36487">Senderismo <iframe width="450" height="250" src="https://www.youtube.com/embed/x77Sb0TkHIE" frameborder="0" allowfullscreen=""></iframe> </label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36487" name="participation[promo_response_attributes][response_11739]" id="participation_promo_response_attributes_response_11739_36487" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11739_36487">Montar en bicicleta <iframe width="450" height="250" src="https://www.youtube.com/embed/x77Sb0TkHIE" frameborder="0" allowfullscreen=""></iframe> </label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36487" name="participation[promo_response_attributes][response_11739]" id="participation_promo_response_attributes_response_11739_36487" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11739_36487">Esqui <iframe width="450" height="250" src="https://www.youtube.com/embed/x77Sb0TkHIE" frameborder="0" allowfullscreen=""></iframe> </label> </div> </li> </ul> </div> </div> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.13. Text and background image for question + answer with text to be chosen from several options.
If you have chosen to create a quiz or questionnaire this as visual as possible, we recommend this type of question, which includes a background image with the question and different answers, from which the participant will have to select one.
In this case, the size of the background image is 660x660px. In order not to distort the image, we recommend that you choose a square photograph.
As for the number of answers you can include, there is no maximum but be aware that it is optimised for a maximum of eight. If you're going to include more, make sure that the result you end up with fits with what you need.
<section style="background-image: url("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. Question with text + multiple answers with text.
We have seen different examples with the option to select a single answer, but there is also the possibility that participants have to choose their answer from a range of options and can select any quantity between zero and all of them. To do this, select the multiple answer option from 'answer types'.
We can set it up in the indicated section that the user has to select between a minimum and a maximum number of answers for that question. That way, if you do not select the minimum number or try to select more, the application will tell you that you cannot go to the next question.
<section style="display: block;" class="body current" id="wizard-p-13" role="tabpanel" aria-labelledby="wizard-h-13" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_14"> <div class="m_header_step" data-step="14"> <h1 class="js_error_placement quizz_question required_field">¿Qué tipo de viajero eres?</h1> </div> <div class="m_options js_quizz_question"> <ul> <li> <div class="m_option js_ok_ko_class_placement"> <input name="participation[promo_response_attributes][response_11741][]" type="hidden" value="0"><input class="m_option_input js_quizz_check_box" title="You should choose between 1 and 7 options" data-rule-required="true" minlength="1" maxlength="7" type="checkbox" value="36495" name="participation[promo_response_attributes][response_11741][]" id="participation_promo_response_attributes_response_11741_36495" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11741_36495">Mochilero</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input name="participation[promo_response_attributes][response_11741][]" type="hidden" value="0"><input class="m_option_input js_quizz_check_box" title="You should choose between 1 and 7 options" data-rule-required="true" minlength="1" maxlength="7" type="checkbox" value="36495" name="participation[promo_response_attributes][response_11741][]" id="participation_promo_response_attributes_response_11741_36495" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11741_36495">Mochilero</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input name="participation[promo_response_attributes][response_11741][]" type="hidden" value="0"><input class="m_option_input js_quizz_check_box" title="You should choose between 1 and 7 options" data-rule-required="true" minlength="1" maxlength="7" type="checkbox" value="36495" name="participation[promo_response_attributes][response_11741][]" id="participation_promo_response_attributes_response_11741_36495" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11741_36495">Mochilero</label> </div> </li> ... ... </ul> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
2.3.15. Question with text + multiple answers with images.
Another option for our quiz or questionnaire using multiple answers is to include images instead of text. In this way, the participants would have to choose their answer from several images.
<section style="display: block;" class="body current" id="wizard-p-15" role="tabpanel" aria-labelledby="wizard-h-15" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_16"> <div class="m_header_step" data-step="16"> <h1 class="js_error_placement quizz_question required_field">¿Qué medio de transporte sueles utilizar para desplazarte cuando visitas una ciudad?</h1> </div> <div class="m_options_list js_quizz_question"> <div class="m_options_list_viewport swiper-container-horizontal"> <ol class="swiper_m_options_list_content m_options_list_content_no_carrousel" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);"> <li class="checkbox_wrapper li_wrapper only_image answer_0"> <div class="m_options_list_figure js_ok_ko_class_placement"> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/0d779b30097711e7962c15a61e8c5521/:original_metro.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="200" class="m_figure_img active" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/0d779b30097711e7962c15a61e8c5521/big_metro.jpg" alt="Big metro"> <span class="click_to_view" style="display: none;"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> <input name="participation[promo_response_attributes][response_11743][]" type="hidden" value="0"> <input class="m_option_input js_quizz_check_box" title="You should choose between 1 and 4 options" data-rule-required="true" minlength="1" maxlength="4" data-ok="-1" type="checkbox" value="36507" name="participation[promo_response_attributes][response_11743][]" id="participation_promo_response_attributes_response_11743_36507" aria-required="true"> </div> </li> <li class="checkbox_wrapper li_wrapper only_image answer_0"> <div class="m_options_list_figure js_ok_ko_class_placement"> <figure class="m_figure"> <div class="m_figure_viewport"> <a data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/0d779b30097711e7962c15a61e8c5521/:original_metro.jpg" href="#" class="m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox"> <img width="300" height="200" class="m_figure_img" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_answer_images/0d779b30097711e7962c15a61e8c5521/big_metro.jpg" alt="Big metro"> <span class="click_to_view" style="display: none;"> <i class=" fa fa-search-plus " aria-hidden="true"></i> Zoom </span> </a> </div> </figure> <input name="participation[promo_response_attributes][response_11743][]" type="hidden" value="0"> <input class="m_option_input js_quizz_check_box" title="You should choose between 1 and 4 options" data-rule-required="true" minlength="1" maxlength="4" data-ok="-1" type="checkbox" value="36507" name="participation[promo_response_attributes][response_11743][]" id="participation_promo_response_attributes_response_11743_36507" aria-required="true"> </div> </li> . . . </ol> </div> <div class="m_options_pagination swiper-pagination-clickable swiper-pagination-bullets"> <span class="m_options_page m_options_page_active"></span> </div> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
The picture chosen by the user has the class 'active'.
2.3.16. Question with text and image + answer with text to be chosen from several options + 'correct answer' feedback.
This is one of the most used question types used in quizzes. A question is created that can be accompanied by an image and the user is given different answers from which they have to choose one. They are immediately told if they have been successful or not and given feedback that usually includes text that explains the correct answer.
<section style="display: block;" class="body current" id="wizard-p-14" role="tabpanel" aria-labelledby="wizard-h-14" aria-hidden="false"> <div class="wrapper_row" style=""> <div class="row js_error_placement_parent step_15"> <div class="m_header_step" data-step="15"> <h1 class="js_error_placement quizz_question required_field">¿Qué ciudad ha sido la más visitada del mundo en 2016?</h1> </div> <div class="m_figure_options js_question_image_wrapper"> <div class="m_figure_options_content js_after_answering_image_wrapper_if_no_image" style=""> <div class="m_badge m_badge_icon"> <div class="m_badge_content"> <span class="icn_watch icn">1</span> </div> </div> <figure class="m_figure"> <div class="m_figure_viewport"> <a href="#" class="m_figure_content m_figure_content_image image_lightbox" data-href="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_images/81040f40097511e7b9cfbfec2e91e13e/:original_turistas.jpg" data-after-href=""> <img width="628" height="353" class="m_figure_img js_question_image" src="https://d1gfwauryv0c0u.cloudfront.net/assets/promo_question_images/81040f40097511e7b9cfbfec2e91e13e/big_turistas.png" alt="Big turistas"> <span class="click_to_view" style="display: none;"><i class=" fa fa-search-plus " aria-hidden="true"></i>Zoom</span> </a> </div> </figure> </div> <div class="m_figure_options_values"> <div class="m_options js_quizz_question"> <ul> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36503" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36503" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36503">Londres</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36503" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36503" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36503">Nueva York</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36503" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36503" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36503">Bangkok</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio" data-msg-required="Choose one of the options" required="required" type="radio" value="36503" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36503" aria-required="true"> <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36503">Tokio</label> </div> </li> </ul> </div> </div> </div> </div><!-- - class=row --> </div><!-- - class=wrapper_row --> </section>
If the user gives a right answer, this would be the html,(the right answer is shown with 'js_answer_ok' and the class '.js_quizz_question_ok' is added to the button with the right answer):
<div class="m_figure_options_values"> <div class="m_options js_quizz_question"> <div style="" class="js_answer_ok">¡Correcto! Según el estudio Global Destination Cities Index (GDCI), Bangkok es la ciudad del mundo que más turistas ha atraído en 2016. En concreto a 21,47 millones. ¡Asía está de moda! </div> <div style="display: none;" class="js_answer_ko">Fallaste... Según el estudio Global Destination Cities Index (GDCI), Bangkok es la ciudad del mundo que más turistas ha atraído en 2016. En concreto a 21,47 millones. ¡Asía está de moda! </div> <ul> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="-1" type="radio" value="36503" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36503" aria-required="true" disabled="disabled"> <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36503">Londres</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="-1" type="radio" value="36504" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36504" aria-required="true" disabled="disabled"> <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36504">Nueva York</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement js_quizz_question_ok"> <input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="1" type="radio" value="36505" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36505" aria-required="true" aria-invalid="false"><label class="m_option_label" for="participation_promo_response_attributes_response_11742_36505">Bangkok</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"><input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="-1" type="radio" value="36506" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36506" aria-required="true" disabled="disabled"> <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36506">Tokio</label> </div> </li> </ul> </div> </div>
If the user gives a wrong answer.
<div class="m_figure_options_values"> <div class="m_options js_quizz_question"> <div style="display: none;" class="js_answer_ok">¡Correcto! Según el estudio Global Destination Cities Index (GDCI), Bangkok es la ciudad del mundo que más turistas ha atraído en 2016. En concreto a 21,47 millones. ¡Asía está de moda! </div> <div style="" class="js_answer_ko">Fallaste... Según el estudio Global Destination Cities Index (GDCI), Bangkok es la ciudad del mundo que más turistas ha atraído en 2016. En concreto a 21,47 millones. ¡Asía está de moda! </div> <ul> <li> <div class="m_option js_ok_ko_class_placement js_quizz_question_ko"> <input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="-1" type="radio" value="36503" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36503" aria-required="true" disabled="disabled"> <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36503">Londres</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"> <input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="-1" type="radio" value="36504" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36504" aria-required="true" disabled="disabled"> <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36504">Nueva York</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement js_quizz_question_ok"> <input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="1" type="radio" value="36505" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36505" aria-required="true" aria-invalid="false"><label class="m_option_label" for="participation_promo_response_attributes_response_11742_36505">Bangkok</label> </div> </li> <li> <div class="m_option js_ok_ko_class_placement"><input class="m_option_input js_quizz_radio valid" data-msg-required="Choose one of the options" required="required" data-ok="-1" type="radio" value="36506" name="participation[promo_response_attributes][response_11742]" id="participation_promo_response_attributes_response_11742_36506" aria-required="true" disabled="disabled"> <label class="m_option_label" for="participation_promo_response_attributes_response_11742_36506">Tokio</label> </div> </li> </ul> </div> </div>
3. Related content.
Cool Promo: Create your Campaign with Cool Tabs >>
Comments
1 comment
Hi there,
Is it possible to send the css code so I can style it in a similar way?
Thanks, Curt
Please sign in to leave a comment.