進捗バー連動アンケートフォーム

<div class="d04-14-02-wrap">
          <p class="d04-14-02-q">Q2. 当サービスをどこで知りましたか?</p>
          <div class="d04-14-02-bar"><span class="d04-14-02-fill"></span></div>
          <span class="d04-14-02-count">2 / 5</span>
          <div class="d04-14-02-nav">
            <button type="button" class="d04-14-02-prev">戻る</button>
            <button type="button" class="d04-14-02-next">次へ</button>
          </div>
        </div>

.d04-14-02-wrap{width:min(280px,100%);text-align:center}
        .d04-14-02-q{margin:0 0 14px;font-size:13px;color:#333;font-weight:700;min-height:34px}
        .d04-14-02-bar{height:8px;border-radius:4px;background:#e4e8ef;overflow:hidden}
        .d04-14-02-fill{display:block;height:100%;width:40%;border-radius:4px;background:#4a6cf7;transition:width .35s ease}
        .d04-14-02-count{display:block;margin:8px 0 16px;font-size:11px;color:#8a93a3}
        .d04-14-02-nav{display:flex;justify-content:center;gap:10px}
        .d04-14-02-nav button{
          padding:9px 16px;font-size:13px;font-weight:700;border-radius:8px;cursor:pointer;
          border:2px solid #d5d9e0;background:#fff;color:#444;transition:opacity .2s;
        }
        .d04-14-02-nav .d04-14-02-next{background:#4a6cf7;border-color:#4a6cf7;color:#fff}
        .d04-14-02-nav button:disabled{opacity:.4;cursor:not-allowed}

(function(){
        var wrap=document.querySelector('.d04-14-02-wrap');
        if(!wrap)return;
        var fill=wrap.querySelector('.d04-14-02-fill');
        var count=wrap.querySelector('.d04-14-02-count');
        var q=wrap.querySelector('.d04-14-02-q');
        var prevBtn=wrap.querySelector('.d04-14-02-prev');
        var nextBtn=wrap.querySelector('.d04-14-02-next');
        var qs=[
          'Q1. ご利用の頻度を教えてください',
          'Q2. 当サービスをどこで知りましたか?',
          'Q3. 満足度を5段階で教えてください',
          'Q4. 改善してほしい点はありますか?',
          'Q5. 友人に薦めたいと思いますか?'
        ];
        var total=qs.length,cur=1;
        function paint(){
          fill.style.width=Math.round((cur/total)*100)+'%';
          count.textContent=cur+' / '+total;
          q.textContent=qs[cur-1];
          prevBtn.disabled=cur===1;
          nextBtn.textContent=cur===total?'完了':'次へ';
        }
        prevBtn.addEventListener('click',function(){ if(cur>1){cur--;paint();} });
        nextBtn.addEventListener('click',function(){ if(cur<total){cur++;paint();} });
        paint();
      })();