Quiz Build Checklist
Step 1: Copy across content & setup the basics
A) Copy Topics and Questions from Framework PDF into the Content Settings page, and also update the footer of the email section with their name and save. Note: Please capitalise titles using: https://capitalizemytitle.com/
B) Edit the Gravity Form with any extra fields (last name, phone etc) IF they have requested them. Make them left or right aligned as appropriate. When adding the phone field ensure to change the phone format to ‘international’.
C) Edit the Gravity Form and update the link to Privacy Policy under the email field. If they have their own, then link to theirs. If they don’t have one, link to the page on the new quiz duplicate you have created.
D) Edit the Gravity form and add in the Call to Action link from the PDF.
E) Edit the Email Notification (Gravity Form -> Settings -> Notifications) sent to the lead to include their Name and their Email as per the Framework PDF. NOTE: If it is a Diagnostic Style, AND if they selected Feedback to be Score Based, you will need to change the text of “Key Area(s) of Improvement:” to “Understanding Your Score:”
F) Edit the Email Notification FROM the Admin notification email – put their email as the email address notification is sent to. Leave this as INACTIVE because we don’t want the client to receive these yet.
Step 2: Remove extra content
A) In the Gravity Form, remove any pre-written answers from fields not being used in Feedback AND Call to Action areas.
For example, IF they have selected to use the Biggest Gap feedback, remove all pre-written answers from the Score Based feedback fields.
If they have selected Score Based answers for the Call To Actions, please remove the default content from the call to action for everyone field.
Step 3: Design for homepage and general styling
A) Go to ‘Design Settings’ and add in the clients’ logo and colours matching their branding/website/logo. Change the background settings to match their design with a gradient and / or background image.
B) Go to the Theme Customiser and update their font to match their style / website. See note below if needing a custom font.
Please also update Button font under Theme Customiser – Buttons.
If they have a Favicon on their website, please add the same one into the Theme Customiser.
C) Go to the homepage and edit in Visual Builder – Update the button link to goto the same URL as this new quiz.
If you need a custom font
Update the font using theme customiser if the font is a google font (all google fonts currently loaded up), or use the “Use Any Font” plugin for fonts that are not Google fonts and not standard fonts.
If adding in a background image
Make sure it’s low size – no more then 1600px wide at 72 DPI and use https://imagecompressor.com/ to make it a smaller file size. It should be MAX 300KB in file size.
Step 4: Design for quiz page
A) Make sure you have updated the colours of the % bar and x4 boxes so that it is aligned with the branding/logo colours.
We suggest a simple gradient of colours for the x4 boxes, but we leave this up to you to decide.
Step 5: Design for results page
A) Edit this page IF they have selected Diagnostic Style, and the feedback choice is SCORE based rather then the default gap based. If it’s score based, change the heading of “Key Area(s) of Improvement:” to “Understanding Your Score:”
B) UPDATE: Please IGNORE part in video about adding call to action button – please leave as hidden and DO NOT edit this 🙂
Step 6: Radar Chart
A) Change the colours to match their branding or website colours.
B) IMPORTANT NOTE: IF a topic title is too long causing the radar chart to look small, please add number “15” into the radar chart settings called “The number of characters at which the string will be wrapped.”
Step 7: Create the PDF report
A) Goto Settings -> PDF and edit the settings and upload the site logo.
B) Pay special attention to the x2 images and modify to match with their branding/colours.
C) Please DON’T change the colours of the tables – these are controlled via Design Settings panel so that the client can update them.
D) IF they have selected Diagnostic Style, and the feedback choice is SCORE based rather then the default gap based. If it’s score based, change the heading of “Key area(s) of improvement:” to “Understanding Your Score:”
E) Upload new font if required.
F) Creative note: IF the feedback text is short and it isn’t taking up much room on the page – please try and combine feedback and detailed feedback together.
List of CSS Styles you can edit
Logo: .logo
Footer: #footer
First Page Heading/Title: .main_heading
First Page Sub Title: h2
Heading 1: H1
Heading 2: H2
Columns:
Full width column: .col-1-2-fullwidth
Left column: .col-1-2-a
Right column: .col-1-2-b
Specific Pages:
Overall results page: #overall-results
Overall results column: .col-overall-results
Score breakdown page: #score-breakdown
Next Step page: #next-step
Next Step colum: .col-next-step
CSS example updates
Want to hide the logo on the score breakdown or table results page?
Add the following into the CSS box:
@page scorebreakdown { footer: none; }
@page ratings { footer: none; }
Want to make the margins on the score breakdown page smaller?
Add the following into the CSS box:
@page scorebreakdown { margin: 13mm 10mm 10mm; }
Want to hide the overall results page?
Add the following into the CSS box:
#overall-results{display:none!important;}
Want to hide the Next Step page? Add in {#next-step: display: none !important;}
Want to make first page title Smaller, and hide the subtitle?
Add into the css box:
.main_heading {font-size: 30px;} .h2 {display: none;}
Title is not wrapping properly and words are split into two?
Try and re-paste the title text into the title on content settings again.
How to convert Score breakdown into a table
Just add in some basic html table code, such as:
<h2 style=”color: #73a2bf;”><strong>Score breakdown:</strong></h2>
<table border=”0″ width=”100%” cellspacing=”0″ cellpadding=”10″>
<tbody>
<tr>
<td>COPY CONTENT HERE</td>
</tr>
<tr>
<td>COPY CONTENT HERE</td>
</tr>
<tr>
<td>COPY CONTENT HERE</td>
</tr>
<tr>
<td>COPY CONTENT HERE</td>
</tr>
</tbody>
</table>
Step 8: Find and add in any tracking codes and Open Graph settings
A) Look on their current website, use Facebook Pixel Helper chrome addon to check what Facebook ID they have (if any), and check the source code for Google Analytics. If they do, add this in using the Pixel Your Site plugin settings.
B) Create and add a screenshot of the front landing page of their quiz, for their Open Graph settings (Settings -> Open Graph).
How do I add in the tracking codes?
- Facebook pixel: add using the PixelPro plugin
- Google analytics: add using the PixelPro plugin
- Anything else: add using the Divi settings -> integrations
Step 9: Add in API / Zapier info
A) Activate the appropriate plugin for their CRM or mailing program and create the feed in GF.
B) Make sure any TAG is appropriately added in and added conditionally depending on their final score or biggest gap.
C) If they have something else… we use Zapier… not sure how to best handle this but let me know when it comes up and we’ll figure out what to do.
No API - Just Opt In Code
Use Zapier to create a webhook. Details to come.
Infusionsoft
- Activate the plugin called “Gravity Forms Infusionsoft Add-On”
- Create a new feed, or feeds if using Conditional logic to tag things in different ways
Constant Contact
Active Campaign
Active the ActiveCampaign for Gravity forms plugin.
Add in a new feed or feeds depending on if you need to add conditional logic in.
Mailchimp
Active the Mailchimp for GravityForms plugin.
Add in a new feed or feeds depending on if you need to add conditional logic in.
Pick the most likely list (normally just their name or leads is a good one).
Untick the checkbox for double opt in.
Unless they specify the tag, add the following as well as a new tag: “Assess.Coach Quiz Completed”
Hubspot
Active the Hubspot for Gravity forms plugin and configure
Zoho
Active the Zoho for GravityForms plugin.
Goto Forms -> Settings and find the setitngs for the Zoho connection. You will need to log in as them and accept the conditions to link Zoho to their site.
Goto your Form itself, and then you will see a new Zoho settings link just about Zapier. Click onto that and add in a new Zoho feed, adding in their first name, email, and any other details they asked about. Don’t forget to save 😉
Step 10: Create a user and password & add to the Trello card
A) Go to the user panel on their site.
B) Scroll down to add in a new user as the role type of “BC Client”. The email should be the SAME email used on the Trello card under the custom field, AC Email.
IMPORTANT make sure you keep the TICK box CHECKED so that they don’t receive an email notification about their account being created. In other words, do not un-tick it 😉
C) Save the new user.
D) Then go back and edit that user and create a new password for them.
E) Save this username and password into the Trello card.
Step 11: Test it all – do any corrections and quality assurance
Things to look for:
- Mobile view looks good and works
- Calculations are working
- PDF report looks good in terms of spacing, padding, layout
- Email you receive looks good in terms of spacing, padding, layout
- Any obvious spelling mistake or errors in the questions
Step 12: Move card, and tag @marta to review it
A) Move the card in Trello across to the next list to the right called: Programmers & AM: Complete and quality check
B) Add Marta to the card as a Member.
C) Write a quick comment to Marta to let her know it’s now complete and ready to check.
FAQs
What if a box is too big and has too much text in it?
The font size by default is 21px. You can change this to be smaller so that all boxes are even and fits. Just go to the Divi Theme Options CSS panel to update.
If you need to, you can adjust the heights across all screen devices to be larger. Again this is in the Divi Theme Options CSS panel.
My equation is showing up with 0 but the equation is correct? Why?
Sometimes the final equation needs to be underneath others on the page for it to calculate.
What if most questions have one topic, but one or more have multiple questions per topic?
You will need to adjust the numbering and / or biggest gap (if diagnostic) to match and calculate based on only one topic at the end.
- Step 1: Copy across content
- Step 2: Remove extra content
- Step 3: Design for homepage
- Step 4: Design for quiz page
- Step 5: Design for results page
- Step 6: Radar chart
- Step 7: PDF Report
- Step 8: Tracking Codes
- Step 9: API/Zapier
- Step 10: Create a user
- Step 11: Test it all / QA
- Step 12: Move card along
- FAQs