Online quiz with cards

How to create a quiz on the webpage
With block BF918 (category Form and button) you can add an interactive quiz with cards. After passing the quiz, your visitor can see the result and the message you've prepared. This tool helps you engage your website visitors and gives them useful content.
Quiz consist of 3 parts:
1. Title, description and button with the call to pass the test.
2. Cards with questions that are automatically renewed after each answer.
3. Card with results and share buttons.

Quiz example:
Quiz
What kind of traveler are you?
Test your knowledge and find out how good you know geography and what kind of traveler you are. Can you answer these geography questions?
Start quiz
What is the capital city of Australia?
Melbourne isn't the capital of Australia.
Canberra is the capital of Australia.
Sydney isn't the capital of Australia.
Wellington isn't the capital of Australia.
Next
Check
Show result
What city does not exist in Canada?
There is Vancouver in Canada.
There is Ottawa in Canada.
There is no Anchorage in Canada.
There is Winnipeg in Canada.
Next
Check
Show result
In which countries there is a city called Moscow?
There is no city called Moscow in Finland.
There is city called Moscow in USA.
There is city called Moscow in India.
There is city called Moscow in Russia.
Next
Check
Show result
What country does not exist in Scandinavia?
There is Norway in Scandinavia.
There is Finland in Scandinavia.
There is no Netherlands in Scandinavia.
There is Island in Scandinavia.
Next
Check
Show result
Which island does no apply to Italy?
Capri does apply to Italy.
Sicilia does apply to Italy.
Sardinia does apply to Italy.
Corsica does not apply to Italy.
Next
Check
Show result
You are homebody
Probably you are don't like to travel or just don't know geography very well
Restart
You are beginner traveler
Probably you are like to travel and know geography well enough
Restart
You are real traveler
You are like to travel and know geography well
Restart
How to add the quiz block
In blocks library choose tab Form and button → BF918 Quiz
Change title and description
Click the Content button in the upper left part of the block. Choose 'Start information' and add the title, subtitle and description of the quiz. Upload an image.
You've created a quiz welcome card with a title, subtitle, image, description, and a button with an invitation to take the quiz.
Create cards with answer options
Add new cards or edit the ones already created.
Title write the question.
Answer — write multiple answers to the question. You can add up to 6 options.
Description — comment to the answer.
Types of answers — choose how many answers may be correct – one or several.
Number of correct answers — set the number of correct answers. If there are several of them, separate them with a comma, like this: 1, 2, 3...6.
Rating the results

You need to rate the results in order, from 'poor' to 'the best'.

Result 1 is the result with the smallest percentage of correct answers.

Maximum quantity of different results — 6.

In Content, click on the Results tab. Write the title, description and upload an image for every result. If you add an image only in one result, it will appear in the rest automatically.

Here's an example
You have 10 questions and 4 results: poor, average, good, and great.
— 'Poor' appears with 0-2 right answers (up to 25%)
— 'Average' appears with 3-4 right answers (25-50%)
— 'Good' appears with 5-7 right answers (50-75%)
— 'Great' appears with 8-10 right answers (75-100%)
How to change button name
Choose the Other tab and change names of all buttons.
How to edit the look of the quiz

Click Settings in the upper left part of the quiz block.

Main settings — change text colour and quiz field width.
Card style — change background, add a border.
Buttons — edit colour, shape and shadow of the buttons.
How to add share buttons in the end of the quiz
In Content open the Share buttons tab and select social networks your visitors can use to share their results.
Important. To enable sharing results to Facebook, you need to sign up to the application and have a Facebook App ID.

Here's how to do it.
How to obtain the Facebook App ID

Open page Facebook for developers https://developers.facebook.com.
Click the button Add New App.
Choose display name for the application. It will be displayed on the sharing cards.
Go to Settings > Basic
Select a category for your application and push the button Add Platform.
In the popup window select Website.
Enter the URL of the quiz page. Save changes.
Copy ID of the application and paste it in the field Facebook App ID.
Important. Do not use this block for serious events or contests with prizes. This block was created for entertainment only, and it's great for increasing user engagement, not much else.
Made on
Tilda