How to create function to automate a dynamic progress bar?

Question

How to create function to automate a dynamic progress bar?

Navigation

#1 by (3 votes)

3

I have a form with some "modules" (module = a set of questions - I do not know if it is the appropriate technical term ...), so that, depending on which module is chosen, a certain amount of questions will be inserted in the form to be answered.

And depending on how many modules have been included, the form will have a certain amount of "pages" (% hidden, which will appear instead of the previous one, as the user advances the questions).

For example:

module 1 = 8 pages - 14 questions

module 2 = 3 pages - 7 questions

module 3 = 20 pages - 27 questions

...

So, just thinking of just a few pages, and imagining only one page for each module to begin the attempt, I did something like this:

<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>

The divs variables are Boolean session variables, which tell you if the module was previously chosen (in $modulo creating the question form, where the user chose which modules ...):

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

But as there are a lot of progress bars (up to 30, depending on how many modules ...), I think this way it will be enough with repeated code, bad reading, etc ...

So the question is:

What is the best way to create a function to automate a dynamic progress bar?

php progress-bar

asked by anonymous 13.12.2015 / 16:45

1 answer

RXTX: balance serial port connection Template and Themes for JSF / Primefaces

score 3 · Accepted Answer

Hi, gustavox,

So I understand, you want the bar to fill before sending the information (via POST or GET), so I do not think I could do it in PHP. Make a call to an external javaScript file, or create the function within the same HTML as you prefer. Now for each form, you leave a button with an onclick="function-in-js ();", this being the function you are going to create.

For the function JS to act on the bar, the simplest way (I know the simple one of JS, do not expect great spectacles of code of me kkkk) is to put the bar being a div with any id, and there in JS voce uses document.getElemetById ("a_id_choose_password_drive").

Now comes the only part where PHP comes in. For example in module1, are 8 pages, you divide the bar into 8 parts ... and so on to others. When the person clicks to enter these modules, you send the information to that php page telling you which module $ module = x. There in the code you put type what you did even, but I think with switch it gets better (in the sense of less code and more readable):

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á...

Then you already know which module the person has accessed. Then just loop to echo inside the div which is the progress bar:

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

This loop inside the div is the progress bar. There in CSS you create a style for incomplete (display: none;) and one for complete. You can instead of div, use list, create progress bar instead of div, an ul. (CSS below)

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;
}

Now the question is, with JS you have to change the class of the list, and as I am not an expert, I would do gambiarra ... I would put there in the loop where the lists would go something like li id="$ divisions + 1 ", and the lists would have id from 1 to the last division. Then with the button with the onclick calling the function, I would create a function with an if inside a 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)

JS I would have to think more, surely there will be people to help in this part better than I do.

But I hope you got the idea.

Embrace