Result Bar

Result Bar is a read-only summary step that returns the score of correct answers to the user.

Step Config

Key	Description	Is Optional?
type	Should be resultBar to differs from other steps.	Required
stepId	Unique step identifier.	Required
pretitle	Text added pre title text.	Optional
pretitleColor	Color of the pre-title text.	Optional
title	Title text added on top of the step.	Required
titleColor	Color of the title text.	Optional
bar	Bar Config	Required
image	Image URL to be shown after the bar	Optional
description	Description text which is added after the image.	Optional
descriptionColor	Color of the description text.	Optional
cta	[User Result Echo](User Result Echo)	Required

Bar Config

Key	Description	Is Optional?
text	Bar’s text	Required
textColor	Bar’s text color	Optional
barColor	Bar’s background color	Required
borderColor	Bar’s border color	Required
correctAnswersCount	Count of the correct answers, can use JEXL expression (ex. {{getOnboardingAnswerValue('step_id_1') + getOnboardingAnswerValue('step_id_2') + getOnboardingAnswerValue('step_id_3')}} NB: Double check the answer values are added as a number and not a string	Required
questionsCount	Count of the questions	Required

CTA Config

Key	Description	Is Optional?
text	CTA text.	Required
backgroundColor	CTA background color.	Optional
textColor	CTA text color.	Optional
showButtonsDelay	Delay in ms before showing the CTA	Optional
soundEffect	Add sound effect link	Optional
hideArrow	Whether to hide or show CTA arrow, accepts true and false.	Optional

Example

UsersResultEcho

{
    "id": "mind_app_id",
    "language": "en",
    "appId": "co.thefab.mind",
    "seo": {
      "title": "Lumiere",
      "favicon": "https://c.thefab.co/web-onboarding/mind/mind-favicon.png",
      "description": "Manage stress and anxiety through self-care practices and empowering affirmations. Embark on a journey of self-love."
    },
    "sections": [
      {
        "title": "Spot the Myths",
        "titleColor": "#F55336",
        "start": "step_id_1",
        "end": "step_id_3",
        "progressColor": "#F55336",
        "progressEndColor": "transparent",
        "progressBgColor": "#f5533633"
      }
    ],
    "steps": [
      {
        "stepId": "step_id_1",
        "type": "yesNoQuestion",
        "textColor": "#F55336",
        "title": "Fasting gets in the way of social activities.",
        "ctas": [
          {
            "text": "Fact",
            "value": 1,
            "textColor": "#F55336",
            "hoverBackgroundColor": "#FDDDD7",
            "backgroundColor": "#FFEEEB"
          },
          {
            "text": "Myth",
            "value": 0,
            "textColor": "#F55336",
            "hoverBackgroundColor": "#FDDDD7",
            "backgroundColor": "#FFEEEB"
          }
        ]
      },
      {
        "stepId": "step_id_2",
        "type": "yesNoQuestion",
        "textColor": "#F55336",
        "title": "The only benefit of fasting is weight loss.",
        "ctas": [
          {
            "text": "Fact",
            "value": 1,
            "textColor": "#F55336",
            "hoverBackgroundColor": "#FDDDD7",
            "backgroundColor": "#FFEEEB"
          },
          {
            "text": "Myth",
            "value": 0,
            "textColor": "#F55336",
            "hoverBackgroundColor": "#FDDDD7",
            "backgroundColor": "#FFEEEB"
          }
        ]
      },
      {
        "stepId": "step_id_3",
        "type": "yesNoQuestion",
        "textColor": "#F55336",
        "title": "Foods like cheese, chocolate, juice, desserts, and alcohol are okay to eat during your eating window.",
        "ctas": [
          {
            "text": "Fact",
            "value": 1,
            "textColor": "#F55336",
            "hoverBackgroundColor": "#FDDDD7",
            "backgroundColor": "#FFEEEB"
          },
          {
            "text": "Myth",
            "value": 0,
            "textColor": "#F55336",
            "hoverBackgroundColor": "#FDDDD7",
            "backgroundColor": "#FFEEEB"
          }
        ]
      },
      {
        "stepId": "bar",
        "type": "resultBar",
        "pretitle": "Challenge",
        "pretitleColor": "#F55336",
        "title": "Results",
        "titleColor": "#F55336",
        "image": "https://storage.googleapis.com/c.thefab.co/Shape/onboarding/Mascots/sesame-right-answer%201.png",
        "description": "A Myth Buster! You have a solid understanding of fasting. Let's turn this knowledge into action with a fasting routine that works for you.",
        "descriptionColor": "#F55336",
        "bar": {
          "text": "Correct answers",
          "textColor": "#01AF88",
          "barColor": "linear-gradient(90deg, #B2D927 0%, #00AF88 100%)",
          "borderColor": "#01AF88",
          "correctAnswersCount": "{{getOnboardingAnswerValue('step_id_1') + getOnboardingAnswerValue('step_id_2') + getOnboardingAnswerValue('step_id_3')}}",
          "questionsCount": 3
        },
        "cta": {
          "text": "Continue",
          "backgroundColor": "#F55336",
          "textColor": "#FFFFFF"
        }
      }
    ],
    "logic": []
  }