Add a project intro
An intro element at the beginning of a project has visual appeal, and informs the user about the study.
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.
The element will initially appear empty:
2. To add images and text, open the HTML content editor by selecting the element and using the shortcut SHIFT + x + c .
3. Use HTML tags to add different headings, images and paragraphs.
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:
- 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].
- Set "chartType" to "BasicElement" (line 20)-- this chart allows us to insert images and text in a "content" attribute.
- Add a "css" attribute (line 21) 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.
End result:
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%" } } }