Question

我使用javascript和HTML创建问卷表单。我的想法是告诉用户他们有多少问题要去。我已经尝试了几种方法来获得进度条，这使我得到了下面的代码。我希望在用户选择问题答案后，该栏会继续。

这是javascript代码。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script>
var progress = 0;
//need this to check if the question has not been answered before
var questions = {
    "q1": 0,
    "q2":0,
    "q3":0,
    "q4":0
}
$( function() {
    $("#progressbar-1").text(progress)
    $("input, select").change( function() {
        el_name = $(this).attr("name");
        switch (this.nodeName.toLowerCase()) {
            case "select":
            field =$("[name='"+el_name+"']");
            val = (field.val() === ""  || !field.val()) ? null: field.val();
            break;
            case "input":
            field =$("[name='"+el_name+"']:checked");
            val = field.length;
            break;
        }
        if (val) {
            if (!questions[el_name]) {
                progress = progress +1;
                questions[el_name]=1
            }
        } else {
            questions[el_name]=0
            progress = (progress > 0)?progress-1:0;
        }
        $("#progressbar-1").text(progress)
    })
})
</script>

这是HTML代码。

<div class="container-main bg-5">
    <button style="float:left" onclick="goBack()">Go Back</button>

    <h1>What IT sector could suit you</h1>
    <p>Take the questionnaire below!</p>

    <form id="quiz">
        <!-- Question 1 -->
        <h2>Do you enjoy fixing things</h2>
        <!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
        <!-- The value is which answer the choice corresponds to. -->
        <label>
            <input type="radio" name="q1" id="q1" value="c1">
            Yes
        </label><br />
        <label>
            <input type="radio" name="q1" id="q1" value="c2">
            No
        </label><br />
        <label>
            <input type="radio" name="q1" id="q1" value="c3">
            Maybe
        </label><br />


        <!-- Question 2 -->
        <h2>Do you enjoy problem solving?</h2>
        <!-- Here are the choices for the second question. Notice how each input tag has the same name (q2), but a different name than the previous question. -->
        <label>
            <input type="radio" name="q2" value="c2">
            Yes
        </label><br />
        <label>
            <input type="radio" name="q2" value="c1">
            No
        </label><br />
        <label>
            <input type="radio" name="q2" value="c3">
            Unsure
        </label><br />

        <!-- Question 3 -->
        <h2>Do you enjoy maths?</h2>
        <!-- Choices for the third question -->
        <label>
            <input type="radio" name="q3" value="c2">
            Yes
        </label><br />
        <label>
            <input type="radio" name="q3" value="c1">
            No
        </label><br />
        <label>
            <input type="radio" name="q3" value="c3">
            Unsure
        </label><br />


        <!-- Question 4 -->
        <h2>Do you often take thing apart to rebuild them?</h2>
        <!-- Choices for the fourth question -->
        <label>
            <input type="radio" name="q4" value="c1">
            Yes
        </label><br />
        <label>
            <input type="radio" name="q4" value="c2">
            No
        </label><br />
        <label>
            <input type="radio" name="q4" value="c3">
            I have never done it before so i don't know
        </label><br />

        <!--Question 5 -->
        <h2>Hardware or Software?</h2>
        <label>
            <input type="radio" name="q5" value="c1">
            Hardware
        </label><br />
        <label>
            <input type="radio" name="q5" value="c2">
            Software
        </label><br />

        <button type='button' id="submit" onclick="tabulateAnswers()">Submit Your Answers</button>
        <button type="reset" id="reset" onclick="resetAnswer()">Reset</button>
    </form>

    <div id ="progressbar-1"></div>

</div>

这个数字正在增加，但没有发生CSS。我觉得我没有做一些明显的事情。

Answer 1

我更新了您的进度条HTML，JavaScript代码并添加了一些CSS。

进度条HTML：

<div class="progress_dashv2">
    <div  id="progressbar-1"> </div>                                                               
</div>

JQuery代码：

var total_questions = 4;

// progress bar Calculation
var result =  progress / total_questions;
result = result * 100;

$("#progressbar-1").css({'width':result+'%','background-color':'red'});
$("#progressbar-1").text(progress);

CSS类：

.progress_dashv2 {
    margin-top: 0px;
    background: #464646;
    width: 100%;
    float: left;
    border-radius: 3px;
    height: 30px;
}

#progressbar-1{
    line-height: 11px;
    padding: 10px;
    border-radius: 3px;
}

请参阅以下链接（您的示例）：

https://jsfiddle.net/fd8sntu8/1/

进度条不适用于HTML页面

1 个答案: