Comment créer une barre de progression dans une campagne ?

Voici les différentes étapes pour créer une barre de progression à l’aide de HTML, CSS et JavaScript :

Étape 1 : Ajoutez le code HTML pour créer la base de votre barre de progression

Ajoutez ce code HTML dans l’onglet HTML de l’étape Apparence :

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

Étape 2 : Utilisez ce code CSS pour styliser la barre de progression

Ajoutez ce code CSS dans l’onglet CSS de l’étape Apparence :

.bar-wrapper{
   display: none;
   flex-direction: column;
   align-items: center;
}
        
.questionset .bar-wrapper{
   display: flex;
}
                    
.progress-bar{
  /*couleur de fond*/
   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{
   /*couleur de la barre de progression*/
   background: #dc5f0e;
   border-radius: 100px;
   height: 17px;
   width: 0;
   transition: width 0.6s ease-in-out;
}

Étape 3 : Ajoutez le JavaScript pour animer votre barre de progression

Ensuite, ajoutez ce code JavaScript pour permettre à votre barre de progression de s’animer d’une question à l’autre.

Dans la bibliothèque de tags, créez un nouveau tag nommé :

progress_bar

Puis, ajoutez ce code JavaScript dans la section body :

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);

// Récupère la progression précédente depuis le sessionStorage
var prevPercent = parseInt(sessionStorage.getItem('progressPercent')) || 0;

// Applique d'abord la largeur précédente (pour créer l'effet "point de départ")
progressBars.css('width', prevPercent + '%');

// Petite pause pour laisser le DOM appliquer la première largeur, puis anime vers la nouvelle
setTimeout(function () {
 progressBars.css('width', currentPercent + '%');
}, 50);

// Stocke la nouvelle valeur pour l’étape suivante
sessionStorage.setItem('progressPercent', currentPercent);

// Déplace la barre dans le quiz
$('.bar-wrapper').appendTo('.quizz');

Étape 4 : Appliquez le tag JavaScript dans votre campagne

Enfin, sélectionnez le tag dans l’onglet JavaScript de l’étape Apparence.

Avec ces différentes étapes, vous obtiendrez une barre de progression pour votre questionnaire, ce qui aidera l’utilisateur à visualiser son avancement au fil de la campagne.