带状态栏的表格

Question

在我的网站上我需要进行某种测试。它最后有5个问题和一个状态栏。每个问题有两个可能的答案（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样式是#dial margin-left。我将用于左右移动拨号盘。

#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的宽度是340px，拨号是20px。因此，条件if语句正在为拨号寻找320px的最大正边空白属性。