Follow

Quiz Widget

Table of Contents

1 Scope

 

1 SCOPE

This document describes how to create and add a Quiz widget to a website and receive and manage the results in your Conducttr's project

1.1 What does it do?

Create a custom Quiz widget and get more info from your audience or engage new audience with contests. Store the answers in attributes and/or move the audience into groups to personalize the experience.

1.2 How does it work?

The code snippets we provide ( you can find it on GitHub) must be embedded into a web.

The code will make an API Call to Conducttr before the actual registration process. It's possible to use this call to set the values of one or more attributes or fire an API Call trigger and publish content or move the audience to a specific group.

2 THE RECIPE

Each recipe has the following sections:

  • Ingredients - what you need to complete this project
  • Preparation - how to prepare
  • Method - step-by-step guide

2.1 Ingredients

You will need:

  • A website. This recipe will work with any website including free website builders like Wix.com
  • The Conducttr quiz widget code(found it on GitHub)
  • Basic text-ending software to edit the code such as Notepad
  • A Conducttr project

2.2 Preparation

Before following the Method section, please do the following:

  • Create a Conducttr project using the Template "Quiz Widget"
  • Create new API entry inside Conducttr (call it "Quiz Widget")

2.3 Method

Now you have all the ingredients and you’ve followed the preparation, you’re now ready to configure the project. The steps are:

  • Create one or more attributes
  • Create unauth API method in Conducttr.
  • Create unauth API triggers in Conducttr that will fire when the video calls them
  • Update the quiz widget code snippet with details from your project
  • Embed the code at the website
  • Check log to see that video is calling Conducttr as expected

 

2.3.1 Grab the code

The code is here 

 

2.3.2 Create one or more attributes

The answer for each question will be store in Audience attributes, so you need to create an Audience attribute for each question. You can create as many questions and attributes as you want. 

 

2.3.3 Create unauth API method

Inside the previously created API entry, go to the API Methods tab and create a new unauth method. The name of the method should be “unauth/[YOUR-METHOD-NAME]” e.g. unauth/quiz.

Then add all the parameters you have created in the previous step and you want to get from the Quiz widget.

 

2.3.4 Create unauth API trigger (Optional)

If you want you can create an unauth API trigger with a matchphrase, this will fire when someone sends the quiz. You can use the API METHOD NAME as a matchphrase, and then attach a Content Action or Logic Action to this trigger, and send the audience an email when they fill the quiz.

 

 

2.3.5 Update the code

When you open the code snippet, the area that you edit is between two comment lines. The start of the editable area says “Edit the information below” – as shown in the image.

You need to update the following information:

  • CONSUMER KEY – you’ll find this in the Authentication section of the API pop-up

  • PROJECT ID – this is found in the top header bar

  • METHOD NAME - The API method name and/or the API Trigger matchphrase

 

You can edit/add or remove all the default questions. For each question you need to add an input inside the widget (anywhere between the <div id="quiz_container"> and </div> tags)

EG:

<div class="question">
<div class="question_title">First question - with a numeric answer : </div>
<input type="number" name="attribute_integer" id="attribute_integer" />
</div>

<div class="question">
<div class="question_title"> Second question - with an open text answer : </div>
<input type="text" name="attribute_single_line" id="attribute_single_line" />
</div>

<div class="question">
<div class="question_title"> Third question - with a yes/no answer: </div>
<div class="onoffswitch">
<input type="checkbox" id="attribute_boolean" name="attribute_boolean" class="onoffswitch-checkbox" value="1" >
<label class="onoffswitch-label" for="attribute_boolean">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>

<div class="question">
<div class="question_title"> Fourth question - Multiple choice answer : </div>
<li>
<input type="radio" name="option" id="option_1" value="1" checked><label for="option_1" class="btn">Option 1 </label>
</li>
<li>
<input type="radio" name="option" id="option_2" value="2"><label for="option_2" class="btn">Option 2 </label>
</li>
<li>
<input type="radio" name="option" id="option_3" value="3"><label for="option_3" class="btn">Option 3 </label>
</li>
<li>
<input type="radio" name="option" id="option_4" value="4"><label for="option_4" class="btn">Option 4 </label>
</li>
</div>

 

And then you need to add it to the Call to Conducttr, in the widget code snippet (after the line form.onsubmit = function())

One line to get the value from the previously created input

e.g.

var attribute_integer = document.getElementById('attribute_integer').value;

 

And one line to add that value (along your Conducttr's consumer key and the audience email/phone) to the call to Conducttr:

eg

var attribute_integer = document.getElementById('attribute_integer').value;

var attribute_single_line = document.getElementById('attribute_single_line').value;

if (document.getElementById('attribute_boolean').checked) var attribute_boolean = 1;
else var attribute_boolean = 0;

var attribute_integer_2 = document.querySelector('input[name="option"]:checked').value;

 

- What happens after sending the quiz?

You can also modify the behaviour of the widget when someone sends the quiz. By default the widget will hide the quiz and show this message: " The quiz has been sent. Thank you for your participation!"

You can modifiy this text change this lines:

<div id="sent_message" style="display:none">
The quiz has been sent. Thank you for your participation!
</div>

Or you can redirect the audience to another page by changing these lines at the end of the widget:

//window.location.href = "http://YOUR-REDIRECTION-URL.com";

document.getElementById('quiz_container').style.display = 'none';

document.getElementById('sent_message').style.display = 'block';

to this ones:

window.location.href = "http://YOUR-REDIRECTION-URL.com";

//document.getElementById('quiz_container').style.display = 'none';

//document.getElementById('sent_message').style.display = 'block';

 

After these changes you can save your website and try it.

 

2.3.6 Check the results

Check your Projects Activity Feed to check if Conducttr is correctly receiving the API Calls from the widget.

Each someone sends the quiz will be registered inside Conducttr. You can go to the Audience Table -> Audience Details -> Attribute Tab to check their responses.

 

 

You can also export the whole Audience (Audience Table -> Export ) as an Excel file, and then filter by their responses/attributes.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments