Search code examples
javascripthtmlformscounterstatusbar

Form with status bar

On my website I need to make some kind of test. It has 5 questions and a status bar on the end. Each question has 2 possible answers (1 negative and 1 positive).

The status bar indicator starts in the middle and depending on the answers the indicator goes to the left or right.

Example:

    < .  .  .  .  .  |  .  .  .  .  .  >
negative                            positive

I think I can achieve this with some kind of step counter in JavaScript, but I really don't know how to make this.

Please someone help me!

Below is the code of my questions.

<div class ="test">
<form>

<div class="testTitel">Titel1</div>
<div id="demo" class="collapse in">

<input type="radio" name="group1" value="G a"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>
<input type="radio" name="group1" value="G b"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo,#demo2">
  NEXT
</button>
</div>
<div class="testTitel">Titel2</div>
<div id="demo2" class="collapse">

<input type="radio" name="group2" value="F a"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>
<input type="radio" name="group2" value="F b"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo,#demo2">
  BACK
</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo2,#demo3">
  NEXT
</button>
</div>
<div class="testTitel">Titel3</div>
<div id="demo3" class="collapse">

<input type="radio" name="group3" value="O a"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>
<input type="radio" name="group3" value="O b"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo2,#demo3">
  BACK
</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo3,#demo4">
  NEXT
</button>
</div>
<div class="testTitel">Titel4</div>
<div id="demo4" class="collapse">

<input type="radio" name="group4" value="W a"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>
<input type="radio" name="group4" value="W b"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo3,#demo4">
  BACK
</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo4,#demo5">
  NEXT
</button>
</div>
<div class="testTitel">Titel5</div>
<div id="demo5" class="collapse">

<input type="radio" name="group5" value="I a"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>
<input type="radio" name="group5" value="I b"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. <br>

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo4,#demo5">
  BACK
</button>
</div>
</form>
</div>
Solution

  • This is the solution that I worked up based on your question.

    I created a HTML meter element that consisted of a DIV nested inside of another DIV.

    <div id="qust_indicator">
  <div id="dial"></div>
</div>

    I then created some simple styling for the meter. The CSS style that we want to focus on is the #dial margin-left. I will be used to move the dial left and right. 

    #qust_indicator {
    background:blue;
    height: 5px;
    margin: 10px 0;
    width: 340px;
}

#dial {
    background:red;
    height: 10px;
    width: 20px;
    margin-left: 160px;
}

    Using jQuery, this is the code that does all the magic stuff. 

    // create a variable for the form inputs
var $textRadioBtn = $('.test input[type="radio"]');

// radio button click event
$textRadioBtn.click(function () {

    // get the margin-left CSS value of the meeter dail
    var getDialmrLft = $('#dial').css('margin-left');

    // strip out the px from the margin-left CSS value 
    var strDialmrLft = getDialmrLft.replace('px', '');

    // convert the  margin-left CSS value to a number
    var NumDialmrLft = Number(strDialmrLft);

    // get the value of the checkbox ( 1 or 2 )
    var inptVal = this.value;

    // check to see if the checkbox value is 1 and less than the meter max value
    if ( inptVal == 1 && NumDialmrLft < 320 ) {

        // disable the selected checkbox
        $(this).prop('disabled', true);
        // enable the selected checkbox’s siblings
        $(this).siblings('input').prop('disabled', false);

        //set the incrementing value
        var newPos = NumDialmrLft + 20;
        // set the new margin-left CSS value and move the meter dail
        $('#dial').attr('style', 'margin-left:'+newPos+'px');
    // check to see if the checkbox value is 2 and greater than 0 value
    } else if ( inptVal == 2 && NumDialmrLft > 0 ) {

        // disable the selected checkbox
        $(this).prop('disabled', true);
        // enable the selected checkbox’s siblings
        $(this).siblings('input').prop('disabled', false);

        //set the de-incrementing value
        var newPos = NumDialmrLft - 20;
        // set the new margin-left CSS value and move the meter dail
        $('#dial').attr('style', 'margin-left:'+newPos+'px');
    }
});