You can use HTML in Protobi elements to embed images and videos into a project. This can be useful when creating introduction pages for projects that will be shared with a client. You can also use this capability to insert visuals that the respondent was shown in the survey.
There are many tutorials and resources on the web to learn HTML, here we've included how to insert text, images and videos.
"BasicElement" chart type
For the Summary element above, the "chartType" is set to "BasicElement". This chart type shows text based information, or html code, which can embed images and videos. "BasicElement" is not yet selectable from the Chart type dialog, so you will need to set the "chartType" attribute from the JSON editor.
"chartType": "BasicElement",
Add "content" to the element
To add the text and visuals for the element, you'll need to include another attribute "content". This is where you'll include the HTML code for the element.
Image example
The example HTML below inserts an image as well as some text below the image. You can copy the below example, and replace the image address and text. Change the size of the image by adjusting the number of pixels (e.g. 400px).
"content": "<img style=\"width: 400px;\" src=\"https://app.protobi.com/v3/datasets/5a5fa2dd136a3a0004b461d0/direct/splash-image.jpg\"><p>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>",
Full JSON for Summary:
Generate an image address
For .jpg and .png images you can use an image address generated by Protobi. This works for .gif files as well. Add the files as documents to project data using the appropriate extension.
Then, upload the image. Right click on the "Preview" to copy the image address.
Video example
For video content you will want to use the "embed code" generated from the website used to upload the video. For example, the Explainer video uses system reference code (src) from Vimeo. You can copy the HTML code below, and replace the video link with the src seen in another video's embed code.
The HTML for the Explainer video content above is as follows:
"content": "</p><p>Introduction to Protobi</p><div class='video-container'><iframe width='640' height='360' style='display:block; margin:0 auto;' src='https://player.vimeo.com/video/172422788' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>",
Full JSON for Explainer video:
