How to create a Progress Bar in your campaign ?

Here are the steps to create a progress bar using HTML, CSS, and JavaScript:

Step 1: Add the HTML code to create the base of your progress bar

Paste the following HTML code into the HTML tab under the look&feel step:

<div class="bar-wrapper">
    <div class="progress-bar">
        <div class="progress">
    </div>
</div>

Step 2: Use this CSS to style the progress bar

Paste the following CSS into the CSS tab under the look&feel step:

.bar-wrapper{
	display: none;
    flex-direction: column;
    align-items: center;
}
		
.questionset .bar-wrapper{
	 display: flex;
}
					
.progress-bar{
	/*background color*/
    background-color: #f2f3f7;
    border-radius: 100px;
    box-shadow: 0 1px 5px rgba(136,86,97, 0.5);
    margin: 15px;
    height: 17px;
    width: 500px;
    max-width: 100%;
}

.progress{
	/*progress bar color*/
    background: #dc5f0e;
    border-radius: 100px;
	height: 17px;
    width: 0;
	transition: width 0.6s ease-in-out;
}

Step 3: Add JavaScript to animate your progress bar

Now add the following JavaScript code to animate the progress bar as the user moves through the steps.

In your tag library, create a new tag named:

progress_bar

Then paste the following JavaScript code into the body section:

<script>
var stepText = $('.step_number').text().trim();
var [stepNbr, totalSteps] = (stepText.match(/\d+/g) || []).map(Number);

var progressBars = $('.progress');
var currentPercent = Math.round((stepNbr / totalSteps) * 100);

// Retrieves previous progress from sessionStorage
var prevPercent = parseInt(sessionStorage.getItem('progressPercent')) || 0;

// Apply the previous width first (to create the "starting point" effect)
progressBars.css('width', prevPercent + '%');

// Short pause to let the DOM apply the first width, then animate to the new one
setTimeout(function () {
  progressBars.css('width', currentPercent + '%');
}, 50);

// Stores the new value for the next stepsessionStorage.setItem('progressPercent', currentPercent);

// Move the bar in the quiz
$('.bar-wrapper').appendTo('.quizz');
</script>

Step 4: Apply the JavaScript tag to your campaign

Finally, select the JavaScript tag in the JavaScript tab of the look&feel step.

With these steps, you’ll have a working progress bar in your quiz that helps users visually track their progress throughout the campaign.