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 16 below).The intro element doesn't contain data, setting type to empty will remove the frequency bar for [NA].
- Set "chartType" to "" (line 3). Or you can delete that attribute altogether.
- 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).
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%"
}
}
}