Surveys with style

13468
25
08-23-2015 07:19 PM
Esri Frequent Contributor
8 25 13.5K

Here are 6 quick tips to make your surveys look better using Survey123 Connect for ArcGIS: Thumbnails, Titles, Images, Styles, Label HTML Formatting and Emojis.

1) USING A THUMBNAIL

The thumbnail is important to visually differentiate your surveys in the Survey123 mobile app gallery.  This is particularly important if field crews download more than one survey.

How you do this?

1- Preview your own survey in Survey123 Connect
2- Switch to the Settings Tab and tap on the Thubmnail image. This will open a browse dialog so you can select a png image. For best results use images 200x133 pixels in size. Remember. for the thumbnail you can only use png files.

The thumbnail image is stored in the Survey directory and always has the same name as your Survey. If you go back to the Gallery and your Survey is not displaying the image you selected, close Connect and open it again.

2) SETTING A SURVEY TITLE

The survey title shows once it is open. In the next image for example, you can tell that in the Gallery we have a survey named 'Health Facilities Survey'... but when the actual survey is opened, the title reads 'Liberia Health Facility Survey'... Names and Titles are two separate things.

caption2

This is done in your excel file. Simply go to the Settings Worksheet and change the form_title cell

caption3

3) USING IMAGES IN YOUR SURVEY

It is not just a matter of making your surveys look good, which is important... images in your Survey can help people make the right calls when filling out information.

For example, say you are creating a Wolf Reporting survey. Well... you will want to make sure people can tell the difference between a wolf and a coyote. You may think you know the difference, but lots of people don't.

Here is an example of Survey123 Connect previewing a Survey where an image will help people make the right call.

Wolf

Here is how it was done:

1- Preview your own survey in Survey123 Connect
2- In the toolbar on the side, select the yellow folder button as highlighted in the next image.

3- Now add your images into the media files directory

media

4- Look for the 'media::image' column and reference images placed in the media folder by name.  Be aware that iOS devices are case sensitive!

coyote

By now you will notice that you can also add audio files to your Survey too. Simply use the media::audio column. You can associate images and audio with questions, groups and notes in the survey worksheet. You can also associate them with choices in the choices worksheet with results as in the next screenshot.

bird

4) USING STYLES

Styles help you control the colors of basic elements in your Survey. The Style tab can be found under Settings.

Untitled

Have fun with this...

Untitled

5) LABEL HTML FORMATTING

I saved the best for last! You can use HTML formatting to highlight words in your questions, display warning notes as red and much more. Here is one example where we use a note to hint that values in questions above are not adding to 100. Note that we use HTML formatting to display the warning in red.  We also bold some words in the questions.

HTMLFormatting

Here is a list of common HTML tags supported in Survey123:

 

<a href="http://www.esri.com">Link to esri web site</a>

<a href="tel:9093624397">Call Esri</a>

<font color="red">Text in red</font>

<b>This text is bold</b>

<i>This text is in italics</i>

<H1>Header 1</H>

<H2>Header 2</H>

Add a line break<p>into a label

<center>This text is centered</center>

<blockquote>Blockquote (indented)</blockquote>

<u>underlined</u>

<tt>typewrite</tt> font

<s>strikethrough</s> font

<ul><li>Unordered list,</li><li>with two items</li></ul>

<ol><li>Ordered list,</li><li>with two numbered items</li></ol>

6) Emojis

I bet you did not know this one. You can use emojis in your forms. In the example below, I took weather emojis from EmojiMedia and pasted them into the Labels of choices in a select_one question.

25 Comments
New Contributor II

I'm having trouble with the title in the Survey123 initial screen, where there's the icon to start a new survey. The one I made says Form 1 and I don't know how to change it. I've typed a new title in the Title block under Settings but that didn't change that first Form 1 icon. I've changed the PNG that shows there, and I've changed the title in the Excel Form so that is shows the right title in the form itself. Capture.PNG

Occasional Contributor II

Yeah it doesn't like spaces in the title from what I gather.  When you create one you can set your title but once its created goto settings and you can change it there too

New Contributor II

That's the problem though, I have changed it in there in Settings but it's not applying the change.

Occasional Contributor II

Ok its kinda a pain now that I played with it and really should change this but in order to change the existing form the only way I could do it was to goto your My Survey Designs folder, find that form and manually rename each description file to the new name.  You have to do all the files with that name though.  Best to make sure you set the name up front

Occasional Contributor II

The folder on your drive, mine is under ArcGIS

New Contributor II

I had a sneaking suspicion that I may have to do that, but thought I'd ask first.

Thanks a bunch.

Mark

New Contributor II

Also, note that in the App when I go to Download surveys it shows that name under that's under settings, but when I actually download it the original Form 1 name shows up.

New Contributor II

Ron, I have another question. Does Survey 123 allow users to cache an area where there's no cell service so they can still collect points? We're thinking about deploying some maps and forms fairly soon and this functionality would be very useful for our County (Tulare County, CA)

Mark

Occasional Contributor II

Kinda we were play with this.  offline the basemap displays grey but if you are at the location needed w/gps it will collect your point but not see the basemap (the pinpoint moves but there is no reference)

New Contributor II

I've been looking at Survey 123 again and it appears that I may be able to wait until I have an internet connection to upload my data points, so I can use it to gather data when not connected. Is that true?

Also, I keep getting a Code 400 error when uploading my test points so I'm not sure what's wrong but I can't add data to my Geodatabase.

It looks like the perfect solution to our Ag Pest trapping and monitoring program if we can get these things ironed out.

Mark

Esri Frequent Contributor

Hi William,

You can capture data while offline.  Simply save your work locally in the device and once you are connected, go to the outbox and send. The most common use of Survey123 is offline, rather than connected.

  Error 400: Other users have reported that submitting photos in some scenarios cause error 400. Are you taking photos? You may want to send your form to survey123@esri.com so we can have a look.

New Contributor II

Okay, it will let me collect data offline, but can I get it to show me a map, preferably an aerial, while I'm working offline. Our ag commissioner people won't be happy with just showing a pinpoint in a blank screen.  I can use Collector, but I can't control the data inputs there and they have retired computer phobic types placing traps and collecting the data so we'd like to make it as friendly as possible.

New Contributor III

I added audio files to a choices list

When creating the form using Survey123ConnectBeta (version 1.2.12), it shows the audio in the dropdown list (I used minimal styling - maybe this is the problem)

When I view the survey using the Survey123 on my Android phone, the audio symbols are not displayed (no little blue sound icons).  Where did I go wrong?  Maybe I am asking too much of the app at this stage in the game.

I appreciate any ideas or explanation.  Thanks!

Esri Frequent Contributor

Hi,

this could very well be a software defect. Could you zip the contents of your Survey?

1) Open Connect and Tap on your Survey

2) Use the Yellow button to open the location of the Survey in your local computer

3) Navigate one directory app and zip the entire survey folder (including XLS file and media folder)

4) Include the ZIP file as an attachment to this thread , or alternatively send to survey123@esri.com

we will look into this and report back.

Also, could you please try not using the 'minimal' appearance and see what happens? If I recall correctly the audio buttons show well with the default appearance so this may be just an issue with minimal.

Ismael

New Contributor III

Thanks for the quick reply Ismael.  I just sent you a zipped file via email.

I did create a survey that didn't use the minimal style and it did not work either.

Occasional Contributor III

Autosync please instead of Send.

Regular Contributor

When I add emojis, (same site referenced in article) in the survey they just show up as black outlined, hollowed vectors. not the colored nice ones in the examples.... i am literally hitting copy and paste into the excel sheet. where am i going wrong?

Esri Esteemed Contributor

Hi Joe,

A couple of reasons why they don't appear as you'd expect:

- different programs will render emojis differently; see    Emoji Blog • Does this come up as black and white or color... 

- apparently Excel in particular is rather poor on this; see http://professor-excel.com/emojis-excel/  

Regular Contributor

So how did OP do this? Were did he copy the emojis into if not the excel sheet? 

Esri Esteemed Contributor

Hi Joe,

Ismael copied them into Excel from the website; they render fine on mobile devices (it's just a limitation on Window's part).

Occasional Contributor

Hello,  

I just want to ask if is possible change the image in the form in a dynamic way for example with a select one before the image and invoque the image with a concat function (or another one), I tried with concat and it does not work.

Concat in the media::image field

 Thanks, 

Esri Esteemed Contributor

Hi Roger,

What you are trying to do works with image questions that have the annotate appearance.

New Contributor III

Greetings,

Is there a way to change the default color of the Survey123 in-form icons (e.g., bar code, folder, camera) so they show-up better against dark backgrounds?

Thank you,

~TC

Esri Regular Contributor

Hey TC!

There is not currently a method to change the color of the annotate or barcode icons in the out-of-the-box version of Survey123, however, this may be something that can be done by modifying the Survey123 source code using AppStudio for Desktop.  Having said that, it would then require a custom build of Survey123, and familiarity with modifying the source code.

For the time being, the best approach might be to change the background image to something that will be more friendly with the icons.

Best,

Brandon

Occasional Contributor

I am having a problem getting my survey title centered when viewing the survey in a web browser. I've tried it in multiple browsers and it looks the same in all browsers. I've cleared the cache and removed cookies and this does not help either. The survey title is offset to the right. I played around with the survey settings in my excel spreadsheet by using the <center> or <H2> formatting in the form_title field, but they do not change the position of the title. When I view the survey in the desktop Survey123, it is centered. Does anybody know how to get the title centered when viewing in a web browser?