Image Quiz

Image Quiz

Welcome to the “Image Quiz” documentation. Looking to integrate a image quiz into your website? Our widget allow you to create interactive quizzes on your website, making learning or entertainment engaging and enjoyable. In this guide, we'll show you how to use the editor to customize your image quiz widget.

        



Step 1: Open the Editor
1. Go to Image Quiz template.
2. Click on "Edit" after choosing your template.




Step 2: customize Quiz content
In this panel, you will edit the quiz questions and endpage as needed.





1. Begin with this section, where you can easily add or remove questions.





2. Customize each question by adding your options and specifying how many should appear per line.
For each option, you'll upload an image and input a label.





3. For the end page, begin by selecting how it will be displayed: as a form, button, text-only, or Iframe.
Next, for each type, you can customize its style, including adjusting the roundness, button position, and editing form inputs.
Lastly, choose colors that harmonize perfectly with your website's design.




Step 3: Set Up the props

Here, you'll handle the quiz props:
You can choose whether to enable the zoom option, select its icon, and fine-tune image style, gap, and width.





2. In the "After Vote" section, you can decide if you want to display the percentage and total votes. Additionally, you can permit navigation and choose icons and labels for it.




3. Finally, in this section, you can customize the width and height of the Iframe.
        





Step 4: Adjust the Layout

1. 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 popup view to the section view, just deactivate the popup and the closable toggle.





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




  • 2. Finally, you can select colors that match your website's design.



     


    Step 5: Preview

    Lastly, you can click on “Preview” to see how your image quiz widget looks on both desktop and mobile devices. After this, you can proceed to the next step.