Including Graphics in Your Questionnaire

You can display graphics most any place within an SSI Web study. Those who know some HTML recognize that graphics can be added using the IMG tag. SSI Web automates the way that SSI Web manages graphics for testing (under Local Test Server) and for running over servers. We recommend you use SSI Web's automatic ability to manage the "path" to your graphics, and that you follow the instructions below for inserting graphics within your questionnaire.

(Note: Please see the section on Graphics Management for more information regarding how SSI Web manages graphics, and how you can customize how graphics are used and stored on the server.)

---

Adding Graphics
To add a graphic, click the Add Image icon on the toolbar accessed by first clicking the "Pencil" edit icon . Then, browse to the folder containing your graphic, and double-click the graphics file. When you do this, the following happens:

1. An HTML <img> tag including SSI Web scripting is inserted within your questionnaire:

<img src="[%GraphicsPath( )%]yourgraphic.???" border="0">

where "yourgraphic.???" is the name of the graphic file you added, and [%GraphicsPath( )%] is the SSI Web script with tags "[% %]" and system function GraphicsPath( ) that returns the path from the cgi-bin directory to your graphics directory (or from the login.html file to your graphics, if the graphic is on the login screen), as specified under Compose | Survey Settings | Server Settings...

2. The file "yourgraphic.???" is copied into a graphics directory directly off of your study directory.

You may be tempted to type the <img> tag contents yourself for a new graphic, or cut-and-paste the <img> tag contents to another part of your survey and alter the referenced graphic. If you do this, make sure to copy the new graphic into the graphics directory, or the graphic will not appear when testing your survey. For this reason, you may discover that it is easier to just use the Add Image icon.

We suggest you use the system function GraphicsPath( ) for managing the paths to graphics for your survey. However, you can edit other aspects of the <img> tag, such as providing size parameters or changing the border width.

Different browsers support different graphics formats. For best results across different browsers, your image should probably be saved in .GIF,.JPG., or .PNG format.

Internet browsers display images in their original size; they do not automatically size them to fit within your interview or in relation to your question area. Plan ahead and size your images to look good under different screen resolutions.