Форма со статусной строкой

Question

На моем веб-сайте мне нужно сделать какой-то тест. У него есть 5 вопросов и строка состояния в конце. Каждый вопрос имеет 2 возможных ответа (1 отрицательный и 1 положительный).

Индикатор строки состояния начинается посередине и в зависимости от ответов индикатор идет влево или вправо.

Пример:

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

Я думаю, что я могу добиться этого с какой-то счетчик шагов в JavaScript, , но я действительно не знаю, как сделать это.

Пожалуйста, помогите мне!

Ниже приведен код моих вопросов.

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

Answer 1

Это решение, которое я разработал на основе вашего вопроса.

Я создал элемент HTML-метра, который состоял из DIV, вложенного внутри другого DIV.

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

Я тогда создал несколько простых моделей для измерителя. Стиль CSS, на который мы хотим сосредоточиться, - это поле с полем #. Я буду использовать для перемещения диска влево и вправо.

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

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

Использование jQuery - это код, который делает все магические вещи.

// 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'); 
    } 
});  

Answer 2

По моему мнению, вы хотели использовать индикатор состояния. Это будет означать перемещение панели влево или вправо на основе ответов на вопрос. Если вы ответите на более позитивный ответ, тогда циферблат будет дальше в этом направлении. Я отрицательный ответ помещается в процесс, тогда циферблат будет более одного места с отрицательной стороны, но все же будет в положительной области, пока не будет больше отрицательных ответов, чем положительных.

вы можете увеличить количество тиков в соответствии с количеством вопросов, которые у вас есть, умножив общую площадь индикатора за вычетом ширины циферблата. в моем примере ширина # qust_indicator равна 340 пикселей, а циферблат - 20 пикселей. Таким образом, оператор условного if ищет максимальное положительное свойство margin-left 320px для циферблата.