回答後にサマリーが表示される完了画面

<div class="d04-14-12-wrap">
          <form class="d04-14-12-form">
            <p class="d04-14-12-q">サービスは満足でしたか?</p>
            <div class="d04-14-12-choice">
              <button type="button" class="d04-14-12-opt" data-t="満足">満足</button>
              <button type="button" class="d04-14-12-opt" data-t="普通">普通</button>
              <button type="button" class="d04-14-12-opt" data-t="不満">不満</button>
            </div>
            <button type="submit" class="d04-14-12-submit">回答を送信</button>
          </form>
          <div class="d04-14-12-summary">
            <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#22b573" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 12.5l2.7 2.7L16 9.5"/></svg>
            <p class="d04-14-12-stxt">ご回答: <b class="d04-14-12-ans">-</b></p>
            <p class="d04-14-12-thanks">ご協力ありがとうございました。</p>
          </div>
        </div>

.d04-14-12-wrap{position:relative;width:min(280px,100%);min-height:160px;text-align:center}
        .d04-14-12-form{transition:opacity .25s}
        .d04-14-12-q{margin:0 0 12px;font-size:13px;color:#333;font-weight:700}
        .d04-14-12-choice{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
        .d04-14-12-opt{
          padding:8px 12px;font-size:12.5px;font-weight:700;color:#444;
          background:#fff;border:2px solid #d5d9e0;border-radius:8px;cursor:pointer;
          transition:border-color .2s,background .2s,color .2s;
        }
        .d04-14-12-opt.is-active{border-color:#4a6cf7;background:#4a6cf7;color:#fff}
        .d04-14-12-submit{
          padding:10px 18px;font-size:13px;font-weight:700;color:#fff;
          background:#22b573;border:none;border-radius:8px;cursor:pointer;transition:background .2s;
        }
        .d04-14-12-submit:hover{background:#1c9a61}
        .d04-14-12-summary{
          display:none;flex-direction:column;align-items:center;justify-content:center;
          gap:8px;position:absolute;inset:0;
        }
        .d04-14-12-stxt{margin:0;font-size:13px;color:#333}
        .d04-14-12-thanks{margin:0;font-size:12px;color:#8a93a3}
        .d04-14-12-wrap.is-sent .d04-14-12-form{display:none}
        .d04-14-12-wrap.is-sent .d04-14-12-summary{display:flex}

(function(){
        var wrap=document.querySelector('.d04-14-12-wrap');
        if(!wrap)return;
        var opts=wrap.querySelectorAll('.d04-14-12-opt');
        var form=wrap.querySelector('.d04-14-12-form');
        var ansEl=wrap.querySelector('.d04-14-12-ans');
        var chosen='未回答';
        opts.forEach(function(o){
          o.addEventListener('click',function(){
            opts.forEach(function(x){x.classList.remove('is-active');});
            o.classList.add('is-active');
            chosen=o.getAttribute('data-t');
          });
        });
        form.addEventListener('submit',function(e){
          e.preventDefault();
          ansEl.textContent=chosen;
          wrap.classList.add('is-sent');
        });
      })();