Including Graphics in Your Questionnaire

Top  Previous  Next

You can display graphics most any place within a Lighthouse study.  Those who know some HTML recognize that graphics can be added using the IMG tag.  Lighthouse Studio automates the way that it manages graphics for testing (under Local Test Server) and for running over servers.  We recommend you use Lighthouse Studio'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 Lighthouse Studio 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 Camera on the toolbar accessed by first clicking the "Pencil" edit icon pencil.  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 with some Sawtooth Script is inserted within your questionnaire:


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


where "yourgraphic.jpg" is the name of the graphic file you added and [%GraphicsPath( )%] is the Sawtooth Script with tags "[% %]" and system function GraphicsPath( ) that returns the path from the cgi-bin directory to your graphics directory, as specified under Field | Hosting Management...


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


(Note: .jpg, .gif, .png, etc. can be used.)


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.


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.


Page link: