Sign in
x
☰

Add a project intro

Updated at 2021-02-01 18:15:17 UTC
Project intro page showing 'Example Pharma Survey' with a decorative medical-themed image featuring hexagonal icons. The page displays summary text explaining this is a survey about health care professionals' treatment patterns and includes 'Sample: 100 physicians'.

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

/uploads%2Fupload%2Fimage%2F5200%2Fdirect%2F1611852166207-1611852166207.png

1. 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. 

Element properties dialog box titled 'Element properties: Screener' displaying configuration settings. Key fields include 'key: Screener', 'displayKey: Screener', 'headline: text', 'title: Survey eligibility', 'type: empty' dropdown, and 'children: Intro,S1,S2,S6v1,S6v2,S8v2' showing the child elements of this section.

The element will initially appear empty:

Simple chart display for the Intro element showing a single row with '[NA]' label, displaying 100% with a blue horizontal bar and N value of 100.

2. To add images and text, open the HTML content editor by selecting the element and using the shortcut SHIFT + x + c . 

Element properties dialog titled 'Element properties: Intro' displaying a mostly empty text editor interface with Cancel and Ok buttons in the header and a single line numbered '1' with a cursor.

3. Use HTML tags to add different headings, images and paragraphs.  

Element properties dialog for Intro element displaying HTML markup in a text editor. The code shows an h2 heading 'Example Pharma Survey', an img tag referencing 'splash-image.jpg', followed by paragraph tags containing summary text describing the survey of health care professionals and sample information of 100 physicians.

Expand the panel to copy the above code.

Intro element HTML code

<h2>Example Pharma Survey</h2>
<img src="/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>

Delete

4. Open the JSON editor and edit or add these attributes:

  1. Set "type" to "empty" (line 16 below).The intro element doesn't contain data, setting type to empty will remove the frequency bar for [NA]. 
  2. Set "chartType" to "" (line 3). Or you can delete that attribute altogether. 
  3. Add a "css" attribute (line 5) to format the image. You can do a variety of things, but here we just adjust the width of the image that is referenced in the content attribute.  See CSS Styling images for more examples.

 

Note the "content" attribute contains the HTML code you add in the HTML content editor (SHIFT + x + c).

Element properties dialog displaying JSON configuration for the Intro element. The JSON shows properties including 'key: Intro', 'chartType: empty string', 'color: #82C7DA', CSS settings with img width 100%, 'displayKey: null', 'type: empty', chartOptions with width 400 and height 480, and a content field containing HTML markup for the Example Pharma Survey with h2 heading, image tag, and paragraph descriptions.

End result:

Final rendered intro page displaying the 'Example Pharma Survey' title in blue text, followed by a medical-themed banner image with hexagonal icons and stethoscope imagery. Below the image is a Summary section explaining the survey's purpose about health care professionals' treatment patterns, followed by a description of question types, and ending with 'Sample: 100 physicians'.

Expand the panel below to copy the entire 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%"
        }
    }
}