The Report Card Assessment is an engaging assessment with image and progress bar animations, vertically sliding flow steps taking users from one question to another, and partially gated results. Immediately on the landing page visitors see multiple animations in the CTA and images leading them to take the assessment. Upon completing the assessment, users are presented with partial results and a form that must be completed to access the rest of their result.
- Type: Assessment
- Complexity: Medium
- Use case: Lead Generation
Features available
Here are the major features, abilities, and interactive elements used in this template.
- Animations
- Choice group
- Flow
- Form
- Icons
- Positioning
- Progress bar
- Resources
- Sticky position
How-to use
Here is a helpful guide on how to handle all the major features, abilities, and interactive elements available to make the most out of this template.
Animations
Step 1: With the image selected navigate to the Animation panel on the right hand side. Select Immediate in the drop down, then select Fade In up.
Step 2: To set a delay, navigate to the Animation panel. Select Delays and then select the amount of seconds you would like the image to be delayed for.
Choice group
Step 1: To add an additional choice to an existing choice group, navigate to the Forms panel and select “Choice”. Place the choice within the existing choice group.
Step 2: Place a text element within the choice and add the text specific to the choice. Select the choice and navigate to the Variables panel to add the Data Value, and set the Behaviors to Form Submit > Validate and Submit. *The Data Value is specific to the choice. For naming conventions begin the Data Value with A:, B:, C:, D:, etc. followed by the choice. This is best practice and ensures when writing the rules, instead of referencing the choice value which can be constantly changed based on choice wording, the beginning value A:, B:, C:, D:, etc. are never changed and can always be referenced.
Step 3: To update the question, navigate to the Page panel, in the rules edit the text in the corresponding actions and question.
Step 4: To edit the choice, select the text within the choice and open the text editor. * Don’t forget to update the Data Value by selecting the choice and navigating to the Variables panel.
Flow
Step 1: To add additional flow steps for assessments that have beyond the 8 question default, first either place an interactive flow step element or copy and paste an existing flow step from the assessment.
Step 2: If you are adding a new flow step from the Interactive Palette, then select the responsive grid from the previous existing question, then copy and paste into the step 1 flow step.
Step 3: In the previous flow step edit text from “submit” to “next”, and remove the action from the column level where the submit button is nested within. Navigate to the Behaviors panels and set the Behaviors in Flow to move to step next.
Step 4: In the new flow update the question’s dynamic text by navigating to the page panel, click into the rules and add an additional action to “save data”, QuestionXX, insert text.
Step 5: Update the rest of the question information, select the choice group and navigate to the Variables panel to change the choice group data field.
Step 6: Update the choice text by selecting the text for each choice and double clicking to open the text editor. To update the choice data value select each individual choice and navigate to the Variables panel.
Step 7: After adding all additional questions, navigate to the last question in the assessment. Remove the Behaviors Move to Step Next using the trash can icon.
Step 8: Set the action to move to the corresponding page users are taken to after the assessment is completed by adding an Action to the “submit” button. Don’t forget to add a tag, to track how many people made it through the assessment.
Form
Step 1: In the Layout panel, add an additional row within the Responsive Grid inside the form element. Remove the third column, and adjust the row settings.
Step 2: Place the desired form input into the column.
Step 3: Adjust or remove the label by selecting the text within the label container and selecting the trash can icon.
Step 4: With the form element selected within the Form Field, in the Variables panels adjust the Input Type depending on text only, email, phone number, etc., checkmark if the input is required or not, and assign a data Field.
Step 5: To add placeholder text, select the form input within the Form Field and navigate to the Variables panel. Under the Pre-Populated Value set Placeholder Text.
Icons
Step 1: When having an image next to a question, it is ideal to keep the image size small. In this specific creative, the dimensions are 45px x 45px. Keeping the image dimensions in mind will allow for the image to display next to the question rather then the image appear on top of the question.
Positioning
Step 1: Place a container into the column of the responsive grid. Place the image into the container. * To place an image outside of a responsive grid, you must first identify what element the image should be connected to. This is key to the positioning of the image and making it as responsive as possible in all screen sizes. In most cases, linking an image to a column is not ideal because column responsive grid settings change based on different viewport sizes. It is best practice to link an image to a container.
Step 2: With the image selected, go to the Layout dropdown, and scroll down to “Position”. Select top and right, change the values to 3% top, and -2% right. The percentage value is connected to the container the image is contained within. Therefore, 3% top means move the image 3% from the top of the container, and -2% right means move the image -2% right of the container. The “Layer” value when set high (values greater than 10) pulls the selected object to the forefront and when set less than 10 it is pushed back.
Progress bar
Step 1: If additional questions are added to the assessment you will need to add additional containers to the progress bar. Select any container within the Progress Bar, copy it, select the Progress Bar container and paste. If the assessment has less than the 8 question default, remove containers within the Progress Bar container.
Step 2: The width of each individual container within the Progress Bar is determined by how many questions are part of your assessment and can be edited in the Layout Panel. The Progress Bar width is 100%. In this creative, there are 8 questions/flow steps, therefore 100/8, each container will have a width of 12.5%. If you have 5 questions/flow steps as part of your assessment, divide the 100/5, therefore the width of each container will be 20%.
Step 3: Use the Micro-Themes background to change the color of the containers to show questions answered vs. questions still left.
Resources
Step 1: With the reveal selected, you can adjust the reveal display using the Variables panel. Reveal Type Overlay indicates that reveal will overlay the reveal trigger verses Toggle, which displays Reveal Container content instead of Reveal Trigger. Reveal when Hovered indicates when the cursor hovers over the reveal trigger, it will reveal verses Clicked, the user’s cursor must click on the reveal trigger to see the reveal.
Step 2: Spacers can be added and adjusted in certain viewports. Spacers are used in circumstances when more space would like to be added to achieve the desired visual appeal. For instance in desktop and mobile viewport the content is too close to the top of the container, to push the content further down, add a container element, navigate to the Show & Hide panel checkmark to hide in medium and small viewports, only showing in desktop and mobile. Navigate to the Layout panel, and give the container a height. The greater the value the bigger the space.
Step 3: Update image by double clicking on the existing image, click reselect image on the top right corner of the image panel, select Usage Creative and select Add Images. Navigate to the Layout panel to adjust image margins and width. *Images/icons dimensions should be kept at a relatively low value ex. 6em to achieve a similar display.
Sticky Position
Step 1: The sticky position is relative to the element that contains the CSS Style for sticky. In this creative there is top=2em. This indicates that the element will scroll 2em away from the top.
Step 2: With the column selected, adjust the space using the Custom CSS Style. For greater space change the top to a higher value, for less space change to lower value. Right and left spacing can be added too by inputting a new line “left: XX;” or “right: XX;”.
Content Writing Template
Here is the content structure’s template to make it easier for you when providing content guidelines or creating the copy for this template, from understanding the content structure to getting to know the amount of words needed to each text piece.
Related templates
If you like this template, you might want to check out these other similar models.
Have a question?
Still have questions or are facing troubles when handling this template? Please do not hesitate to send any additional questions to [email protected], so we can make sure to have this article constantly up to date.
