Fouita Widgets

Promotional

Form Builder

Reviews

Social

Content

Video

Audio

Blog Page

Image

Events

Info

Gaming

Wheel Of Fortune

Quizzes

Notification

Buttons

Pricing

Quizzes

Welcome to the “Quizzes” documentation. Looking to integrate a quizze into your website? Our widget allow you to create a fun and engaging experience for your visitors. In this guide, we'll show you how to use the editor to customize your quizze widget.

Step 1 : Open The Editor

Step2 : Add And Customize Questions

Step 3 : Edit Pages

Step 4 : Configure Settings

Step 5 : Adjust The Layout

Step 6 : Personalize The Button

Step 7 : Preview

Step 1: Open the Editor

1. Go to Quizzes template.

2. Click on "Edit" after choosing your template.

Step 2: add and customize questions

In this panel, you can easily add, remove, clone ,or edit questions as needed.

1. Customize each question by adding its name.

2. To add conditions, provide a name and choose its activation status. Then, determine when it should be hidden and specify its state.

The conditions are not included in the first question.

3. Proceed to add your options by providing a label and uploading an image for each.

4. In settings, select the question type: "Checkbox" or "Radio."

5. Now let's adjust the layout:

Select the background type and configure the modifications as required for the chosen background style.

To add an image, toggle "Show Image," upload it, and customize its position, width, padding, and roundness.

Set up the title position and color, choose the option columns number, the gap between them, and the max width.

6. Moving to the options preview where you will:

Adjust the width, rounding, padding, and border of the options as needed.

Set a transparent background or choose colors for options content and selected options content. Adjust opacity and selected opacity as needed.

Select the image position, padding, rounding, width, height, and border. And Choose the border colors for both the image and the selected image, then specify the overlay color and adjust its opacity.

You can hide the label or no, adjust its position and size.

The same with the check icon, you can hide it or no, adjust its size, display, position, offset, and color.

7. For the button:

It will be shown automatically in the checkbox type and You can show it in the radio type.

Then customize the label, roundness, position, padding, and margin as necessary.

You can also include a border,and Next, select each of the background, label and border colors.

Step 3: Edit Pages

1. Let's begin by the "Start Page" :

You have the option to display it or no.

Choose your background type either; Transparent, Color or image.

To include an image, click the "Show" toggle. Next, upload the image and customize its position, width, padding, and roundness.

To add a title, simply press the "Show Title" toggle. Afterwards, you can modify the title using the text editor within the widget.

To customize the button, enter the label and adjust its roundness, position, padding, margin, and border. You can also change its content colors.

2. For the "End Page" :

First choose how to display it : as a form, redirect link, quiz results or none.

Choose your background type either; Transparent, Color or image.

You can add an image and adjust its position, width, padding, and round.

Show or hide the Title by simlpy click on "Show Title" button.

Depending on your chosen display option, when adding a link, include it, choose to open it in new tab or no and specify the Iframe width and height.

You can show the link button, insert its label and adjust its rounding, positioning, padding, margin, and border. Next, edit each of the background, label, and border colors.

When selecting Quiz Results, decide to display or hide question titles, results, and option images

Set the progress bar height and color, customize question roundness, modify background color and opacity, and change text and border colors.

To include the option for an empty data text, just active it and enter your desired text.

If you opt for the 'Form' display, you have to configure settings for each field, such as show it or make it required or no. define its label name, placeholder, and the error message.

Finally, you can customize the inputs style as needed.

Step 4: Configure settings

In this Quizzes settings panel, you have control over various aspects:

1. To display the progress bar, click on the "Show" toggle, then customize its position, padding, height, and roundness.

Choose label style, add before text, number separator, and after text, Then adjust label positions and padding as needed.

Next, adjust the colors for the background, progress, and label.

2. Configure the navigation settings by clicking on the "Navigation" toggle to show it. Then customize padding, button positions, roundness, as well as the icons for back and next labels.

Next, select the colors for the button and label, as well as the opacity for the button.

3. To enable the image zoom feature, click on the toggle, choose its icon, and specify its position along both the horizontal (x) and vertical (y) axes.

4. Set the After quiz by show the option result overlay and question result. add the label for the question result and select the overlay direction.

Select the overlay color and opacity then Adjust the text size and color.

Step 5: Adjust The layout

In the Layout panel, you can adjust how your layout looks and behaves. You have control over things like size, rounding, width, popup position, adding an overlay, choosing how it's displayed, and even adding animations.

To switch from the section view to the popup view, just activate the popup and the closable toggle.

The overlay only functions within the popup when the horizontal position is set to the middle and the vertical position is set to the center.

Step 6: Personalize The Button

1. In the layout button section, You can choose to show or hide the button, display it when popup active and open the popup by default or no.

Change the button text and weight, add an icon if you want, then pick its mode and position. Also, adjust the roundness, style, size, and margin individually.

You can also add a badge and include animation effects for the button upon entrance and repetition as required.

2. Now let's Customize the button by choosing its background style and edit its text and border colors.

3. Finally, edit the badge background and text colors.

Step 7: Preview

Lastly, you can click on “Preview” to see how your popup or section shop looks on both desktop and mobile devices. After this, you can proceed to the next step.