Como trazer resultados em cores baseado no valor da soma calculada?

  • Brasil_contato
    Perguntado em 8 de janeiro de 2021 às 07:38

    Bom dia. Estou montando um formulário com um conjunto de perguntas1 que precisam ser interpretados desta forma:

    • Risco Baixo: 80 a 84 (VERDE)
    •    Risco Médio Baixo: 69 a 78 (AMARELO)
    •    Risco Médio Alto: 57 a 68 (LARANJA)
    •    Risco Alto: Abaixo de 56 (VERMELHO)

    E um outro conjunto de perguntas2 que devem ser interpretados assim:

    •    Risco Baixo: 0 (VERDE)
    •    Risco Médio Baixo: 01 a 08 (AMARELO)
    •    Risco Médio Alto: 09 a 17 (LARANJA)
    •    Risco Alto: 18 a 25 (VERMELHA)

    No final, baseado nas cores acima, terei um resultado compilado de todas as perguntas.

    Preciso então converter os resultados em cores e usar IF (CONDIÇÃO), para os resultados finais de cada bloco de perguntas.

    OBS: Meu formulário atual já está calculando resultados

    Pode ajudar?

    Grato

    Jotform Thread 2809653 Screenshot
  • Gustavo_H
    Respondido em 8 de janeiro de 2021 às 11:05

    Olá,


    Note que já enviei uma resposta para você em relação a esse problema nesse outro chamado. Te peço encarecidamente, que mantenhamos a comunicação por lá e que você abra um chamado por dúvida ou ajuda que você precisar. É mais fácil para nós manter apenas um chamado aberto para cada caso, isso evita confusão e nos ajuda a entender os testes feitos pelos nossos colegas anteriormente para te ajudar. Consequentemente, uma possível solução também ocorrerá mais rápido.


    Muito obrigado pela sua compreensão e colaboração.


    Atenciosamente, 😀✨

  • Brasil_contato
    Respondido em 8 de janeiro de 2021 às 11:36

    Gustavo não consigo ver esta reposta. Não tenho autorização. Certeza que fui eu quem perguntei isso?

  • Brasil_contato
    Respondido em 8 de janeiro de 2021 às 11:44
    Boa tarde
    Não estou autorizado a ver este chamado. Acho que deve ser uma pergunta tá de outra conta e não a minha.
    Como acesso esta resposta?
    Grato
    Central de Atendimento
    Esta mensagem, incluindo os seus anexos, destinatários e remetentes, contém informações destinadas a indivíduo e propósito específicos, sendo protegida por Lei. Caso você não seja o citado indivíduo, deve apagar esta mensagem e avisar imediatamente o remetente. As informações contidas nesta mensagem e em seus anexos podem ser confidenciais e são de responsabilidade de seu autor, não representando ideias, opiniões, pensamentos ou qualquer forma de posicionamento por parte da Human Care. É terminantemente proibida a utilização, acesso, cópia ou divulgação não autorizada das informações presentes nesta mensagem, sem autorização expressa do remetente.
    ...
  • Gustavo_H
    Respondido em 8 de janeiro de 2021 às 12:24

    Olá,


    Desculpa pela confusão, a pergunta foi feita por Fernando da conta HumanCareBrasil, porém, o chamado foi configurado como privado, por isso que você não tem acesso. Sendo assim, copio a resposta aqui abaixo.

    ----------------------------------------------------------------------------------------------------------------------------------------------------------------

    Olá, Fernando.


    Posso ver que você já consegue fazer o mais importante que é cálculo de acordo com as respostas escolhidas pelo paciente. Agora você gostaria de mostrar, para cada um desses conjuntos de respostas, o resultado que o paciente obteu, certo? Ou isso seria como o resultado final ADAPTE? O ideal seria você terminar todas sua perguntas e cálculos para que podamos te ajudar o resultado baseado nas cores.

    De toda forma, fiz um exemplo aqui para que você veja como você pode fazer esse processo de mostrar o resultado baseado no resultado do seu cálculo:

    Primeiro, eu usei elementos de Parágrafo para criar a interpretação em cores. Use esse elemento básico para adicionar o texto e alterar cor e tamanho.

    1610119800 5ff87a786adb0  Screenshot 10


    Depois escondi esses parágrafos para que seja mostrado apenas aquele referente ao resultado, assim, criei essa condição lógica, neste gif aqui abaixo te mostro como criar a condição lógica com a minha escala de exemplo.

    1610119918 5ff87aee34943  Screenshot 21


    Você pode testar a página de Equilíbrio de Berg no meu formulário de exemplo. Caso você queira fazer isso para o resultado final, o procedimento é o mesmo.


    Entre em contato se você tiver mais alguma dúvida.


    Atenciosamente,

    ----------------------------------------------------------------------------------------------------------------------------------------------------------------

  • Brasil_contato
    Respondido em 8 de janeiro de 2021 às 22:44
    Show deu muito certo.
    Mas ficou uma dúvida: Se o campo com cores ele é exibido condiiconalmente, No PDF anexo, ele também deveria ir apenas com a cor correta. Noo PDF enviado foi todas as cores. Tem como evitar isso? (vide anexo). Teria que apenas uma cor no PDF ser impressa.
    Grato
    08/01/2021 14:24, Jotform :
    A new response has been received:
    https://www.jotform.com">
    ...
  • Gustavo_H
    Respondido em 9 de janeiro de 2021 às 08:29

    Olá, Brasil_contato.


    Me permite alguns minutos mais e logo retorno a você com uma resposta.


    Muito obrigado pela compreensão.

  • Gustavo_H
    Respondido em 9 de janeiro de 2021 às 09:50

    Olá, novamente,


    Me desculpa pela demora, infelizmente, um pouco complicado de resolver isso. Notei em este chamado recente que o elemento parágrafo ainda não segue a mesma condição lógica do formulário. Assim, se escondemos o campo no formulário, ele segue aparecendo no PDF.

    Depois de muitos ajustes e detalhes creio que encontrei um contorno plausível usando campos de Texto Curto. Você poderia testar esse formulário como todas as possíveis escalas de cores para a pontuação ADAPTE e me dizer se falta algum detalhe? Veja também o PDF que é enviado ao seu email. Me informe também qual estilo da escala no formulário te parece melhor, dessa forma, posso gerar o código CSS aqui. Por exemplo, a escala verde está com bordas grossas e a escala laranja está sem borda.

    Depois dessas informações e de revisar os detalhes te explico passo a passo como reproduzir no seu formulário para as outras escalas. Você também pode clonar o formulário para verificar as condições e configurações feita.

    Guia Completo 👉 como-clonar-um-formulario-de-um-website


    Esperarei sua resposta.


    Atenciosamente,

  • Brasil_contato
    Respondido em 9 de janeiro de 2021 às 12:33
    Achou que deu certo. Veja anexo
    Central de Atendimento
    Esta mensagem, incluindo os seus anexos, destinatários e remetentes, contém informações destinadas a indivíduo e propósito específicos, sendo protegida por Lei. Caso você não seja o citado indivíduo, deve apagar esta mensagem e avisar imediatamente o remetente. As informações contidas nesta mensagem e em seus anexos podem ser confidenciais e são de responsabilidade de seu autor, não representando ideias, opiniões, pensamentos ou qualquer forma de posicionamento por parte da Human Care. É terminantemente proibida a utilização, acesso, cópia ou divulgação não autorizada das informações presentes nesta mensagem, sem autorização expressa do remetente.
    ...
  • Gustavo_H
    Respondido em 9 de janeiro de 2021 às 16:13

    Olá,


    Infelizmente, arquivos anexados no email não são recebidos por nós no Fórum de Suporte. Use o guia abaixo para nos enviar screenshots.

    Guia Completo 👉 Como-Publicar-Capturas-de-Tela-em-Nosso-F-rum-de-Suporte


    Por favor, nos forneça a informação abaixo para gerar o código CSS do estilo preferido.

    Me informe também qual estilo da escala no formulário te parece melhor, dessa forma, posso gerar o código CSS aqui. Por exemplo, a escala verde está com bordas grossas e a escala laranja está sem borda.


    Esperamos sua resposta.


    Atenciosamente,

  • Brasil_contato
    Respondido em 9 de janeiro de 2021 às 21:00
    Por algum motivo estou sem autorização para ver este ticket no browser. Logo não consegui anexar telas.
    Mas fiz o teste.
    - Na tela do formulario use a escala com borda.
    - quando conclui o formulario, pedi para imprimir e a impressão colorida apareceu apenas a escala de resultado.
    - Quando enviei o resultado, tanto o corpo de email, quanto o PDF anexo, veio em preto e branco o que impediu de ver o resultado e cores. Preciso que venha colorido o corpo no email e gere o PDF em colorido.
    Agradeço o apoio
    09/01/2021 18:13, Jotform :
    A new response has been received:
    https://www.jotform.com">
    ...
  • Gustavo_H
    Respondido em 11 de janeiro de 2021 às 08:24

    Olá, novamente,


    Nos desculpa pela demora atípica no tempo de resposta. Pelo que entendi então, apenas falta as cores no corpo do email e no PDF, certo? Essas são alterações que devem ser feitas de maneira manual. Neste GIF te mostro como mostrar cor dentro do corpo do seu email que vai para o usuário do formulário.

    1610371332 5ffc51043cd62  Screenshot 10


    E neste GIF você pode ver que os campos em brancos/ocultos são as escalas e você pode edita-los, assim o PDF será enviado a escala correta para o usuário e com a devida cor.

    1610371307 5ffc50eb1cfe9  Screenshot 21


    Nos deixe saber se falta algo mais, sinta-se livre para fazer mais testes no meu clone do seu formulário. Deixei o campo de cálculo como editável para que você possa simplesmente colocar o valor da escala e que te mostre a cor.


    Tenha um maravilhoso dia 😀✨

  • HumanCareBrasil
    Respondido em 13 de janeiro de 2021 às 13:36

    Boa tarde.

    Tentando entender aqui. Onde estão este códigos CSS. Pois ainda não entendi como o campo em branco está trazendo o restado em cores.


    Obrigado

  • HumanCareBrasil
    Respondido em 13 de janeiro de 2021 às 15:10

    Parte 1 do Email deu certo. A parte 2 do PDF, não consegui achar onde vc edita isso.

    Pode me indicar

    Grato

  • Gustavo_H
    Respondido em 13 de janeiro de 2021 às 18:07

    Olá, HumanCareBrasil.


    Vou te explicar todo o processo a seguir e você poderá aplicar para suas outras escalas. Ok, primeiramente, temos que adicionar campos de Texto Curto que vão mostrar essas escalas de cores. Inicialmente todos esses campos são ocultos.

    1610576136 5fff7108c0612  Screenshot 10


    Depois você aplica condições lógicas para o campo de pontuação de acordo o valor da escala para mostrar e preencher/inserir texto dentro de cada um desses campos.

    CONDIÇÕES LÓGICAS PARA INSERIR TEXTO. Esse é o texto de exemplo: █ Risco Alto: Abaixo de 56 pontos.

    1610576503 5fff72771c62b  Screenshot 21


    CONDIÇÕES LÓGICAS PARA MOSTRAR OS CAMPOS DE ACORDO COM A ESCALA.

    1610576600 5fff72d8a82da  Screenshot 32


    Como te mostrei anteriormente, assim você pode colocar as cores no email enviado.

    1610371332 5ffc51043cd62  Screenshot 43


    Para adicionar a cor no seu PDF, você pode editar os campos de escala. Note que eles estaram inicialmente como um espaço em branco já que eles são campos ocultos no seu formulário.

    1610577092 5fff74c461ad3  Screenshot 54


    Veja o GIF abaixo atentamente para editar as cores desses campos. No meu caso você já verá as configurações de estilo automaticamente porque eu fiz envios anteriores para cada uma dessas escalas.

    1610578013 5fff785dd63a0  Screenshot 65


    Finalmente, no seu formulário, você também pode mudar o estilo dos campos de Texto Curto usando código CSS. Esse aqui é um código de exemplo. Você deve alterar o 190 para o número do seu campo(você pode ver como encontrar isso no GIF abaixo) e green para a cor da escala que você está utilizando(você também pode usar outras cores customizadas com RGB ou HEX. Me deixa saber se você precisa de ajuda nisso). Veja o GIF abaixo para saber onde colocar e alterar o código CSS.

    #input_190 {
     font-size: 18px ;
     border: 5px solid green !important;
     color:green !important;
    }


    1610578615 5fff7ab7c1183  Screenshot 76



    Esse é o meu formulário de exemplo, você pode enviar ele quantas vezes você quiser para testar. Também te recomendo que você clone o formulário para ver de dentro todas as condições criadas, código CSS e os documentos de PDF.

    Guia Completo 👉 como-clonar-um-formulario-de-um-website


    Creio que isso seria tudo. Nos deixa saber se ainda há alguma dúvida ou se esqueci de algum ponto.


    Tudo de bom hoje e sempre!😀✨