How to use the Split Screen Assessment template

The Split Screen Template is perfect for engaging users through full-height images sharing the spotlight with 10 questions. It has features such as animation from one question to another, gated form, and three possible results from the scoring logic.

Here’s how to set it up and customize it for your content:

What is the Split Screen Template?

The Split Screen template is a visually organized assessment:

  • Home – Displays a full-height image with headlines
  • Questions – Includes 10 questions with 4 choices each, plus a full-height image for each.
  • Gated Form – Basic form with full-height image
  • Result Page – Three possible results achieved through scoring logic

Step-by-Step Guide to Using the Template

Customize the Home Page

The grid is the core of this template. You can customize it to include:

  • Replace the placeholder images with your own featured article visuals. Select the container with the image and on the right side menu, under the “Background Image” tab reselect the image. We advise ticking the “Responsive Background Image” box option.

  • Update the headlines and captions to match your content, double click on the text element or on the highlighted box below.

  • Edit the CTA text (e.g., “Start assessment”).
  • Adjust the pods and sections according to your themekit.

Questions Page

  • There are 10 questions available and 4 choices each. You may want to add or delete new questions — or choices. In this case, you will need to update the Data Field — or Data Value — accordingly.
  • Each question will update the title, choices and the corresponding full-height image.
  • Rearrange sections by drag-and-drop for better flow.

Configure the Form Page

  • Edit the CTA text (e.g., “See my result”).
  • Customize the form fields (name, email, etc.).
  • Connect to your CRM or email marketing tool to capture and manage leads.

Setting the Result Page

  • The logic is simple:
    • Choice A = 1 pt, 
    • Choice B = 2 pt, 
    • Choice C = 3 pt, 
    • Choice D = 4 pt.
  • Check that the scoring logic is consistent with the strategy. Open the Rules tab and ensure that the possible results are as expected.

  • All three possible results should have an updated title and descriptive paragraph, as well as a full-height image.

  • Edit the CTA button and add an Action

Test and Publish

Before going live, preview your assessment on all viewports to ensure it displays perfectly on all devices. Double-check that every link works, the carousel navigation runs smoothly, and form submissions are being captured correctly. Once everything looks great, your Split Screen Assessment is ready to be shared with the world!

Share this:

Ion Interactive is a powerful and scalable platform to create interactive content at scale and launch code-free quizzes, calculators, assessments, infographics, landing pages, and other interactive formats in just a few hours.