Add a project intro

Updated at February 22nd, 2021

An intro element at the beginning of a project has visual appeal, and informs the user about the study. 

https://s3.amazonaws.com/helpjuice-static/helpjuice_production%2Fuploads%2Fupload%2Fimage%2F5200%2Fdirect%2F1611852166207-1611852166207.png


To add an intro element, go to the "More properties..." dialog for the group (e.g. Screener). Reference a new item "Intro" as the first item in the "children" attribute. 

The element will initially appear empty:

To add images and text, open the JSON editor and edit or add these attributes:

  1. Set "type" to "empty" (line 4 below).The intro element doesn't contain data, setting type to empty will remove the 100% frequency bar for [NA]. 
  2. Set "chartType" to "BasicElement" (line 16)-- this chart allows us to insert images and text in a "content" attribute.
  3. Add a "content" attribute (line 17). Insert html code to add images and text. 
  4. Add a "css" attribute to adjust the width of the images referenced in the content attribute. 

End result:


Expand the panel below to copy the JSON for the above element. 

JSON code

{
    "roundby": null,
    "key": "Intro",
    "type": "empty",
    "title": "",
    "displayKey": null,
    "field": "",
    "color": "",
    "maxValue": null,
    "chartOptions": {
        "width": 393,
        "height": 453
    },
    "width": "400",
    "sortby": null,
    "chartType": "BasicElement",
    "content": "<h2><%=dataset.name%></h2><img src=\"https://app.protobi.com/v3/datasets/5a5fa2dd136a3a0004b461d0/direct/splash-image.jpg\"><p><b>Summary: </b>This is an example survey of health care professionals about their current treatment patterns and interest in a new product. </p><p>The survey demonstrates a wide array of question types and illustrates some complexities common to many surveys.</p><p><b>Sample:</b> 100 physicians</p>",
    "css": {
        "img": {
            "width": "100%"
        }
    }
}


Was this article helpful?