jsで診断コンテンツのページ内切り替えについて

Question

実現したいこと

質問に合った動作をするようにしたいです

前提

とあるサイトを参考に、ソースまでは作ってみたのですが、jsについては難易度が高すぎて先に進めずつまずいております。どなたかご教授いただけませんでしょうか。
jsの知識が乏しいのでどうかよろしくお願いいたします。

希望の動作ができれば嬉しいので、下記の参考ページのjsの書き方が大幅に変更されても構いません。

【内容】
質問数：４段階
Q１の選択数：２⇒1か２選択で「次へ」ボタンが押せるようになりQ２へ

Q２の選択数：３⇒１～３どれか選択で「次へ」ボタンが押せるようになりQ３へ

Q３の選択数：３⇒１～３どれか選択すると、選択項目の下に隠しているコンテンツ（１種類）が表示され「次へ」ボタンが押せるようになりQ４へ

Q４の選択数：４⇒１～４どれか選択すると、選択項目の下に選択に合った内容のコンテンツ(これも最初は隠したいです)が表示され「次へ」ボタンが押せるようになり最後のサンクス表示

参考ページのjsです

$((function() {
    $('a[href^="#"]').click((function() {
        var t = $(this).attr("href")
          , e = ($(".header_inner").height(),
        $("#" == t || "" == t ? "html" : t).offset().top);
        return $("body,html").animate({
            scrollTop: e
        }, 400, "swing"),
        !1
    }
    ))
}
)),
$((function() {
    var t;
    "?cnt=all" == location.search && ($(".q-1text").show(),
    $("#q2").show(),
    $(".q2-02").show(),
    $(".q2_text").show(),
    $(".q2-toggle-box").show(),
    $("#q3").show(),
    $(".q3-toggle-box").show(),
    $(".q3-content").show(),
    $("#result").show(),
    $(".result_text").show());
    var e = 1;
    $(".form input").change((function() {
        2 == e ? function(t) {
            var e = "";
            switch (t) {
            case "q2-1":
                e = ".q2_text01";
                break;
            case "q2-2":
                e = ".q2_text02";
                break;
            case "q2-3":
                e = ".q2_text03"
            }
            if ($(".q2-toggle-box").hasClass("toggle-active")) {
                $(".q2-toggle-box").hide(),
                $elem = $(".q2_text"),
                $elem.each((function() {
                    var t = $(this);
                    t.hasClass("q2text-active") && (t.removeClass("q2text-active"),
                    t.hide())
                }
                )),
                $(e).show(),
                $(e).addClass("q2text-active");
                setTimeout((function() {
                    $(e).show(),
                    $(".q2-toggle-box").slideToggle()
                }
                ), 200)
            } else
                $(".q2-toggle-box").slideToggle(),
                $(".q2-toggle-box").addClass("toggle-active"),
                $(e).show(),
                $(e).addClass("q2text-active")
        }($(t).val()) : form_name = "#q-" + e.toString() + " input:checked";
        var a = $(form_name).val();
        3 == e && function(t) {
            var e = "";
            switch (t) {
            case "q3-1":
                e = ".q3-toggle_01";
                break;
            case "q3-2":
                e = ".q3-toggle_02";
                break;
            case "q3-3":
                e = ".q3-toggle_03";
                break;
            case "q3-4":
                e = ".q3-toggle_04"
            }
            if ($(".q3-toggle-box").hasClass("toggle-active")) {
                $(".q3-toggle-box").hide(),
                $elem = $(".q3-content"),
                $elem.each((function() {
                    var t = $(this);
                    t.hasClass("q3-content-active") && (t.removeClass("q3-content-active"),
                    t.hide())
                }
                ));
                setTimeout((function() {
                    $(e).show(),
                    $(e).addClass("q3-content-active"),
                    $(".q3-toggle-box").slideToggle()
                }
                ), 200)
            } else
                $(".q3-toggle-box").slideToggle(),
                $(".q3-toggle-box").addClass("toggle-active"),
                $(e).show(),
                $(e).addClass("q3-content-active")
        }(a);
        var s = $(form_name).length
          , o = "_off"
          , i = "#btn-q" + e.toString() + " img"
          , c = "#btn-q" + e.toString();
        return $btn = $(i),
        0 == s ? ($btn.attr("src", $btn.attr("src").replace("_on", o)),
        $(c).removeClass("active")) : ($btn.attr("src", $btn.attr("src").replace(o, "_on")),
        $(c).addClass("active")),
        !1
    }
    )),
    $(".q-btn").click((function() {
        if ($(this).hasClass("active")) {
            var a, s = "#q" + e.toString();
            a = 2 == e ? t : "#q-" + e.toString() + " input:checked";
            var o = $(a).val();
            1 == e && function(e) {
                var a = ""
                  , s = "";
                switch (e) {
                case "q1-1":
                    t = "#q-2_1 input:checked",
                    s = ".q2-01",
                    a = ".result_01";
                    break;
                case "q1-2":
                    t = "#q-2_2 input:checked",
                    s = ".q2-02",
                    a = ".result_02",
                    $(".q2-02").show();
                    break;
                case "q1-3":
                    t = "#q-2_3 input:checked",
                    s = ".q2-03",
                    a = ".result_03"
                }
                $(s).show(),
                $(a).show()
            }(o);
            var i = e + 1
              , c = "#q" + i.toString();
            4 == i && (c = "#result"),
            $(s).fadeOut(100, (function() {
                $(s).hide(),
                e++
            }
            ));
            setTimeout((function() {
                $(c).fadeIn(200);
                var t = $("#header").offset().top;
                $("html, body").animate({
                    scrollTop: t
                }, 500, "swing")
            }
            ), 200)
        }
    }
    )),
    $(".casestudy_btn").click((function() {
        $(this).next("div").slideToggle(500),
        $(this).toggleClass("open")
    }
    )).next().hide(),
    $(".tabs li").click((function() {
        $(".tabs li").removeClass("active"),
        $(this).addClass("active");
        let t = $(this).index();
        $(".tab-cont").removeClass("active"),
        $(".tab-cont").eq(t).addClass("active")
    }
    ))
}
));

特に困っていること

上記のjsを元に、ところどころ触ってはみましたものの
Q１で「no」を選択するとQ２で選択後「次へ」の動作が効かず、Q３の内容が全て見えてしまったりと、どこをどうしたら良いのかわからなくなってしまいました。
（上記のjsは参考ページのまんまに戻した状態です）

Answer 1

<script>
document.addEventListener('change',({target})=>{
  if(target.matches('.q')){
    target.closest('fieldset').querySelector('.next').disabled=false;
  }
});
document.addEventListener('click',({target})=>{
  if(target.matches('.next')){
    target.closest('fieldset').nextElementSibling.classList.remove('hide');
  }
});
</script>
<style>
.hide{display:none;}
</style>
<fieldset>
<legend>Q1</legend>
<label><input type="radio" name="q1" value="1" class="q">1</label>
<label><input type="radio" name="q1" value="2" class="q">2</label>
<input type="button" class="next" value="next" disabled>
</fieldset>
<fieldset class="hide">
<legend>Q2</legend>
<label><input type="radio" name="q2" value="1" class="q">1</label>
<label><input type="radio" name="q2" value="2" class="q">2</label>
<label><input type="radio" name="q2" value="3" class="q">3</label>
<input type="button" class="next" value="next" disabled>
</fieldset>
<fieldset class="hide">
<legend>Q3</legend>
<label><input type="radio" name="q3" value="1" class="q">1</label>
<label><input type="radio" name="q3" value="2" class="q">2</label>
<label><input type="radio" name="q3" value="3" class="q">3</label>
<input type="button" class="next" value="next" disabled>
</fieldset>
<fieldset class="hide">
<legend>Q4</legend>
<label><input type="radio" name="q4" value="1" class="q">1</label>
<label><input type="radio" name="q4" value="2" class="q">2</label>
<label><input type="radio" name="q4" value="3" class="q">3</label>
<label><input type="radio" name="q4" value="4" class="q">4</label>
<input type="button" class="next" value="next" disabled>
</fieldset>
<div class="hide">thanks!</div>

調整

Q3とQ4を選んだときに説明を表示

<script>
document.addEventListener('change',({target})=>{
  if(target.matches('.q')){
    target.closest('fieldset').querySelector('.next').disabled=false;
    target.closest('fieldset').querySelector('.active')?.classList.remove('active');
    if(target.matches('[data-id]')) document.querySelector(target.dataset.id)?.classList.add('active');
  }
});
document.addEventListener('click',({target})=>{
  if(target.matches('.next')){
    target.closest('fieldset').nextElementSibling.classList.remove('hide');
  }
});
</script>
<style>
.hide:not(.active){display:none;}
</style>
<fieldset>
<legend>Q1</legend>
<label><input type="radio" name="q1" value="1" class="q">1</label>
<label><input type="radio" name="q1" value="2" class="q">2</label>
<input type="button" class="next" value="next" disabled>
</fieldset>
<fieldset class="hide">
<legend>Q2</legend>
<label><input type="radio" name="q2" value="1" class="q">1</label>
<label><input type="radio" name="q2" value="2" class="q">2</label>
<label><input type="radio" name="q2" value="3" class="q">3</label>
<input type="button" class="next" value="next" disabled>
</fieldset>
<fieldset class="hide">
<legend>Q3</legend>
<label><input type="radio" name="q3" value="1" data-id="#q3-1" class="q">1</label>
<label><input type="radio" name="q3" value="2" data-id="#q3-2" class="q">2</label>
<label><input type="radio" name="q3" value="3" data-id="#q3-3" class="q">3</label>
<input type="button" class="next" value="next" disabled>
<div id="q3-1" class="hide">1が選ばれました</div>
<div id="q3-2" class="hide">2が選ばれました</div>
<div id="q3-3" class="hide">3が選ばれました</div>
</fieldset>
<fieldset class="hide">
<legend>Q4</legend>
<label><input type="radio" name="q4" value="1" data-id="#q4-1" class="q">1</label>
<label><input type="radio" name="q4" value="2" data-id="#q4-2" class="q">2</label>
<label><input type="radio" name="q4" value="3" data-id="#q4-3" class="q">3</label>
<label><input type="radio" name="q4" value="4" data-id="#q4-4" class="q">4</label>
<input type="button" class="next" value="next" disabled>
<div id="q4-1" class="hide">1が選ばれました</div>
<div id="q4-2" class="hide">2が選ばれました</div>
<div id="q4-3" class="hide">3が選ばれました</div>
<div id="q4-4" class="hide">4が選ばれました</div>
</fieldset>
<div class="hide">thanks!</div>

Comments

[h2h1h8h6]

早速ご回答くださりありがとうございます！
この内容で質問項目はスムーズになるかと思います。
あと、恐れ入りますが、内容に書きましたのが伝わりづらく申し訳ございません。Q3とQ4の選択項目クリックで隠している内容を表示したいです。
この部分もよろしくお願い致します。

[h2h1h8h6]

ありがとうございます！
度々で大変恐れ入りますが、Q3までは質問ごとに分岐させたかったのですが、どのようにすればよろしいでしょうか？

[h2h1h8h6]

あ！失礼いたしました、回答ごとに分岐の間違いです。
もし回答いただけましたらよろしくお願い致します。

[h2h1h8h6]

yambejp様
先日はいろいろとご教授いただきありがとうございました。
分岐のところ、できるまで頑張ってみます。
また何かの際は、恐れ入りますがどうぞよろしくお願いいたします。