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.
There is 3 options to configure the Quiz structure: Quiz by steps (one question by page displayed), Two steps Quiz (all the Quiz questions in one page and entry form in another one) and All in one page (all the questions and the entry form in one page).
The different screens of a quiz or survey include dynamic classes and ids which change depending on the number of question and the general configuration of the Quiz section. The last step, the entry form, always includes an additional class ('last_step') so you can identify that screen and personalize it.
Quiz by steps:
<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>
Two steps Quiz:
// Step 1
<body>
<div class="wrapper form_layout js_locator_for_wizard_step_indicators step0">
.
</div>
</body>
/// Step 2
<body>
<div class="wrapper form_layout js_locator_for_wizard_step_indicators step1 last_step">
.
</div>
</body>
All in one page:
<body>
<div class="wrapper form_layout js_locator_for_wizard_step_indicators">
.
</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 class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_free_text js_type_free_text js_free_text" data-forkable="false" data-position="2" data-question-id="70885" data-question-text="¿Dónde te gustaría ir de viaje?" data-question-type="free_text" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="">
<div class="header_step" data-step="3">
<div class="quizz_question js_error_shake_and_mark_step_error">
Where would you like to go on a trip?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_70885">
<div class="d-flex row justify-content-center align-items-start">
<div class="col-12 col-md-8 mx-auto">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-question-type="free_text" type="text" name="participation[promo_response_attributes][response_70885]" id="participation_promo_response_attributes_response_70885" />
</div>
</div>
</div>
</div>
</div>
</section>
2.3.2. 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 class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_rate js_type_rate js_rate body current" data-forkable="false" data-position="3" data-question-id="50099" data-question-text="¿Qué valoración le darías al destino que has visitado?" data-question-type="rate" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-3" role="tabpanel" aria-labelledby="wizard-h-3" aria-hidden="false">
<div class="header_step" data-step="4">
<div class="quizz_question js_error_shake_and_mark_step_error">
How would you rate the destination you visited?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div class="mb-4">
<!-- timer -->
<div class="d-flex flex-row flex-wrap justify-content-center align-items-center form_fields star_row css_quizz css_quizz_50099" style="cursor: pointer;">
<div class="form_stars js_form_stars d-flex flex-wrap py-1 justify-content-center" data-max="10" data-score-name="participation[promo_response_attributes][response_50099]" style="cursor: pointer;">
<i data-alt="1" class="star-on-png" title="1"></i>
<i data-alt="2" class="star-on-png" title="2"></i>
<i data-alt="3" class="star-on-png" title="3"></i>
<i data-alt="4" class="star-on-png" title="4"></i>
<i data-alt="5" class="star-on-png" title="5"></i>
<i data-alt="6" class="star-off-png" title="6"></i>
<i data-alt="7" class="star-off-png" title="7"></i>
<i data-alt="8" class="star-off-png" title="8"></i>
<i data-alt="9" class="star-off-png" title="9"></i>
<i data-alt="10" class="star-off-png" title="10"></i>
<input name="participation[promo_response_attributes][response_50099]" type="hidden" value="5">
</div>
</div>
</div>
</div>
</section>
2.3.3. 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 class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_rate_numbers js_type_rate_numbers js_rate_numbers body current" data-forkable="false" data-position="4" data-question-id="50100" data-question-text="¿Qué puntuación le darías al viaje que has realizado con nosotros?" data-question-type="rate_numbers" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-4" role="tabpanel" aria-labelledby="wizard-h-4" aria-hidden="false">
<div class="header_step" data-step="5">
<div class="quizz_question js_error_shake_and_mark_step_error">
How would you rate your trip with us?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div class="star-numbers">
<!-- timer -->
<div class="form_fields star_numbers_row css_quizz css_quizz css_quizz_50100" data-max="10" data-score-name="participation[promo_response_attributes][response_50100]" style="cursor: pointer;">
<div class="star-number-container">
<ul class="m_options_list js_star_numbers d-flex flex-wrap flex-md-nowrap flex-row justify-content-center mb-0">
<li class="star_number_0 star_number">
<input class="m_option_input js_quizz_radio_button valid" data-next="1" data-adds-extra-text="0" autocomplete="off" data-question-type="rate_numbers" type="radio" value="0" name="participation[promo_response_attributes][response_50100]" id="participation_promo_response_attributes_response_50100_0">
<label class="m_option_label" for="participation_promo_response_attributes_response_50100_0">0</label>
</li>
<li class="star_number_1 star_number">
<input class="m_option_input js_quizz_radio_button valid" data-next="1" data-adds-extra-text="0" autocomplete="off" data-question-type="rate_numbers" type="radio" value="1" name="participation[promo_response_attributes][response_50100]" id="participation_promo_response_attributes_response_50100_1">
<label class="m_option_label" for="participation_promo_response_attributes_response_50100_1">1</label>
</li>
.
.
.
<li class="star_number_10 star_number">
<input class="m_option_input js_quizz_radio_button valid" data-next="1" data-adds-extra-text="0" autocomplete="off" data-question-type="rate_numbers" type="radio" value="10" name="participation[promo_response_attributes][response_50100]" id="participation_promo_response_attributes_response_50100_10">
<label class="m_option_label" for="participation_promo_response_attributes_response_50100_10">10</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
2.3.4. 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 class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_select js_type_select js_select body current" data-forkable="false" data-position="5" data-question-id="50101" data-question-text="¿Qué tipo de alojamiento sueles elegir en tus viajes?" data-question-type="select" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-5" role="tabpanel" aria-labelledby="wizard-h-5" aria-hidden="false">
<div class="header_step" data-step="6">
<div class="quizz_question js_error_shake_and_mark_step_error">
What type of lodging do you usually choose?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_select css_quizz css_quizz_50101">
<div class="field_wrap select_field d-flex flex-row row justify-content-center">
<div class="col-12 col-md-6">
<span class="select platform platform60 not_msie responsive_select active_select">
<span class="select_content">
<span class="select_button">
<span class="select_button_icon"></span>
</span>
<span class="select_label">
<span></span>
</span>
</span>
<div>
<select class="custom-select valid" data-custom="true" data-next="1" data-adds-extra-text="0" autocomplete="off" data-question-type="select" name="participation[promo_response_attributes][response_50101]" id="participation_promo_response_attributes_response_50101" aria-invalid="false">
<option value="" label=" "></option>
<option value="149589">Hotel</option>
<option value="149590">Hostel</option>
<option value="149591">B&B</option>
<option value="149592">Apartament</option>
<option value="149593">Couchsurfing</option>
</select>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
</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 class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_radio_button js_type_radio_button js_radio_button body current" data-forkable="false" data-position="6" data-question-id="50102" data-question-text="¿Cuál es tu época preferida del año para viajar?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-6" role="tabpanel" aria-labelledby="wizard-h-6" aria-hidden="false">
<div class="header_step" data-step="7">
<div class="quizz_question js_error_shake_and_mark_step_error">
What is your favorite time of the year to travel?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50102">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end
answer_columns_2">
<li class="li_wrapper m_options_list_item answer_149594 tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description ">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Semana Santa" data-question-type="radio_button" class="m_option_input js_quizz_radio_button valid" type="radio" value="149594" name="participation[promo_response_attributes][response_50102]" id="participation_promo_response_attributes_response_50102_149594">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50102_149594">
Holly week
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</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 class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_radio_button js_type_radio_button js_radio_button body current" data-forkable="false" data-position="7" data-question-id="50103" data-question-text="¿Cuál de las siguientes capitales europeas te gustaría visitar próximamente?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-7" role="tabpanel" aria-labelledby="wizard-h-7" aria-hidden="false">
<div class="header_step" data-step="8">
<div class="quizz_question js_error_shake_and_mark_step_error">
Which of the following European cities would you like to visit in the near future?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50103">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end
answer_columns_2">
<li class="li_wrapper m_options_list_item answer_149598 tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks ">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a data-href="https://uploads4.ct-assets.com/assets/promo_answer_images/cf0a1cba88f54790a53d6aa32a49d906/:original_photo-1431274172761-fca41d930114" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_image_lightbox">
<img class="m_figure_img" src="https://uploads4.ct-assets.com/assets/promo_answer_images/cf0a1cba88f54790a53d6aa32a49d906/big_photo-1431274172761-fca41d930114.jpg" width="300" height="200">
<span class="click_to_view"><i class=" fas fa-search-plus " aria-hidden="true"></i>Zoom</span>
</a>
</div>
</figure>
</div>
<div class="m_options_list_input no-description ">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="París" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="149598" name="participation[promo_response_attributes][response_50103]" id="participation_promo_response_attributes_response_50103_149598">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50103_149598">
París
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</section>
2.3.7. 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 class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_radio_button js_type_radio_button js_radio_button body current" data-forkable="false" data-position="8" data-question-id="50104" data-question-text="¿Qué es lo qué más te interesa de una ciudad/país a la hora de elegirlo como destino?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-8" role="tabpanel" aria-labelledby="wizard-h-8" aria-hidden="false">
<div class="header_step" data-step="9">
<div class="quizz_question js_error_shake_and_mark_step_error">
What do you find most interesting about a city/country when choosing it as a destination?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50104">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end
answer_columns_2">
<li class="li_wrapper m_options_list_item answer_149603 tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks ">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a data-href="https://uploads-old.ct-assets.com/assets/promo_answer_images/51487ec0096211e7862f59654d9e0f8f/:original_florence-1066314_1280.jpg" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_image_lightbox">
<img class="m_figure_img" src="https://uploads-old.ct-assets.com/assets/promo_answer_images/51487ec0096211e7862f59654d9e0f8f/big_florence-1066314_1280.jpg" width="300" height="206">
<span class="image_description">Cathedral of Santa Maria del Fiore, Florence (Italy)</span>
<span class="click_to_view"><i class=" fas fa-search-plus " aria-hidden="true"></i>Zoom</span>
</a>
</div>
</figure>
</div>
<div class="m_options_list_input ">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Arquitectura" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="149603" name="participation[promo_response_attributes][response_50104]" id="participation_promo_response_attributes_response_50104_149603">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50104_149603">
Architecture
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</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 class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_radio_button js_type_radio_button js_radio_button body current" data-forkable="false" data-position="9" data-question-id="50105" data-question-text="¿Cuál de los siguientes países te gustaría visitar?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-9" role="tabpanel" aria-labelledby="wizard-h-9" aria-hidden="false">
<div class="header_step" data-step="10">
<div class="quizz_question js_error_shake_and_mark_step_error">
Which of the following countries would you like to visit?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50105">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end
answer_columns_2">
<li class="li_wrapper m_options_list_item answer_149608 tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks no-answer-with-image ">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a data-href="https://uploads-old.ct-assets.com/assets/promo_answer_images/8375c5d0096511e7b4a6e152aee220c2/:original_Flag_of_Japan.svg.png" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_image_lightbox">
<img class="m_figure_img" src="https://uploads-old.ct-assets.com/assets/promo_answer_images/8375c5d0096511e7b4a6e152aee220c2/big_Flag_of_Japan.svg.png" width="300" height="200">
<span class="click_to_view"><i class=" fas fa-search-plus " aria-hidden="true"></i>Zoom</span>
</a>
</div>
</figure>
</div>
<div class="m_options_list_input no-answer no-description ">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Flag_of_Japan.svg.png" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="149608" name="participation[promo_response_attributes][response_50105]" id="participation_promo_response_attributes_response_50105_149608">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50105_149608"></label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</sec
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 class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_radio_button js_type_radio_button js_radio_button body current" data-forkable="false" data-position="10" data-question-id="50106" data-question-text="¿Qué no puede faltar nunca en tu maleta?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-10" role="tabpanel" aria-labelledby="wizard-h-10" aria-hidden="false">
<div class="header_step" data-step="11">
<div class="quizz_question js_error_shake_and_mark_step_error">
What items can you not miss in your luggage?
</div>
</div>
<div class="form_fields js_question_image_wrapper" style="">
<figure class="m_figure js_answer_image anim_all">
<a class="m_figure_content m_figure_content_image image_lightbox" data-href="https://uploads-old.ct-assets.com/assets/promo_question_images/5dc25db0096711e7b83dd1a14f5cf8f0/:original_maleta.jpg" data-after-href="">
<img class="m_figure_img js_question_image" src="https://uploads-old.ct-assets.com/assets/promo_question_images/5dc25db0096711e7b83dd1a14f5cf8f0/big_maleta.jpg" width="672" height="448">
<span class="click_to_view"><i class=" fas fa-search-plus " aria-hidden="true"></i>Ampliar</span>
</a>
</figure>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50106">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end
answer_columns_2">
<li class="li_wrapper m_options_list_item answer_149614 tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks ">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a data-href="https://uploads-old.ct-assets.com/assets/promo_answer_images/a30593f0096811e7b83dd1a14f5cf8f0/:original_feet-1840619_960_720.jpg" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_image_lightbox">
<img class="m_figure_img opacity" src="https://uploads-old.ct-assets.com/assets/promo_answer_images/a30593f0096811e7b83dd1a14f5cf8f0/big_feet-1840619_960_720.jpg" width="300" height="200">
<span class="image_description">BRZ sneakers</span>
<span class="click_to_view" style="display: none;"><i class=" fas fa-search-plus " aria-hidden="true"></i>Zoom</span>
</a>
</div>
</figure>
</div>
<div class="m_options_list_input ">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Calzado cómodo para patear la ciudad" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="149614" name="participation[promo_response_attributes][response_50106]" id="participation_promo_response_attributes_response_50106_149614">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50106_149614">
Comfortable shoes
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</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:
Example:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_radio_button js_type_radio_button js_radio_button body current" data-forkable="false" data-position="11" data-question-id="50107" data-question-text=" Would you know what Spanish city is hiding in the video? " data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-11" role="tabpanel" aria-labelledby="wizard-h-11" aria-hidden="false">
<div class="header_step" data-step="12">
<div class="quizz_question js_error_shake_and_mark_step_error">
<p> Would you know what Spanish city is hiding in the video? </p>
</div>
</div>
<div class="aspect-ratio">
<iframe class="youtube-player embed_video lazy-loaded" data-src="https://www.youtube-nocookie.com/embed/zOIawcK13DI?rel=0&" allowfullscreen="" src="https://www.youtube-nocookie.com/embed/zOIawcK13DI?rel=0&" width="397" height="360"></iframe>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50107">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end
answer_columns_2">
<li class="li_wrapper m_options_list_item answer_149619 tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description ">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Sevilla" data-question-type="radio_button" class="m_option_input js_quizz_radio_button valid" type="radio" value="149619" name="participation[promo_response_attributes][response_50107]" id="participation_promo_response_attributes_response_50107_149619">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50107_149619">
Sevilla
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</section>
2.3.11. 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.
You can choose from different options to add a video:
The size of videos is automatically adjusted to column size that contains it, as it allows them to be correctly displayed.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_radio_button js_type_radio_button js_radio_button body current" data-forkable="false" data-position="12" data-question-id="50108" data-question-text="¿En cuál de nuestros hoteles te gustaría poder alojarte?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-12" role="tabpanel" aria-labelledby="wizard-h-12" aria-hidden="false">
<div class="header_step" data-step="13">
<div class="quizz_question js_error_shake_and_mark_step_error">
Which of our hotels would you like to stay at?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50108">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end
answer_columns_2">
<li class="li_wrapper m_options_list_item answer_149623 tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks ">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a class="m_figure_content m_figure_content_image m_figure_content_horizontal">
<div class="aspect-ratio">
<iframe class="youtube-player embed_video lazy-loaded" data-src="https://www.youtube-nocookie.com/embed/hK7EHGv35Dk?rel=0&" allowfullscreen="" src="https://www.youtube-nocookie.com/embed/hK7EHGv35Dk?rel=0&" width="397" height="360"></iframe>
</div>
</a>
</div>
</figure>
</div>
<div class="m_options_list_input no-description video-answer ">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="149623" name="participation[promo_response_attributes][response_50108]" id="participation_promo_response_attributes_response_50108_149623">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50108_149623">
Choose
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</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 class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_radio_button js_type_radio_button js_radio_button body current" data-forkable="false" data-position="13" data-question-id="50109" data-question-text="¿Qué actividad de aventura no puede faltar en tus viajes?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-13" role="tabpanel" aria-labelledby="wizard-h-13" aria-hidden="false">
<div class="header_step" data-step="14">
<div class="quizz_question js_error_shake_and_mark_step_error">
What adventure activity is a must in your travels?
</div>
</div>
<div class="form_fields js_question_image_wrapper" style="">
<figure class="m_figure js_answer_image anim_all">
<a class="m_figure_content m_figure_content_image image_lightbox" data-href="https://uploads-old.ct-assets.com/assets/promo_question_images/3c1e90c0097111e79e565f9704070fcf/:original_mountain-biking-1210066_960_720.jpg" data-after-href="">
<img class="m_figure_img js_question_image" src="https://uploads-old.ct-assets.com/assets/promo_question_images/3c1e90c0097111e79e565f9704070fcf/big_mountain-biking-1210066_960_720.jpg" width="672" height="504">
<span class="click_to_view"><i class=" fas fa-search-plus " aria-hidden="true"></i>Ampliar</span>
</a>
</figure>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50109">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end
answer_columns_2">
<li class="li_wrapper m_options_list_item answer_149627 tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks ">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a class="m_figure_content m_figure_content_image m_figure_content_horizontal">
<div class="aspect-ratio">
<iframe class="youtube-player embed_video lazy-loaded" data-src="https://www.youtube-nocookie.com/embed/x77Sb0TkHIE?rel=0&" allowfullscreen="" src="https://www.youtube-nocookie.com/embed/x77Sb0TkHIE?rel=0&" width="397" height="360"></iframe>
</div>
</a>
</div>
</figure>
</div>
<div class="m_options_list_input no-description video-answer ">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Buceo " data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="149627" name="participation[promo_response_attributes][response_50109]" id="participation_promo_response_attributes_response_50109_149627">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50109_149627">
Scuba diving
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</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 class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_radio_button js_type_radio_button question_bg js_radio_button body current" data-forkable="false" data-position="14" data-question-id="50110" data-question-text="Eres de los que planifican su viaje..." data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="background-image: url("https://uploads-old.ct-assets.com/assets/promo_question_background_images/0d6ac6c0097311e7b88edb2866430f12/big_calendario-viajes.png"); min-height: 628px;" id="wizard-p-14" role="tabpanel" aria-labelledby="wizard-h-14" aria-hidden="false">
<div class="header_step" data-step="15">
<div class="quizz_question js_error_shake_and_mark_step_error">
You plan your trip...
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50110">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end
answer_columns_2">
<li class="li_wrapper m_options_list_item answer_149631 tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description ">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Una semana antes" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="149631" name="participation[promo_response_attributes][response_50110]" id="participation_promo_response_attributes_response_50110_149631">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50110_149631">
A week before
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</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 class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_checkbox js_type_checkbox js_checkbox body current" data-forkable="false" data-position="15" data-question-id="50111" data-question-text="¿Qué tipo de viajero eres?" data-question-type="checkbox" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-15" role="tabpanel" aria-labelledby="wizard-h-15" aria-hidden="false">
<div class="header_step" data-step="16">
<div class="quizz_question js_error_shake_and_mark_step_error">
What type of traveler are you?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50111">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end
answer_columns_2">
<li class="li_wrapper m_options_list_item answer_149635 tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description ">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input name="participation[promo_response_attributes][response_50111][]" type="hidden" value="0" autocomplete="off"><input title="Escoge entre 1 y 7 opciones" data-rule-required="false" minlength="1" maxlength="7" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Mochilero" data-question-type="checkbox" data-response-id="50111" data-correct-position="1" class="m_option_input js_quizz_checkbox js_quizz_checkbox" type="checkbox" value="149635" name="participation[promo_response_attributes][response_50111][]" id="participation_promo_response_attributes_response_50111_149635">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50111_149635">
Backpacker
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</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 class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix bg_center background_image steps-contender type_checkbox js_type_checkbox js_checkbox body current" data-forkable="false" data-position="17" data-question-id="50113" data-question-text="¿Qué medio de transporte sueles utilizar para desplazarte cuando visitas una ciudad?" data-question-type="checkbox" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="" id="wizard-p-17" role="tabpanel" aria-labelledby="wizard-h-17" aria-hidden="false">
<div class="header_step" data-step="18">
<div class="quizz_question js_error_shake_and_mark_step_error">
What means of transportation do you usually use to get around when visiting a city?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement "></div>
<div>
<!-- timer -->
<div class="form_input css_quizz css_quizz_50113">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end
answer_columns_2">
<li class="li_wrapper m_options_list_item answer_149647 tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks no-answer-with-image ">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a data-href="https://uploads-old.ct-assets.com/assets/promo_answer_images/0d779b30097711e7962c15a61e8c5521/:original_metro.jpg" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_image_lightbox">
<img class="m_figure_img active" src="https://uploads-old.ct-assets.com/assets/promo_answer_images/0d779b30097711e7962c15a61e8c5521/big_metro.jpg" width="300" height="200">
<span class="click_to_view"><i class=" fas fa-search-plus " aria-hidden="true"></i>Zoom</span>
</a>
</div>
</figure>
</div>
<div class="m_options_list_input no-answer no-description ">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input name="participation[promo_response_attributes][response_50113][]" type="hidden" value="0" autocomplete="off"><input title="Escoge entre 1 y 4 opciones" data-rule-required="false" minlength="1" maxlength="4" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="metro.jpg" data-question-type="checkbox" data-response-id="50113" data-correct-position="1" class="m_option_input js_quizz_checkbox js_quizz_checkbox" type="checkbox" value="149647" name="participation[promo_response_attributes][response_50113][]" id="participation_promo_response_attributes_response_50113_149647">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_50113_149647">
</label>
</div>
</div>
</li>
.
.
.
</ul>
</div>
</div>
</div>
</section>
The image 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.