Estilizar uma pesquisa

Survey123 Connect fornece ferramentas para configurar a apresentação de uma pesquisa, permitindo que ela se destaque para os usuários. Você pode alterar as informações da pesquisa apresentadas na galeria, o título presente quando você abriu a pesquisa e as cores e o estilo da pesquisa para torná-la visualmente distinta. Você também pode inserir mídia na pesquisa e adicionar formatação de HTML.

Alterar miniatura, título, descrição e tags

O nome da pesquisa e miniatura são importantes para diferenciar visualmente suas pesquisas no site da web Survey123 galeria do aplicativo de campo. Isso é particularmente importante se você estiver criando múltiplas pesquisas para seu próprio uso ou se as equipes de campo baixarem mais de uma pesquisa.

Use uma miniatura para diferenciar pesquisas.

Para alterar a miniatura e outras propriedades de um item da pesquisa, complete as seguintes etapas:

  1. Abra uma pesquisa no Survey123 Connect.
  2. Clique na guia Detalhes .
  3. Clique na imagem em miniatura para procurar um arquivo de imagem. Para melhores resultados, utilize imagens com 600x400 pixels.
  4. Opcionalmente, forneça texto para o título do item, resumo e descrição da pesquisa.

    As alterações feitas aqui serão refletidas na galeria de pesquisa e também no item de formulário da pesquisa em sua organização do ArcGIS assim que a pesquisa for publicada.

Aviso:

O Survey123 Connect exige que todos os arquivos de imagem utilizados para miniaturas tenham uma extensão do arquivo de letra minúscula. Extensões de arquivos de letra maiúscula não são reconhecidas pelo Survey123 Connect e estas miniaturas não serão publicadas com a pesquisa.

A miniatura pode não ser exibida corretamente se o nome do arquivo contiver espaços, símbolos ou caracteres especiais.

Para adicionar formatação, links ou outros elementos de texto à descrição da pesquisa, é recomendado que você use o editor de descrição para o item de formulário em sua organização do ArcGIS. Ao editar qualquer propriedade do item de formulário em sua organização do ArcGIS, você deve baixar a pesquisa no Survey123 Connect novamente para ver as alterações na guia Detalhes.

Configurar o título da pesquisa

O título da pesquisa aparece quando você abre a pesquisa a partir da galeria. Ele pode fornecer uma descrição mais detalhada da pesquisa. O título da pesquisa não é o mesmo que o nome da pesquisa, que é exibido na galeria.

Criar um título para pesquisa.

Você pode configurar o título da pesquisa inserindo o valor na coluna form_title da planilha de configurações.

Definir o título na planilha de configurações.

Como alternativa, você pode definir o título de sua pesquisa incluindo uma pergunta de anotação em sua pesquisa chamada generated_note_form_title. Este método permite que você forneça traduções para o título e inclua valores da resposta da pesquisa no título usando a sintaxe ${question_name}. Para mais informações, consulte Personalizar elementos do formulário.

Adicionar mídia a uma pesquisa

Adicionar mídia a pesquisas pode ser útil de várias maneiras. Não se trata apenas de tornar as pesquisas agradáveis ​​aos olhos; imagens ou áudio na pesquisa podem ajudar os usuários a fazer determinações ao preencher as informações. Fornecer imagens em pesquisas pode ajudar a fazer estimativas ou identificações visuais.

Para serem incluídos em uma pesquisa, os arquivos de imagem e áudio devem ser salvos na pasta de mídia da pesquisa.

Você pode adicionar imagens à qualquer pergunta, incluindo o nome de arquivo exato do arquivo de imagem (incluindo a extensão do arquivo) na coluna media::image da planilha de pesquisa. Os tipos dos arquivos suportados incluem BMP, GIF, JPC, JPE, JPEG, JPF, JPG e PNG. Para imagens GIF, a animação é compatível apenas com o aplicativo da web Survey123. O aplicativo de campo Survey123 também suporta imagens TIF e TIFF.

Você pode adicionar áudio a qualquer pergunta incluindo o nome exato do arquivo de áudio (incluindo a extensão do arquivo) na coluna media::audio da planilha de pesquisa. Tipos de arquivo suportados incluem MP3 e WAV. Formatos de áudio adicionais são suportados em certas plataformas. Por exemplo, a reprodução de arquivos M4A é suportada no iOS. Quando o áudio é incluído em uma pesquisa, um botão de alto-falante fica ativo no formulário. Selecione este botão para reproduzir o arquivo de áudio.

Anotação:

O Survey123 diferencia entre letras maiúsculas e minúsculas. Certifique-se que todas as referências para nomes de arquivos e suas extensões utilizem a mesma ortografia que os arquivos reais. Por exemplo, Tree.JPG não é o mesmo que tree.jpg e se referenciado como este, a imagem não será exibida na pesquisa.

Imagens para opções em perguntas de múltipla escolha não são suportadas pelo Survey123 web app ao usar a aparências mínima ou auto completar.

Utilize uma pergunta de anotação para exibir uma imagem ou reproduzir um clipe de áudio que não esteja associado a uma pergunta.

Adicionar mídia a uma nota

Adicionar uma imagem a uma pesquisa.

Para adicionar uma imagem a uma pesquisa, conclua as etapas a seguir:

  1. Visualizar uma pesquisa no Survey123 Connect.
  2. Na barra de ferramentas na parte inferior, abra a guia Mídia.
  3. Clique em Abrir pasta de mídia e adicione um arquivo de imagem.

    Este arquivo aparecerá na guia Mídia.

  4. Na planilha de pesquisa, adicione uma pergunta de anotação e digite o nome do arquivo da imagem na coluna media::image.

    Os nomes de mídia diferenciam letras maiúsculas e minúsculas.

A imagem é apresentada em uma anotação na pesquisa. Selecione a imagem para abri-la em tela cheia. Selecione o botão Voltar no canto superior esquerdo para retornar à pesquisa.

Adicionar mídia às listas de opções

Você também pode adicionar imagens e áudio às opções para perguntas de select_one e select_multiple, para fornecer mais informações aos usuários sobre cada opção.

Utilizar imagens em uma lista de seleção.

Para adicionar mídia às opções das perguntas de select_one e select_multiple, complete as seguintes etapas:

  1. Visualizar uma pesquisa no Survey123 Connect.
  2. Na barra de ferramentas na parte inferior, abra a guia Mídia.
  3. Clique em Abrir pasta de mídia e adicione os arquivos de imagem e áudio.

    Estes arquivos aparecem na guia Mídia.

  4. Na planilha de opções, adicione uma opção à lista de opções e digite o nome do arquivo de imagem para a opção na coluna media::image.

    Os nomes de mídia diferenciam letras maiúsculas e minúsculas.

  5. Digite o nome do arquivo de áudio para a opção na colunamedia::audio.
  6. Repita as etapas 4 e 5 para as outras opções na lista.

Imagens e clipes de áudio são apresentados ao lado de cada opção para perguntas de select_one e select_multiple que usam essa lista de opções.

Configurações de estilo

As configurações de estilo permitem a você controlar as cores de vários elementos na pesquisa. O painel Estilo está localizado à direita da guia Formulário .

Experimentar com estilos da pesquisa.

Você pode personalizar o texto e as cores de fundo para o cabeçalho, corpo, campos de entrada e rodapé da pesquisa. Clique no botão da paleta para escolher uma cor ou forneça o código de cor hexadecimal ou o nome da cor HTML no campo fornecido. O botão de contraste acima das entradas de cor do texto fornece uma indicação de legibilidade. Clique no botão para visualizar a relação de contraste entre as cores do texto e do plano de fundo; uma proporção abaixo de 4.5 não é recomendada, conforme indicado por um botão de contraste vermelho.

Você também pode usar uma imagem como plano de fundo da pesquisa. O arquivo de imagem que você selecionou como imagem do plano de fundo será copiado para a subpasta de mídia na pasta de projeto da pesquisa.

Grupo, página e cores repetidas

Você pode definir as cores para grupos, páginas e repetições independentemente do estilo geral de pesquisa adicionando os parâmetros backgroundColor e borderColor à coluna body::esri:style. As cores podem ser especificadas por nomes de cores HTML padrão ou códigos de cores hexadecimais. Você pode fornecâ-las como uma constante ou uma referência a uma pergunta. Vários parâmetros são separados por um espaço, por exemplo:

backgroundColor=LightCyan borderColor=#483D8B

Anotação:

Os parâmetros backgroundColor e borderColor não são compatíveis com o aplicativo da web Survey123.

Grupos no estilo de grade não suportam borderColor.

Formatação de HTML

Você pode utilizar a formatação de HTML em rótulos e dicas da pergunta, como também, em rótulos das listas de opções. Aplicar a formatação neste texto pode ajudar a chamar a atenção para informações importantes. A formatação de HTML suportada é como segue:

TagAtributo

a

href, style

abbr

title

audio¹

autoplay, controls, loop, muted, preload

b, strong, i, em, u, ul, ol, li, tbody, br, hr

dd, dl, dt

style

div¹

style, align

figcaption

style

figure

style

font

size, color, style

h1, h2, h3, h4, h5, h6

style

img

src, width, height, border, alt, style

p

style

source¹

media, src, type

span

style

sub

style

sup

style

table

width, height, cellpadding, cellspacing, border, style

td, th

height, width, valign, align, colspan, rowspan, nowrap, style

tr

height, valign, align, style

video¹

autoplay, controls, height, loop, muted, poster, preload, width

¹Suportado apenas no aplicativo da web Survey123.

Anotação:

Links em rótulos de opção não funcionam no Survey123 web app nas seguintes situações:

  • Quando a aparência definida no Survey123 Connect é mínima ou auto completar
  • Ao utilizar o tipo de pergunta classificar no Survey123 Connect
  • Ao utilizar o tipo de pergunta Suspenso ou Classificação no web designer Survey123.

Por padrão, um hiperlink criado com formatação de HTML aberto no aplicativo da web Survey123 abrirá o destino na mesma guia da pesquisa. Para abrir este link em uma nova guia, adicione target="_blank" à tag a href, por exemplo:

<a href="https://www.esri.com" target="_blank">Link to Esri website</a>

A formatação HTML não será exibida nas seguintes áreas do formulário web:

  • Mensagens obrigatórias e de restrição
  • Rótulos de escolha de uma pergunta de seleção externa ou de escolha externa
  • Rótulos de escolha se a ordem de escolha estiver definida para randomizar

Tela de Agradecimento

Uma tela de agradecimento é exibida quando os dados são enviados pelo usuário no aplicativo da web Survey123. Você pode editar essa tela na guia Opções do web designer e usar a edição de texto, incluindo links e imagens.

Anotação:
Para pesquisas projetadas no Survey123 Connect, você pode editar a tela de agradecimento na guia Design > Opções para a pesquisa no site Survey123. Para salvar as alterações, clique em Publicar e confirme.

Você pode adicionar um link à tela de agradecimento que reabrirá a resposta da pesquisa que acabou de ser enviada, no modo de edição ou no modo de visualização. Esses links integrados usam um parâmetro dinâmico globalId para abrir a resposta e permitir que o usuário a edite e reenvie ou a visualize em um estado somente leitura. Clique no botão Link no editor de tela de agradecimento para adicionar um link. Clique no botão Usar um link de pesquisa para adicionar uma URL formatada para editar ou visualizar a resposta da pesquisa.

Adicione o modo de edição e os links do modo de visualização para a tela de agradecimento

Você pode permitir que os usuários enviem uma nova resposta, fornecendo um link na tela de agradecimento no qual os usuários podem clicar para recarregar a pesquisa ou recarregando a pesquisa automaticamente após um atraso especificado. Alternativamente, você pode redirecionar automaticamente para uma URL indicada. O atraso padrão é de 3 segundos. Se o atraso for definido como 0, a tela de agradecimento não será exibida quando a pesquisa for concluída e o redirecionamento ocorrerá imediatamente após a conclusão da pesquisa. O redirecionamento de URL é ignorado quando uma pesquisa é incorporada usando um iframe.

O autoReload Parâmetro de URL tem precedência sobre o atraso definido no web designer Survey123.

Para pesquisas projetadas no Survey123 Connect, você também pode personalizar o conteúdo da tela de agradecimento usando uma pergunta de observação especial no XLSForm. Para mais informações, consulte Personalizar elementos do formulário.