1. Introduction.
When you create a campaign in Cool Tabs with custom questions, you can choose from a wide variety of question and answer types: free text, star rating, NPS, single or multiple choice, matrices, file uploads, and more.
Each type generates specific HTML with its own classes. Knowing that structure lets you customize the quiz or survey design with your own CSS, without altering the campaign's functionality.
In this tutorial you will find the reference HTML for each available type.
2. HTML Structure.
To customize your campaign screens with your own HTML and CSS, see the tutorial How to configure your own HTML for the different screens of a campaign.
The HTML of a campaign with a quiz requires, in addition to the 4 mandatory variables, the variable {{{ cool_tabs_form }}}, which is responsible for rendering the questions configured in the campaign:
<!DOCTYPE html>
<html {{{ cool_tabs_html_attributes }}} >
<head>
<!-- {{{ cool_tabs_head }}} -->
</head>
<body {{{ cool_tabs_body_attributes }}} >
{{{ cool_tabs_form }}}
<!-- {{{ cool_tabs_body_end }}} -->
</body>
</html>
The variables {{{ cool_tabs_head }}} and {{{ cool_tabs_body_end }}} load the scripts necessary for the correct functioning of the campaign, data saving and access to statistics.
2.1. Classes by quiz configuration type.
Campaigns can be configured in three ways:
Step-by-step quiz: one question per screen.
2-step quiz: all questions on one page and the personal data form on another.
Quiz questions and personal data on the same page: everything on a single screen.
For the step-by-step quiz and 2-step quiz, each screen includes dynamic classes and IDs that vary according to the question number. The last step (data form) always includes the additional class last_step to identify and customize it uniquely.
Step-by-step quiz:
<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>
2-step 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>
Quiz questions and personal data on the same page:
<body>
<div class="wrapper form_layout js_locator_for_wizard_step_indicators">
.
</div>
</body>
Identifiers and classes are also included in each <section> of the questions (wizard-p-X) and step_X classes per question:
<body>
<form>
<div class="section">
<div id="wizard">
<section id="wizard-p-0" class="body current" role="tabpanel">
<div class="wrapper_row">
<div class="row js_error_placement_parent step_1">....</div>
</div>
</section>
<section id="wizard-p-1" class="body" role="tabpanel">
<div class="wrapper_row">
<div class="row js_error_placement_parent step_2">....</div>
</div>
</section>
<section id="wizard-p-2" class="body" role="tabpanel">
<div class="wrapper_row">
<div class="row js_error_placement_parent step_3">....</div>
</div>
</section>
</div>
</div>
</form>
</body>2.2. General errors.
Each question can display an error message (required field, choose exactly 2 options, etc.) in a <label> with the class step_error, located inside the container js_error_placement. When the error is active, that container receives the classes required_field and error_active:
<div class="js_error_placement required_field error_active"> <label class="step_error" for="participation_promo_response_attributes_response_XXXXX"> Required field </label> </div>
The error color is controlled by the CSS variables --ct-error-text-color (text) and --ct-error-color (background), configurable from the campaign editor under Form > Advanced > Form Styles.
2.3. Question and answer types.
Below is the HTML structure for each available question and answer type. Each type includes its specific classes, which you can use to apply custom CSS styles.
2.3.1. Question with text (and/or image) + text answer.
Answer type: Free text. The participant writes the answer.
The participant answers by writing freely. It is ideal for open opinion or creativity questions. You can optionally accompany the question with an image.
Example of generated HTML for this type of question:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_free_text js_type_free_text js_free_text body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="Where would you like to go on a trip" data-question-type="free_text" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
Where would you like to go on a trip
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<div class="d-flex row justify-content-center align-items-start">
<div class="col-12 col-md-8 mx-auto">
<input data-next="1" data-question-type="free_text" type="text" name="participation[promo_response_attributes][response_XXXXX]">
</div>
</div>
</div>
</div>
</section>
2.3.2. Question with text (and/or image) + star rating answer (1 to N).
Answer type: Star rating. The participant selects a score between 1 and the configured maximum.
Widely used in satisfaction surveys to rate products or services.
Example of generated HTML for this type of question:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_rate js_type_rate js_rate body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="How would you rate the destination you visited?" data-question-type="rate" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
How would you rate the destination you visited?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="mb-4">
<div class="d-flex justify-content-center align-items-center form_fields star_row css_quizz css_quizz_XXXXX" style="cursor: pointer;">
<div class="star_row_content">
<div class="form_stars js_form_stars d-flex flex-wrap py-1 justify-content-center" data-max="10" data-score-name="participation[promo_response_attributes][response_XXXXX]" style="cursor: pointer;">
<i data-alt="1" class="star-on-png" title="1"></i>
<i data-alt="2" class="star-off-png" title="2"></i>
...
<i data-alt="10" class="star-off-png" title="10"></i>
<input name="participation[promo_response_attributes][response_XXXXX]" type="hidden" value="1">
</div>
</div>
</div>
</div>
</div>
</section>
2.3.3. Question with text (and/or image) + numeric rating answer.
Answer type: Custom rating between 0 and N.
Ideal for measuring NPS (Net Promoter Score).
Example of generated HTML for this type of question:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_rate_numbers js_type_rate_numbers js_rate_numbers body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="How would you rate your trip with us?" data-question-type="rate_numbers" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
How would you rate your trip with us?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="star-numbers">
<div class="form_fields star_numbers_row css_quizz css_quizz_XXXXX" data-max="10" data-score-name="participation[promo_response_attributes][response_XXXXX]" style="cursor: pointer;">
<div class="star-number-container">
<ul class="m_options_list js_star_numbers d-flex flex-wrap flex-md-nowrap flex-row justify-content-center mb-0">
<li class="star_number_0 star_number">
<input class="m_option_input js_quizz_radio_button" data-next="1" data-question-type="rate_numbers" type="radio" value="0" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_0">
<label class="m_option_label" for="participation_promo_response_attributes_response_XXXXX_0">0</label>
</li>
...
<li class="star_number_10 star_number">
<input class="m_option_input js_quizz_radio_button" data-next="1" data-question-type="rate_numbers" type="radio" value="10" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_10">
<label class="m_option_label" for="participation_promo_response_attributes_response_XXXXX_10">10</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
2.3.4. Question with text + dropdown answer.
Answer type: Dropdown with individual answers, where only one option can be selected.
Example of generated HTML for this type of question:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_select js_type_select js_select body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="What type of lodging do you usually choose?" data-question-type="select" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
What type of lodging do you usually choose?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div>
<div class="form_select css_quizz css_quizz_XXXXX">
<div class="field_wrap select_field d-flex flex-row row justify-content-center">
<div class="col-12 col-md-6">
<span class="select platform platform60 not_msie responsive_select active_select">
<span class="select_content">
<span class="select_button">
<span class="select_button_icon"></span>
</span>
<span class="select_label"><span></span></span>
</span>
<div>
<select class="custom-select" data-custom="true" data-next="1" data-question-type="select" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX">
<option value=""></option>
<option value="XXXXX">Opción 1</option>
<option value="XXXXX">Opción 2</option>
<option value="XXXXX">Opción 3</option>
</select>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
2.3.5. Question with text (and/or image) + text answer chosen from multiple options.
Answer type: Single option. The participant chooses one answer from several.
Example of generated HTML for this type of question:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button js_radio_button body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="What is your favorite time of the year to travel?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
What is your favorite time of the year to travel?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Option 1" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Opción 1
</label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.6. Question with text + text and image answer chosen from multiple options.
Answer type: Single option with image. The participant chooses one answer from several, each accompanied by an image.
The optimal size for answer images is 300x200 px.
Example of generated HTML for this type of question:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button js_radio_button body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="Which of the following European cities would you like to visit in the near future?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
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 class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_3">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a data-href="IMAGE_URL" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_answer_with_image">
<img width="300" height="200" class="m_figure_img" src="IMAGE_URL">
</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="Option 1" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Opción 1
</label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.7. Question with text + text, image and description answer chosen from multiple options.
Answer type: Single option with image and description. Same as the previous type, but each image includes a descriptive caption.
Example of generated HTML for this type of question:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button js_radio_button body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="What do you find most interesting about a city/country when choosing it as a destination?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
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 class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_3">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a data-href="IMAGE_URL" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_answer_with_image">
<img width="300" height="200" class="m_figure_img" src="IMAGE_URL">
<span class="image_description">Image description</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="Option 1" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Opción 1
</label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.8. Question with text + image-only answer chosen from multiple options.
Answer type: Single option with image only, no text in the answer. The participant chooses guided directly by the image..
Example of generated HTML for this type of question:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button js_radio_button body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="Which of the following countries would you like to visit?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
Which of the following countries would you like to visit?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_3">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks no-answer-with-image">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a data-href="IMAGE_URL" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_answer_with_image">
<img width="300" height="200" class="m_figure_img" src="IMAGE_URL">
</a>
</div>
</figure>
</div>
<div class="m_options_list_input no-answer no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX"></label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.9. Question with text and image + image and description answer chosen from multiple options.
Answer type: Single option with image and description. The question is accompanied by an image and the answers combine image, description and text.
The optimal size for the question image is 628x353 px.
Example of generated HTML for this type of question:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button js_radio_button body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="What items can you not miss in your luggage?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
What items can you not miss in your luggage?
</div>
</div>
<div class="form_fields js_question_image_wrapper">
<figure class="m_figure js_answer_image anim_all">
<a class="m_figure_content m_figure_content_image image_lightbox" data-href="QUESTION_IMAGE_URL" data-after-href="">
<img width="672" height="448" class="m_figure_img js_question_image" src="QUESTION_IMAGE_URL">
</a>
</figure>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_3">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a data-href="ANSWER_IMAGE_URL" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_answer_with_image">
<img width="300" height="200" class="m_figure_img" src="ANSWER_IMAGE_URL">
<span class="image_description">Image description</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="Option 1" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Opción 1
</label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.10. Question with text and video + text answer chosen from multiple options.
Answer type: Single option. The question includes an embedded video and the answers are text.
The optimal video size is 560x315 px (16:9 ratio), so it displays correctly without participants having to scroll too much.
Example of generated HTML for this type of question:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button js_radio_button body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="Which city is featured in the video?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
Which city is featured in the video?
</div>
</div>
<div class="aspect-ratio">
<iframe class="youtube-player embed_video lazy-loaded" width="397" height="360" src="https://www.youtube-nocookie.com/embed/VIDEO_ID?rel=0&" allowfullscreen=""></iframe>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Option 1" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Opción 1
</label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.11. Question with text + video answer chosen from multiple options.
Answer type: Single option. The answers are videos between which the participant chooses.
The size of the videos automatically adjusts to the size of the column that contains them.
Example of generated HTML for this type of question:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button js_radio_button body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="Which of our hotels would you like to stay at?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
Which of our hotels would you like to stay at?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a class="m_figure_content m_figure_content_image m_figure_content_horizontal">
<div class="aspect-ratio">
<video class="video-js vjs-sublime-skin embed_video lazy-hidden" controls="" preload="none" width="480" height="270"
data-poster="POSTER_URL" poster="POSTER_URL">
<source src="VIDEO_URL.mp4" type="video/mp4">
<source src="VIDEO_URL.webm" type="video/webm">
</video>
</div>
</a>
</div>
</figure>
</div>
<div class="m_options_list_input no-description video-answer">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Option 1" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Opción 1
</label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.12. Question with text and image + video answer chosen from multiple options.
Answer type: Single option. The question includes an image and the answers are videos with text.
Example of generated HTML for this type of question:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button js_radio_button body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="What adventure activity is a must in your travels?" data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
What adventure activity is a must in your travels?
</div>
</div>
<div class="form_fields js_question_image_wrapper">
<figure class="m_figure js_answer_image anim_all">
<a class="m_figure_content m_figure_content_image image_lightbox" data-href="ORIGINAL_URL" data-after-href="">
<img class="m_figure_img js_question_image" src="IMAGE_URL" width="672" height="504">
</a>
</figure>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a class="m_figure_content m_figure_content_image m_figure_content_horizontal">
<div class="aspect-ratio">
<iframe class="youtube-player embed_video lazy-loaded" width="397" height="360"
src="https://www.youtube-nocookie.com/embed/VIDEO_ID?rel=0&" allowfullscreen=""></iframe>
</div>
</a>
</div>
</figure>
</div>
<div class="m_options_list_input no-description video-answer">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Option 1" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Opción 1
</label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.13. Question with text and background image + text answer chosen from multiple options.
Answer type: Single option. The image appears as the background of the entire question and the answers are text.
The optimal size for the background image is 660x660 px (square image).
There is no maximum number of answers, but keep in mind that it is optimized for a maximum of eight. If you plan to include more, check that the result suits your needs.
Example of generated HTML for this type of question:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button question_bg js_radio_button body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="You plan your trip..." data-question-type="radio_button" data-full-screen="false" data-full-screen-duration="10" data-last-question="false" style="background-image: url('BACKGROUND_IMAGE_URL'); min-height: 628px;">
<div class="header_step">
<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 class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="A week before" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Una semana antes
</label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.14. Question with text + multiple choice text answer.
Answer type: Multiple options. The participant can select several answers.
A minimum and maximum number of selections can be configured.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_checkbox js_type_checkbox js_checkbox body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="What type of traveler are you?" data-question-type="checkbox" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
What type of traveler are you?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input name="participation[promo_response_attributes][response_XXXXX][]" type="hidden" value="0">
<input title="You should choose between 1 and 7 options" data-rule-required="false" minlength="1" maxlength="7" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Backpacker" data-question-type="checkbox" data-response-id="XXXXX" data-correct-position="1" class="m_option_input js_quizz_checkbox js_has_eurovision_points" type="checkbox" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX][]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Mochilero
</label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
2.3.15. Question with text + multiple choice image answer.
Answer type: Multiple options. The participant chooses from several images.
A minimum and maximum number of selections can be configured.
El tamaño óptimo de las imágenes de respuesta es de 300x200 px.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_checkbox js_type_checkbox js_checkbox body" data-component="quiz-question" data-forkable="false" data-question-id="XXXXX" data-question-text="What means of transportation do you usually use to get around when visiting a city?" data-question-type="checkbox" data-full-screen="false" data-full-screen-duration="10" data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
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 class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks no-answer-with-image">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a data-href="ORIGINAL_URL" href="#" class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_answer_with_image">
<img class="m_figure_img" src="IMAGE_URL" width="300" height="200">
</a>
</div>
</figure>
</div>
<div class="m_options_list_input no-answer no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input name="participation[promo_response_attributes][response_XXXXX][]" type="hidden" value="0">
<input title="You should choose between 1 and 4 options" data-rule-required="false" minlength="1" maxlength="4" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="" data-question-type="checkbox" data-response-id="XXXXX" data-correct-position="1" class="m_option_input js_quizz_checkbox js_has_eurovision_points" type="checkbox" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX][]" id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX"></label>
</div>
</div>
</li>
...
</ul>
</div>
</div>
</section>
When an image is selected, the <img> element receives the active class.
2.3.16. Question with text and image + text answer chosen from multiple options + 'correct answer' feedback.
Answer type: Single option. The participant chooses one answer from several.
This type is one of the most used in knowledge quizzes. The question can include a supporting image. Upon selection, it immediately shows whether they got it right or not, along with feedback text that usually explains the correct answer.
The optimal size for the question image is 628x353 px.
<section class="... type_radio_button js_type_radio_button js_radio_button body" data-component="quiz-question" data-question-type="radio_button" ...>
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
What was the most visited city in the world in 2022?
</div>
</div>
<div class="form_fields js_question_image_wrapper">
<figure class="m_figure js_answer_image anim_all">
<a class="m_figure_content m_figure_content_image image_lightbox" data-href="ORIGINAL_URL" data-after-href="">
<img width="628" height="353" class="m_figure_img js_question_image" src="IMAGE_URL">
</a>
</figure>
</div>
<!-- Correct answer message -->
<div style="display: none;" class="js_answer_ok">
<p>Correct! Bangkok leads the ranking.</p>
</div>
<!-- Incorrect answer message -->
<div style="display: none;" class="js_answer_ko">
Wrong... Bangkok leads the ranking.
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<!-- Respuesta correcta: data-ok="1" -->
<li class="li_wrapper m_options_list_item answer_XXXXX js_quizz_answer js_checkbox_container js_ok_ko_class_placement ... only-text-answer">
<div class="m_options_list_input no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-ok="1" data-next="1" data-adds-extra-text="0" autocomplete="off" data-textual-answer="Bangkok" data-question-type="radio_button" class="m_option_input js_quizz_radio_button" type="radio" value="XXXXX" name="participation[promo_response_attributes][response_XXXXX]" id="...">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="...">Bangkok</label>
</div>
</div>
</li>
<!-- Respuestas incorrectas: data-ok="-1" -->
<li class="li_wrapper m_options_list_item answer_XXXXX js_quizz_answer js_checkbox_container js_ok_ko_class_placement ... only-text-answer">
<div class="m_options_list_input no-description">
<div class="m_option">
<input data-ok="-1" data-next="1" ... type="radio" ...>
<div class="control-point"></div>
<label ...>Londres</label>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
Post-response state, after selecting:
If correct:
js_answer_okis shown; the<li>with the correct answer receivesjs_quizz_question_okandno_click.If wrong:
js_answer_kois shown; the selected (incorrect)<li>receivesjs_quizz_question_koandno_click. Unselected options remain withreadonlyanddisabled.
<!-- Post-response example: user has selected the incorrect option -->
<li class="... only-text-answer js_quizz_question_ok no_click">
<!-- Correct answer (not selected) -->
<input data-ok="1" ... type="radio" value="XXXXX">
</li>
<li class="... only-text-answer js_quizz_question_ko no_click">
<!-- Incorrect answer (selected by the user) -->
<input data-ok="-1" ... type="radio" value="XXXXX" readonly="readonly" disabled="">
</li>
2.3.17. Question with text (and/or image) + text answer chosen from multiple options + text answer field.
Question type: Single option. The participant chooses one answer from several + answer field.
In addition to offering closed answers, it is possible to enable a free text field so the participant can write their own answer when none of the options apply. The placeholder text is customizable.
For example: we ask users what they value most when booking accommodation and offer them the options Location, Price, Services and Others. For the last one, we enable the text field so those who need it can write their answer.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button js_radio_button body"
data-component="quiz-question"
data-forkable="false"
data-question-id="XXXXX"
data-question-text="What do you value most when booking accommodation?"
data-question-type="radio_button"
data-full-screen="false"
data-full-screen-duration="10"
data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
What do you value most when booking accommodation?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<!-- Opciones normales (data-adds-extra-text="0") -->
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input
data-ok="-1"
data-next="1"
data-adds-extra-text="0"
autocomplete="off"
data-textual-answer="Location"
data-question-type="radio_button"
class="m_option_input js_quizz_radio_button"
type="radio"
value="XXXXX"
name="participation[promo_response_attributes][response_XXXXX]"
id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Ubicación
</label>
</div>
</div>
</li>
...
<!-- Opción "Otros" (data-adds-extra-text="1") -->
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_3 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input
data-ok="-1"
data-next="1"
data-adds-extra-text="1"
autocomplete="off"
data-textual-answer="Others"
data-question-type="radio_button"
class="m_option_input js_quizz_radio_button"
type="radio"
value="XXXXX"
name="participation[promo_response_attributes][response_XXXXX]"
id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Otros
</label>
</div>
</div>
<div class="form_input extra-text-response-option">
<div class="d-flex flex-row row justify-content-center align-items-start">
<div class="col-12 col-md-6 col-md-offset-3">
<input
placeholder="Write your answer"
class="js_quizz_extra_text"
style="display: none;"
data-rule-required="true"
type="text"
name="participation[promo_response_attributes][response_XXXXX_extra_text_XXXXX]"
id="participation_promo_response_attributes_response_XXXXX_extra_text_XXXXX">
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
2.3.18. Question without answer.
Question type: Informational content, question without answer — only content is displayed.
In addition to questions with answers, it is possible to include content-only steps that the participant will view without the option to respond. That content can be HTML, a banner, an image, a video, etc.
One of the main uses is to display advertising between questions: a promotional video or a banner that appears while the participant completes the quiz. It is also very useful for displaying an image or video about which you will ask one or more questions in the next step. Let's see it with an example:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_inline_advertisement js_type_inline_advertisement js_inline_advertisement body"
data-component="quiz-question"
data-forkable="false"
data-question-id="XXXXX"
data-question-text=""
data-question-type="inline_advertisement"
data-full-screen="false"
data-full-screen-duration="10"
data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="advertisement-question">
<div style="position: relative; height: 0px; padding-bottom: 56.25%; text-align: center;">
<div class="advertisement_body_with_video">
<iframe allowfullscreen="" frameborder="0" height="360"
src="https://www.youtube.com/embed/VIDEO_ID?ecver=2"
style="position:absolute;width:100%;height:100%;left:0"
width="640">
</iframe>
</div>
</div>
</div>
</div>
</section>
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_radio_button js_type_radio_button js_radio_button body"
data-component="quiz-question"
data-forkable="false"
data-question-id="XXXXX"
data-question-text="Which famous museum is featured in the above video?"
data-question-type="radio_button"
data-full-screen="false"
data-full-screen-duration="10"
data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
Which famous museum is featured in the above video?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<!-- Respuestas incorrectas: data-ok="-1" -->
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-ok="-1" data-next="1" data-adds-extra-text="0" autocomplete="off"
data-textual-answer="Museo Thyssen – Bornemisza, Madrid"
data-question-type="radio_button"
class="m_option_input js_quizz_radio_button"
type="radio" value="XXXXX"
name="participation[promo_response_attributes][response_XXXXX]"
id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Museo Thyssen – Bornemisza, Madrid
</label>
</div>
</div>
</li>
...
<!-- Respuesta correcta: data-ok="1" -->
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_3 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input data-ok="1" data-next="1" data-adds-extra-text="0" autocomplete="off"
data-textual-answer="Museo Nacional del Prado, Madrid"
data-question-type="radio_button"
class="m_option_input js_quizz_radio_button"
type="radio" value="XXXXX"
name="participation[promo_response_attributes][response_XXXXX]"
id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Museo Nacional del Prado, Madrid
</label>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
2.3.19. Text question + answer with image or video uploaded by the participant.
With this type, we ask the user a question and give them the option to respond by uploading content in the form of an image or video. It can be used as another question within the quiz or to create a photo or video contest.
Question type (image): Upload image. The participant uploads an image.
Keep in mind that the ability for users to upload more than one photo is only available for Gold and Diamond plans.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_ask_image js_type_ask_image js_ask_image body"
data-component="quiz-question"
data-forkable="false"
data-question-id="XXXXX"
data-question-text="Tell us, through a photo, what travel means to you"
data-question-type="ask_image"
data-full-screen="false"
data-full-screen-duration="10"
data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
Tell us, through a photo, what travel means to you
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="d-flex justify-content-center h-100 upload-contender">
<div class="d-flex justify-content-center flex-column js_ask_picture_form_field js_quiz_ask_picture_form_field css_quizz css_quizz_XXXXX">
<div class="field_wrap js_top_enclosing">
<div class="upload-contender js_enclosing js_data_promo_responses_transloadit_response_XXXXX js_data_promo_responses_transloadit_response js_error_placement_parent">
<textarea style="display:none" class="js_transloadit_data"
name="participation[promo_response_attributes][transloadit_response_XXXXX]"
id="participation_promo_response_attributes_transloadit_response_XXXXX"></textarea>
<div class="js_error_placement"></div>
<div class="js_transloadit_error error" style="display: none;"></div>
<div class="upload_image_btn js_upload_image_btn">
<div class="m_btn m_btn_standard button btn-stock">
<span class="js_upload_btn_text upload-btn-text">Choose image
<!-- SVG image icon -->
</span>
<input type="file"
name="js_form_for_promo_responses_transloadit_response_XXXXX"
id="js_form_for_promo_responses_transloadit_response_XXXXX_fake_id_XXXXX"
data-storage-type=""
data-params="{...}"
data-signature="..."
data-behavior="transloadit_file"
data-service="https://api2-us-east-1.transloadit.com/"
data-original-image-txt="Choose image"
data-related-form="form_for_promo_responses_transloadit_response_XXXXX"
data-thumb-name=":original"
data-error-filter-failed="This file is not an image. Please, upload one image"
accept="image/*"
data-max-size="10485760"
data-display-image-cropper="0"
data-display-image-cropper-if-image-too-big="0"
data-error-max-size="We are sorry, but the image you've tried to upload is too big. The maximum size allowed in this promotion is 10 megabytes."
size="50">
</div>
</div>
<div class="delete_img_btn js_delete_img_btn tt_not_present" style="display: none;">
<div class="btn btn-danger m_btn m_btn_small">
<span><i class="fas fa-trash-alt" style="margin-right: 0px;"></i></span>
</div>
</div>
<div class="js_transloadit_progress css_transloadit_progress"><div></div></div>
<div class="js_result_thumb"></div>
</div>
<input class="jj_transloadit_destroy" type="hidden"
name="participation[promo_response_attributes][destroy_response_XXXXX]"
id="participation_promo_response_attributes_destroy_response_XXXXX">
</div>
</div>
</div>
</div>
</section>
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_ask_video js_type_ask_video js_ask_video body"
data-component="quiz-question"
data-forkable="false"
data-question-id="XXXXX"
data-question-text="Upload your video telling us, in less than 30 seconds, what you like most about traveling"
data-question-type="ask_video"
data-full-screen="false"
data-full-screen-duration="10"
data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
Upload your video telling us, in less than 30 seconds, what you like most about traveling
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div>
<div class="video_wrapper js_ask_video_form_field js_quiz_ask_video_form_field css_quizz css_quizz_XXXXX">
<!-- Source options: direct upload (active by default), YouTube, Vimeo, Vine -->
<div class="video_options js_video_options justify-content-center row">
<a class="video active" href="#"><i class="fas fa-video" aria-hidden="true"></i></a>
<a class="youtube" href="#"><i class="fab fa-youtube" aria-hidden="true"></i></a>
<a class="vimeo" href="#"><i class="fab fa-vimeo" aria-hidden="true"></i></a>
<a class="vine" href="#"><i class="fab fa-vine" aria-hidden="true"></i></a>
</div>
<!-- URL field (hidden by default; visible when selecting YouTube/Vimeo/Vine) -->
<div class="form_input">
<div class="js_video_url flex-row row justify-content-center align-items-start" style="display: none;">
<div class="col-12">
<input placeholder="Write a valid Youtube, Vine or Vimeo url"
class="" type="text"
name="participation[promo_response_attributes][video_url_XXXXX]"
id="participation_promo_response_attributes_video_url_XXXXX">
</div>
</div>
</div>
<!-- Direct file upload -->
<div class="field_wrap js_top_enclosing">
<div class="upload-contender js_enclosing js_data_promo_responses_transloadit_video_response_XXXXX js_data_promo_responses_transloadit_video_response js_error_placement_parent d-flex justify-content-center">
<textarea style="display:none" class="js_transloadit_data"
name="participation[promo_response_attributes][transloadit_video_response_XXXXX]"
id="participation_promo_response_attributes_transloadit_video_response_XXXXX"></textarea>
<div class="js_error_placement"></div>
<div class="js_transloadit_error error" style="display: none;"></div>
<div class="upload_image_btn js_upload_image_btn">
<div class="m_btn m_btn_standard button btn-stock">
<span class="js_upload_btn_text upload-btn-text">Choose video
<!-- SVG video icon -->
</span>
<input type="file"
name="js_form_for_promo_responses_transloadit_video_response_XXXXX"
id="js_form_for_promo_responses_transloadit_video_response_XXXXX_fake_id_XXXXX"
data-storage-type=""
data-params="{...}"
data-signature="..."
data-behavior="transloadit_file"
data-service="https://api2-us-east-1.transloadit.com/"
data-original-image-txt="Choose video"
data-related-form="form_for_promo_responses_transloadit_video_response_XXXXX"
data-thumb-name="screenshot"
data-error-filter-failed="This file is not a video. Please, upload one video"
accept="video/*"
data-max-size="104857600"
data-display-image-cropper="0"
data-display-image-cropper-if-image-too-big="0"
data-error-max-size="We are sorry, but the image you've tried to upload is too big. The maximum size allowed in this promotion is 100 megabytes."
size="50">
</div>
</div>
<div class="delete_img_btn js_delete_img_btn tt_not_present" style="display: none;">
<div class="btn btn-danger m_btn m_btn_small">
<span><i class="fas fa-trash-alt" style="margin-right: 0px;"></i></span>
</div>
</div>
<div class="js_transloadit_progress css_transloadit_progress"><div></div></div>
<div class="js_result_thumb"></div>
</div>
<input class="jj_transloadit_destroy" type="hidden"
name="participation[promo_response_attributes][destroy_video_response_XXXXX]"
id="participation_promo_response_attributes_destroy_video_response_XXXXX">
</div>
</div>
</div>
</div>
</section>
2.3.20. Text question + date answer.
Question type: Date. The participant selects a date.
With this type, we ask the user a question and give them the option to choose a date when answering.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_datepicker js_type_datepicker js_datepicker body"
data-component="quiz-question"
data-forkable="false"
data-question-id="XXXXX"
data-question-text="When was your last trip?"
data-question-type="datepicker"
data-full-screen="false"
data-full-screen-duration="10"
data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
When was your last trip?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="form_input js_error_placement_parent text-center">
<div class="row js_error_placement"></div>
<div class="col-12 col-md-6 mx-auto">
<input
data-next="1"
data-adds-extra-text="0"
autocomplete="off"
data-question-type="datepicker"
readonly="readonly"
class="js_datepicker flatpickr-input"
type="text"
name="participation[promo_response_attributes][response_XXXXX]"
id="participation_promo_response_attributes_response_XXXXX">
</div>
</div>
</div>
</section>
2.3.21. Validates a code or coupon according to the options you configure in the "Code Validation" section.
Question type: Validate code. The participant enters a code or coupon to participate.
To use this answer type, you must enable the option "Enable coupon or code validation" in the "Coupons" section. This way, the participant will have to enter a previously provided code to continue.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_validate_coupon js_type_validate_coupon js_validate_coupon body"
data-component="quiz-question"
data-forkable="false"
data-question-id="XXXXX"
data-question-text="Enter your code to participate"
data-question-type="validate_coupon"
data-full-screen="false"
data-full-screen-duration="10"
data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
Enter your code to participate
</div>
</div>
<div class="form_fields">
<div class="js_error_placement required_field"></div>
<!-- Ponyfill for reading barcodes/QR codes -->
<script type="module" nonce="...">
import { BarcodeDetector as BarcodeDetectorPonyfill } from "https://fastly.jsdelivr.net/npm/barcode-detector@3/dist/es/ponyfill.min.js";
window.BarcodeDetectorPonyfill = BarcodeDetectorPonyfill;
</script>
<div>
<div class="form_input css_quizz css_quizz_XXXXX">
<div class="d-flex row justify-content-center align-items-start">
<div class="col-12 col-md-8 mx-auto">
<span>
<input
data-msg-required="Required field"
required="required"
data-next="1"
data-adds-extra-text="0"
autocomplete="off"
data-question-type="validate_coupon"
type="text"
name="participation[validated_coupon_code]"
id="participation_validated_coupon_code">
</span>
</div>
</div>
</div>
</div>
</div>
</section>
2.3.22. Question matrix with multiple options and single choice.
Question type: Matrix. The participant selects a single option per row.
With this type we ask the user a general question and set up as many matrix questions as we want, combining answers for the user to select one option. For example: in a satisfaction survey, we ask them to rate different service attributes on a scale of options.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_matrix_single js_type_matrix_single js_matrix_single body"
data-component="quiz-question"
data-forkable="false"
data-question-id="XXXXX"
data-question-text="Based on your last purchase, how would you rate the following attributes?"
data-question-type="matrix_single"
data-full-screen="false"
data-full-screen-duration="10"
data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
Based on your last purchase, how would you rate the following attributes?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div>
<div class="matrix_content matrix_single css_quizz css_quizz_XXXXX">
<ul class="cols-5">
<!-- Header row -->
<li class="question_row header">
<span class="question" style="max-width: calc( (100% / (5 + 1) ) );"></span>
<span class="answer" style="max-width: calc( (100% / (5 + 1) ) );">Muy por debajo del promedio</span>
<span class="answer" style="max-width: calc( (100% / (5 + 1) ) );">Por debajo del promedio</span>
<span class="answer" style="max-width: calc( (100% / (5 + 1) ) );">Promedio</span>
<span class="answer" style="max-width: calc( (100% / (5 + 1) ) );">Por encima del promedio</span>
<span class="answer" style="max-width: calc( (100% / (5 + 1) ) );">Muy por encima del promedio</span>
</li>
<!-- Question row (repeat for each matrix row) -->
<li class="question_row">
<span class="question" style="max-width: calc( (100% / (5 + 1) ) );">Experiencia de compra</span>
<span class="answer" style="max-width: calc( (100% / (5 + 1) ) );">
<input class="js_quizz_radio_button js_quizz_matrix_single_radio_button"
data-ok="-1" data-next="1" data-adds-extra-text="0" autocomplete="off"
data-textual-answer="Well below average"
data-question-type="matrix_single"
type="radio" value="XXXXX"
name="participation[promo_response_attributes][response_XXXXX_matrix_question_XXXXX]"
id="participation_promo_response_attributes_response_XXXXX_matrix_question_XXXXX_XXXXX">
</span>
...
</li>
...
</ul>
</div>
</div>
</div>
</section>
2.3.23. Question matrix with multiple options and multiple choice.
In this case, the user can select more than one option for their answers.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_matrix_multiple js_type_matrix_multiple js_matrix_multiple body"
data-component="quiz-question"
data-forkable="false"
data-question-id="XXXXX"
data-question-text="At what time of the day do you use the following social networks?"
data-question-type="matrix_multiple"
data-full-screen="false"
data-full-screen-duration="10"
data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
At what time of the day do you use the following social networks?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div>
<div class="matrix_content matrix_multiple css_quizz css_quizz_XXXXX">
<ul class="cols-3">
<!-- Header row -->
<li class="question_row header">
<span class="question" style="max-width: calc( (100% / (3 + 1) ) );"></span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">In the morning</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">In the afternoon</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">At night</span>
</li>
<!-- Question row (repeat for each matrix row) -->
<li class="question_row">
<span class="question" style="max-width: calc( (100% / (3 + 1) ) );">Facebook</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input name="participation[promo_response_attributes][response_XXXXX_matrix_question_XXXXX][]" type="hidden" value="0">
<input class="js_quizz_checkbox"
data-rule-required="false"
data-ok="-1"
data-next="1"
data-adds-extra-text="0"
autocomplete="off"
data-textual-answer="In the morning"
data-question-type="matrix_multiple"
type="checkbox"
value="XXXXX"
name="participation[promo_response_attributes][response_XXXXX_matrix_question_XXXXX][]"
id="participation_promo_response_attributes_response_XXXXX_matrix_question_XXXXX_XXXXX">
</span>
...
</li>
...
</ul>
</div>
</div>
</div>
</section>
2.3.24. Matrix with text answers. The participant writes the answer.
Question type: Matrix with text answer. The participant writes their answer in each cell.
This option allows users to write their opinion on each topic.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_matrix_free_text js_type_matrix_free_text js_matrix_free_text body"
data-component="quiz-question"
data-forkable="false"
data-question-id="XXXXX"
data-question-text="Which destinations would you visit"
data-question-type="matrix_free_text"
data-full-screen="false"
data-full-screen-duration="10"
data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
Which destinations would you visit
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div>
<div class="matrix_content matrix_free_text css_quizz css_quizz_XXXXX">
<ul class="cols-3">
<!-- Header row -->
<li class="question_row header">
<span class="question" style="max-width: calc( (100% / (3 + 1) ) );"></span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">Semana Santa</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">Verano</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">Navidad</span>
</li>
<!-- Question row (repeat for each matrix row) -->
<li class="question_row">
<span class="question" style="max-width: calc( (100% / (3 + 1) ) );">España</span>
<span class="answer" style="max-width: calc( (100% / (3 + 1) ) );">
<input class="" data-ok="-1" data-next="1" data-adds-extra-text="0" autocomplete="off"
data-textual-answer="Holy Week" data-question-type="matrix_free_text" type="text"
name="participation[promo_response_attributes][response_XXXXX_matrix_question_XXXXX_answer_XXXXX]"
id="participation_promo_response_attributes_response_XXXXX_matrix_question_XXXXX_answer_XXXXX">
</span>
...
</li>
...
</ul>
</div>
</div>
</div>
</section>
2.3.25. Question with text + answer via slider.
Question type: Rating slider. The participant drags a slider control to select a value within a range.
With this type, we ask the user a question and show them a slider to choose a value between a minimum and maximum. You can customize the labels at the ends of the slider.
Example of generated HTML for this type of question:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_range js_type_range js_range body"
data-component="quiz-question"
data-forkable="false"
data-question-id="XXXXX"
data-question-text="How interested are you in visiting a cultural destination on your next trip?"
data-question-type="range"
data-full-screen="false"
data-full-screen-duration="10"
data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
How interested are you in visiting a cultural destination on your next trip?
</div>
</div>
<div class="form_fields">
<div class="js_error_placement required_field"></div>
<div>
<div class="form_input css_quizz css_quizz_XXXXX">
<div class="d-flex row justify-content-center align-items-start">
<div class="col-12 col-md-8 mx-auto">
<div class="legend-container slider_legend">
<span class="b_legend">Not interested at all</span>
<span class="l_legend">Extremely interested</span>
</div>
<input
data-msg-required="Required field"
required="required"
data-next="1"
data-adds-extra-text="0"
autocomplete="off"
data-question-type="range"
min="0"
max="10"
type="range"
name="participation[promo_response_attributes][response_XXXXX]"
id="participation_promo_response_attributes_response_XXXXX">
</div>
</div>
</div>
</div>
</div>
</section>
2.3.26. Question with text + answer via card swiping (swipe).
Question type: Card swipe. The participant swipes each card left (no) or right (yes).
With this type, we show the user several cards (with image and/or text) and ask them to swipe them to express their preference. You can configure the colors and feedback icons for each direction.
Example of generated HTML for this type of question:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_swipe js_type_swipe js_swipe body"
data-component="quiz-question"
data-forkable="false"
data-question-id="XXXXX"
data-question-text="Which European city would you visit? Swipe and answer"
data-question-type="swipe"
data-full-screen="false"
data-full-screen-duration="10"
data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
Which European city would you visit? Swipe and answer
</div>
</div>
<div class="form_fields">
<div class="js_error_placement required_field"></div>
<div class="swiper-question-contender js_quizz_question_swipe">
<div class="swipe_question_content swiper css_quizz css_quizz_XXXXX loaded">
<!-- Feedback icons (left = no, right = yes) -->
<div class="swiper-feedback">
<span class="icon left" style="background-color: #E91E63">
<i class="fas fa-times" aria-hidden="true"></i>
</span>
<span class="icon right" style="background-color: #2EC4B6">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
<span class="fa-stack fa-2x icon thumbs" style="color: #2EC4B6">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-thumbs-up fa-stack-1x fa-inverse"></i>
</span>
</div>
<!-- Cards (one <li> per card; decreasing z-index and transform) -->
<ul class="swipe_cols-N swiper-cards">
<li class="question_row swiper-card tt_swipe_question_XXXXX"
style="z-index: N; transform: scale(1) translateY(0px); opacity: 1;">
<div class="spinner_page_upload spinner_swipe"><!-- SVG spinner --></div>
<div class="question">CARD TITLE</div>
<figure class="m_figure">
<img class="js_swipe_image" height="720" width="1080" src="IMAGE_URL">
</figure>
<ul class="swiper_m_options_list_content">
<!-- Left option (no) -->
<li class="col-12 col-md-6 li_wrapper m_options_list_item answer_left tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-check">
<div class="m_options_list_input">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input class="js_quizz_swipe_question_button tt_left"
data-msg-required="Required field"
required="required"
data-next="1"
data-adds-extra-text="0"
autocomplete="off"
data-textual-answer="left"
data-question-type="swipe"
type="radio"
value="left"
name="participation[promo_response_attributes][response_XXXXX_swipe_question_XXXXX]"
id="participation_promo_response_attributes_response_XXXXX_swipe_question_XXXXX_left">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label"
for="participation_promo_response_attributes_response_XXXXX_swipe_question_XXXXX_left">
left
</label>
</div>
</div>
</li>
<!-- Right option (yes) -->
<li class="col-12 col-md-6 li_wrapper m_options_list_item answer_right tt_answer_1 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-check">
<div class="m_options_list_input">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input class="js_quizz_swipe_question_button tt_right"
data-msg-required="Required field"
required="required"
data-next="1"
data-adds-extra-text="0"
autocomplete="off"
data-textual-answer="right"
data-question-type="swipe"
type="radio"
value="right"
name="participation[promo_response_attributes][response_XXXXX_swipe_question_XXXXX]"
id="participation_promo_response_attributes_response_XXXXX_swipe_question_XXXXX_right">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label"
for="participation_promo_response_attributes_response_XXXXX_swipe_question_XXXXX_right">
right
</label>
</div>
</div>
</li>
</ul>
<span class="answer"></span>
</li>
...
</ul>
<!-- Action buttons -->
<div class="swiper-buttons">
<button id="btnKo" class="btnLeft" style="background-color: #E91E63">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
<button id="btnOk" class="btnRight" style="background-color: #2EC4B6">
<i class="fas fa-check" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</section>
2.3.27. Question with text + answers to sort.
Question type: Sort options. The participant drags the options to establish an order according to their preference.
With this type, the user sorts a set of options from highest to lowest (or in the order you indicate). Each option has an assigned correct position that can be used to score the answer.
Example of generated HTML for this type of question:
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_sorted_answers js_type_sorted_answers js_sorted_answers body"
data-component="quiz-question"
data-forkable="false"
data-question-id="XXXXX"
data-question-text="Order from highest to lowest, your preference when choosing accommodation"
data-question-type="sorted_answers"
data-full-screen="false"
data-full-screen-duration="10"
data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
Order from highest to lowest, your preference when choosing accommodation
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div>
<div class="form_input css_quizz css_quizz_XXXXX">
<ul class="swiper_m_options_list_content d-flex flex-row row align-content-start align-items-end mb-0 answer_columns_2">
<li class="li_wrapper m_options_list_item answer_XXXXX tt_answer_0 js_quizz_answer js_checkbox_container js_ok_ko_class_placement swiper-no-swiping swiper-slide-active control-checks only-text-answer">
<div class="m_options_list_input no-description">
<span class="m_options_list_separator"></span>
<div class="m_option">
<input name="participation[promo_response_attributes][response_XXXXX][]" type="hidden" value="0">
<input
title="You should choose exactly N options"
data-rule-required="false"
minlength="N"
maxlength="N"
data-next="1"
data-adds-extra-text="0"
autocomplete="off"
data-textual-answer="Price"
data-question-type="sorted_answers"
data-response-id="XXXXX"
data-correct-position="1"
class="m_option_input js_quizz_sorted_answers js_quizz_checkbox js_quizz_sorted_inputs js_has_eurovision_points"
type="checkbox"
value="XXXXX"
name="participation[promo_response_attributes][response_XXXXX][]"
id="participation_promo_response_attributes_response_XXXXX_XXXXX">
<div class="control-point"></div>
<label class="m_option_label js_quizz_label" for="participation_promo_response_attributes_response_XXXXX_XXXXX">
Precio
</label>
</div>
</div>
</li>
...
</ul>
</div>
<input
data-sorted="XXXXX"
title="You should choose exactly N options"
data-rule-required="false"
minlength="N"
maxlength="N"
data-next="1"
data-adds-extra-text="0"
autocomplete="off"
data-question-type="sorted_answers"
size="N"
type="hidden"
value=""
name="participation[promo_response_attributes][sorted_response_XXXXX]"
id="participation_promo_response_attributes_sorted_response_XXXXX">
</div>
</div>
</section>
2.3.28. Text question + answer by uploading a file.
Question type: Upload file. The participant attaches a file from their device.
Unlike image or video uploads, this type accepts any type of file. It is useful for collecting documents, PDFs, or other formats.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_ask_file js_type_ask_file js_ask_file body"
data-component="quiz-question"
data-forkable="false"
data-question-id="XXXXX"
data-question-text="Upload your file"
data-question-type="ask_file"
data-full-screen="false"
data-full-screen-duration="10"
data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
Upload your file
</div>
</div>
<div class="form_fields">
<div class="js_error_placement"></div>
<div class="d-flex justify-content-center flex-column">
<div class="js_ask_file_form_field js_quiz_ask_file_form_field css_quizz css_quizz_XXXXX">
<div class="form_input">
<div class="field_wrap js_top_enclosing">
<div class="upload-contender js_enclosing js_data_promo_responses_transloadit_file_response_XXXXX js_data_promo_responses_transloadit_file_response js_error_placement_parent">
<textarea style="display:none" class="js_transloadit_data"
name="participation[promo_response_attributes][transloadit_file_response_XXXXX]"
id="participation_promo_response_attributes_transloadit_file_response_XXXXX"></textarea>
<div class="js_error_placement"></div>
<div class="js_transloadit_error error" style="display: none;"></div>
<div class="upload_image_btn js_upload_image_btn">
<div class="m_btn m_btn_standard button btn-stock">
<span class="js_upload_btn_text upload-btn-text">Choose file
<!-- SVG file icon -->
</span>
<input type="file"
name="js_form_for_promo_responses_transloadit_file_response_XXXXX"
id="js_form_for_promo_responses_transloadit_file_response_XXXXX_fake_id_XXXXX"
data-storage-type=""
data-params="{...}"
data-signature="..."
data-behavior="transloadit_file"
data-service="https://api2-us-east-1.transloadit.com/"
data-original-image-txt="Choose file"
data-related-form="form_for_promo_responses_transloadit_file_response_XXXXX"
data-thumb-name="only_name"
data-error-filter-failed="This file does not have a valid format. Please, choose another"
accept="*/*"
data-max-size="10485760"
data-display-image-cropper="0"
data-display-image-cropper-if-image-too-big="0"
data-error-max-size="We are sorry, but the file you've tried to upload is too big. The maximum size allowed is 10 megabytes."
size="50">
</div>
</div>
<div class="delete_img_btn js_delete_img_btn tt_not_present" style="display: none;">
<div class="btn btn-danger m_btn m_btn_small">
<span><i class="fas fa-trash-alt" style="margin-right: 0px;"></i></span>
</div>
</div>
<div class="js_transloadit_progress css_transloadit_progress"><div></div></div>
<!-- Uploaded file name (visible after upload) -->
<div class="js_img_file_name no_visible"></div>
</div>
<input class="jj_transloadit_destroy" type="hidden"
name="participation[promo_response_attributes][destroy_file_response_XXXXX]"
id="participation_promo_response_attributes_destroy_file_response_XXXXX">
</div>
</div>
</div>
</div>
</div>
</section>
2.3.29. Sports forecast. Match result.
Question type: Sports forecast. The participant predicts the result of a match by entering the number of goals or points for each team.
This type is ideal for sports prediction campaigns. You can configure the image and name of each team, and the participant enters a numeric value (between 0 and 9) for each one.
<section class="js_section js_error_placement_parent js_complete_quizz_question_wrapper js_quizz_question bg_center form-contender clearfix background_image steps-contender type_sport_game_forecast js_type_sport_game_forecast js_sport_game_forecast body"
data-component="quiz-question"
data-forkable="false"
data-question-id="XXXXX"
data-question-text="Make your prediction for the match."
data-question-type="sport_game_forecast"
data-full-screen="false"
data-full-screen-duration="10"
data-last-question="false">
<div class="header_step">
<div class="quizz_question js_error_shake_and_mark_step_error">
Make your prediction for the match.
</div>
</div>
<div class="form_fields">
<div class="js_error_placement required_field"></div>
<div>
<div class="form_input css_quizz css_quizz_XXXXX css_sport_game_forecast_type_numeric">
<div id="forecast-pair-contender-XXXXX-0" class="forecast-pair-contender-XXXXX-0">
<div class="btn-erase-contender" data-target="forecast-pair-contender-XXXXX-0">
<a href="#" class="btn btn-default btn-erase-all mb-3">
<i class="fas fa-trash-alt" aria-hidden="true"></i>
</a>
</div>
<!-- Team 1 (odd): label → image → input -->
<div class="forecast odd">
<div class="m_options_list_input no-description">
<div class="m_option">
<label class="m_option_label js_quizz_label"
for="participation_promo_response_attributes_response_XXXXX_extra_text_XXXXX">
Equipo 1
</label>
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a data-href="IMAGE_URL" href="#"
class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_answer_with_image">
<img width="200" height="150" class="m_figure_img" src="IMAGE_URL">
</a>
</div>
</figure>
</div>
<input
data-msg-required="Required field"
required="required"
data-next="1"
data-adds-extra-text="0"
autocomplete="off"
type="number"
min="0"
max="9"
maxlength="1"
data-question-type="sport_game_forecast"
class="js_type_sport_game_forecast_input"
size="1"
name="participation[promo_response_attributes][response_XXXXX_extra_text_XXXXX]"
id="participation_promo_response_attributes_response_XXXXX_extra_text_XXXXX">
</div>
</div>
</div>
<!-- Team 2 (even): label → input → image -->
<div class="forecast even">
<div class="m_options_list_input no-description">
<div class="m_option">
<label class="m_option_label js_quizz_label"
for="participation_promo_response_attributes_response_XXXXX_extra_text_XXXXX">
Equipo 2
</label>
<input
data-msg-required="Required field"
required="required"
data-next="1"
data-adds-extra-text="0"
autocomplete="off"
type="number"
min="0"
max="9"
maxlength="1"
data-question-type="sport_game_forecast"
class="js_type_sport_game_forecast_input"
size="1"
name="participation[promo_response_attributes][response_XXXXX_extra_text_XXXXX]"
id="participation_promo_response_attributes_response_XXXXX_extra_text_XXXXX">
<div class="m_options_list_figure">
<figure class="m_figure">
<div class="m_figure_viewport">
<a data-href="IMAGE_URL" href="#"
class="js_quizz_answer_image m_figure_content m_figure_content_image m_figure_content_horizontal image_lightbox js_answer_with_image">
<img width="200" height="150" class="m_figure_img" src="IMAGE_URL">
</a>
</div>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
3. Other specifications.
If you have any questions, contact us at help@cool-tabs.com.
4. Related content.
Check out our quiz question and answer types demo to see how they would look in your quiz or survey.
What question and answer types you can include in a quiz or survey.
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.