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样式是#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的最大正余量左边属性。

带状态栏的表单

2 个答案: