3

Tenho um formulário com alguns "módulos" (módulo = um conjunto de perguntas - não sei se é o termo técnico adequado...), de forma que, dependendo de qual módulo for escolhido, uma certa quantidade de perguntas será inserida no formulário a ser respondido.

E dependendo de quantos módulos foram incluídos, o formulário terá uma certa quantidade de "páginas" (divs ocultas, que vão surgindo no lugar da anterior, conforme o usuário avança nas perguntas).

Por exemplo:

  • módulo 1 = 8 páginas - 14 perguntas
  • módulo 2 = 3 páginas - 7 perguntas
  • módulo 3 = 20 páginas - 27 perguntas
  • ...

Então, pensando por enquanto apenas quantidade de páginas, e imaginando apenas uma página para cada módulo para começar a tentativa, fiz algo mais ou menos assim:

<div class="col-md-10">
<?php

    if (!$modulo1 && !$modulo2 && $modulo3) {
        echo "  <div class='progress'>
    <div class='progress-bar progress-bar-info' role='progressbar' style='width:30%'>   30%
    </div>
</div>";
    }
    elseif (!$modulo1 && $modulo2 && $modulo3) {
        echo " <div class='progress'>
    <div class='progress-bar progress-bar-info' role='progressbar' style='width:20%'>   20%
    </div>
</div>
    ";
    }
    elseif ($modulo1 && $modulo2 && $modulo3) {
        echo " <div class='progress'>
    <div class='progress-bar progress-bar-info' role='progressbar' style='width:10%'>   10%
    </div>
</div>
    ";
    }
?>
</div>

As variáveis $modulo são variáveis de sessão booleanas, que informam se o módulo foi escolhido anteriormente (num form que cria o formulário das perguntas, onde o usuário escolheu quais módulos...):

if (isset($_POST['modulo1'])) {
    $modulo1 = $_POST['modulo1'];
    $_SESSION['modulo1'] = $modulo1;
} else {
    $modulo1 = false;
    $_SESSION['modulo1'] = false;
}

Mas como são muitas barras de progresso (até 30, dependendo de quantos módulos...), acho que desse jeito vai ficar bastaaante código repetido, ruim de ler, etc...

Então a pergunta é:

Qual a melhor forma de criar uma função para automatizar uma barra de progresso dinâmica?

16
  • Então, não entendi @GuilhermeNascimento. Você quer dizer se atualiza no navegador? Se for isso não, é sem Ajax... nem JS... depois que o user escolhe os módulos, ficam gravadas essas variáveis $modulo, e à partir delas sei qual a porcentagem que deve aparecer, daí comecei a fazer do jeito acima, meio no braço hehe...
    – gustavox
    13/12/2015 às 16:02
  • Variáveis são instâncias temporárias, uma vez atualizada a página elas desaparecem, ou têm o valor modificado.
    – Edilson
    13/12/2015 às 16:04
  • @GuilhermeNascimento Realmente é o que parece.
    – Edilson
    13/12/2015 às 16:10
  • 1
    Quando tiver tempo, se ainda não haver uma solução para o problema, eu respondo.
    – Edilson
    13/12/2015 às 18:08
  • 1
    Então gustavo é que eu e o o @Edilson nos confundimos porque a palavra Modulos é um pouco abstrata e pode significar qualquer coisa, mas esta bem claro agora sim :)
    – Syzoth
    13/12/2015 às 18:10

1 Resposta 1

3

Oi, gustavox,

Pelo que entendi, você quer que a barra vá se preenchendo antes de enviar as informações (via POST ou GET), então acho que não daria pra fazer em PHP. Faça uma chamada a um arquivo javaScript externo, ou crie a função dentro do HTML mesmo, como preferir. Agora pra cada formulário, você deixa um botão com um onclick="funcao-em-js();", sendo essa a função a que voce vai criar.

Para a função JS atuar sobre a barra, o jeito mais simples (conheço o simples de JS, não espere grandes espetáculos de código de mim kkkk) é colocar a barra sendo uma div com um id qualquer, e lá no JS voce usa document.getElemetById("a_id_escolhida_pra_div_da_barra_de_progresso").

Agora vem a única parte em que o PHP entra. Por exemplo no módulo1, são 8 páginas, você divide a barra em 8 partes... e assim pras outras. Quando a pessoa clicar pra entrar nesses módulos, você envia a informação pra essa página php dizendo qual o módulo $modulo = x. Aí lá no código você põe tipo isso que você fez mesmo, mas acho que com switch fica melhor (no sentido de menos código e mais legível):

switch ($modulo){
    case 1:
        $divisoes = 8;
        break;
    case 2:
         $divisoes = 3;
        break;
    //o resto dos casos...
    default:
    //bota uma mensagem de erro, caso a pessoa entre nos módulos de maneira errada, sei lá...

Aí você já sabe qual módulo a pessoa acessou. Depois é só fazer um loop pra echo dentro da div que é a barra de progresso:

for ($k = 0; $k < $divisoes; $k++) {
   echo "<div class='incompleta'></div>";
}

Esse loop dentro da div que é a barra de progresso. Lá no CSS você cria um estilo pra incompleta (display: none;) e uma pra completa. Você pode ao inves de div, usar lista, cria a barra de progresso ao invés de div, uma ul. (CSS abaixo)

ul#barra_de_progresso {
   list-style-type: none;
   display: inline;
}
ul#barra_de_progresso li {
   margin: 0;
}
.incompleto {
   background-color: transparent;
}
.completo {
    background-color: a-cor-da-barra-preenchida;
}

Agora a questão é, com o JS você tem que alterar a classe da lista, e como não sou expert, eu faria gambiarra... colocaria lá no loop onde sairiam as listas algo como li id="$divisoes+1", e as listas teriam id de 1 até a última divisão. Aí com o botão com o onclick chamando a função, eu criaria uma função com um if dentro de um loop.

function funcao_aqui() {
   var p;
   var divisao;
   var max;
//
for (p = 0; p < max; p++) {
   if (a divisao já tem class="completo")
      faz nada
   else 
      muda a classe para completo
      p = max (pra parar o loop)

O JS eu teria que ficar pensando mais, com certeza terá gente pra ajudar nessa parte melhor que eu.

Mas espero que tenha dado pra entender a ideia.

Abraço

2
  • Valeu Enrique, to olhando aqui... eu fiz uns comentários na pergunta agora, explicando como pego as variáveis (que são de sessão), e assim pego na template se ela foi setada ou não, e daí se foi, coloco uma %, senão coloco outra... acho que o que estou procurando é justamente uma função com for e/ou switch... sei lá... ainda sou iniciante em PHP, então vou pensar um pouco aqui hehe... Valeu! +1
    – gustavox
    13/12/2015 às 18:17
  • Então, sua resposta me fez perceber que estava mesmo viajando em tentar fazer isso com PHP, já que com JavaScript/jQuery é infinitamente mais simples, e a escolha nos checkboxes na página anterior é irrelevante, já que o JS vai correr o DOM e pegar todos os inputs preenchidos... resultado: além de ser muito mais simples, vai ficar muito mais perfeito (as porcentagens reais), atualizar em tempo real, e só vou ter uma única barra por formulário (e não 30+ rsrs). Como estou usando o Bootstrap, decidi usar este bootsnip como base.
    – gustavox
    16/12/2015 às 19:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .