php - How to adjust the width of the Bootstrap progress bar and fully utilize the bar?

one text

Solution:

If there are only 18 questions, at some point, you should be dividing the number of questions answered by 18 and multiplying that value by 100 to get the percentage width you’re looking for, so something like this:

function getProgress() {
    return document.getElementById("progressbar").getAttribute("aria-valuenow");

    /*return document.getElementById("progressbar").getAttribute("style", "width");
    return document.getElementById("progressbar").innerHTML;*/
}

function setProgress(value) {
    var percent = value / 18 * 100;
    document.getElementById("progressbar").setAttribute("aria-valuenow", value);

    document.getElementById("progressbar").setAttribute("style", "width: " + percent + "%");
    document.getElementById("progressbar").innerHTML = (value);
}

function increment() {
    var i = getProgress();
    if (i < 18) {
        i++;
        setProgress(i);
    }
    
    if (i === 18) {
        alert("Progress Complete!");
    }
}

function decrement() {
    var d = getProgress();
    setProgress(d - 1);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="1" aria-valuemax="18" id="progressbar"></div>
</div>

<div class="progress"></div>
<input type="button" value="Next" onclick="increment()" />

Source