How to create function to automate a dynamic progress bar?

Question

I have a form with some "modules" (module = a set of questions - I do not know if it is the appropriate technical term...), so 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" (divs hidden, that will arise in place of the previous, as the user advances in the questions).

For example:

• module 1 = 8 pages - 14 questions
• module 2 = 3 pages - 7 questions
• module 3 = 20 pages - 27 questions
• ...

So, thinking for now just amount of pages, and imagining only one page for each module to start the attempt, I did something more or less 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 variables $modulo are boolean session variables, which indicate whether the module has been chosen previously (in a form that creates 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 many progress bars (up to 30, depending on how many modules...), I think that this way will be enough to repeat code, bad to read, etc...

So the question is:

How best to create a function to automate a dynamic progress bar?

Answer 1

Hi, Gustavox,

From what I understand, you want the bar to be filled out before sending the information (via POST or GET), so I don’t think I could do it in PHP. Make a call to an external Java file, or create the function within the HTML itself, as you prefer. Now for each form, you leave a button with an onclick="funcao-em-js();", this being the function that Voce will create.

For the JS function to act on the bar, the simplest way (I know the simple JS, do not expect large shows of code from me kkkk) is to put the bar being a div with any id, and there in JS Voce uses Document.getElemetById("a_id_chooseida_pra_div_da_barra_de_progress").

Now comes the only part where PHP enters. For example in Módulo1, there 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 this php page saying which module $modulo = x. There in the code you put type that you did even, but I think with switch is 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 know which module the person accessed. Then just make a 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 which is the progress bar. There in CSS you create an incomplete style (display: None;) and a complete one. You can instead of div, use list, create progress bar instead of div, a 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 since I am not an expert, I would do the trick... put there in the loop where the lists would come out something like li id="$divisoes+1", and the lists would have id 1 until the last division. Then with the onclick button 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)

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

But I hope you’ve made your point.

Hug