診断テストで問題を1問ずつ表示させる方法

Question

得点式の診断テストを作成しているのですが、いまの状態だと問題が1ページに全部表示されてしまっているので、1問回答すると前の問題が消えて次の問題が出て、最後にの5問目のところに評価のボタンを起きたいのですが、どうすればいいのでしょうか？また、1問ごとに画像を差し込みたいのですが（画像も次の問題が表示される時に変わるように）、方法が分かりません。お力を貸していただけると幸いです。

window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#btn').disabled=true;
  document.querySelector('#btn').addEventListener('click',()=>{
    const point=[...document.querySelectorAll('.q:checked')].map(x=>parseInt(x.value)).reduce((x,y)=>x+y);
    alert(point);
  });
});
document.addEventListener('change',()=>{
  if(document.querySelectorAll('.q:checked').length>=5){
    document.querySelector('#btn').disabled=false;
  }
});
</script>
<form>
<fieldset>
<legend>Q1</legend>
<label><input type="radio" name="q1" class="q" value="10">A</label>
<label><input type="radio" name="q1" class="q" value="5">B</label>
</fieldset>
<fieldset>
<legend>Q2</legend>
<label><input type="radio" name="q2" class="q" value="10">A</label>
<label><input type="radio" name="q2" class="q" value="5">B</label>
</fieldset>
<fieldset>
<legend>Q3</legend>
<label><input type="radio" name="q3" class="q" value="10">A</label>
<label><input type="radio" name="q3" class="q" value="5">B</label>
</fieldset>
<fieldset>
<legend>Q4</legend>
<label><input type="radio" name="q4" class="q" value="10">A</label>
<label><input type="radio" name="q4" class="q"s value="5">B</label>
</fieldset>
<fieldset>
<legend>Q5</legend>
<label><input type="radio" name="q5" class="q" value="10">A</label>
<label><input type="radio" name="q5" class="q" value="5">B</label>
</fieldset>
<input type="button" value="評価" id="btn">
</form>

Answer 1

１問ごとに表示を変える場合は１問ごとに確定作業が必要です
一応最後に全部の回答履歴を表示するようにしておきました
（余計でしたら※1の行をコメントアウトしてください）

<style>
fieldset:not(.active),#btn:not(.active){
display:none;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('fieldset').classList.add('active');
  document.querySelectorAll('.kakutei').forEach(x=>x.disabled=true);
});
window.addEventListener('pageshow',()=>{
  const flg=window.performance.navigation.type;
  if(flg==1){ // リロード対策
    document.querySelectorAll('.q:checked').forEach(x=>x.checked=false);
    document.querySelector('fieldset').classList.add('active');
    document.querySelectorAll('.kakutei').forEach(x=>x.disabled=true);
  }
});
document.addEventListener('click',(e)=>{
  const t=e.target;
  if(t.closest('.kakutei')){
    t.disabled=true;
    t.closest('fieldset').querySelectorAll('.q').forEach(x=>x.setAttribute("readonly",1));
    if(document.querySelectorAll('.q:checked').length>=5){
      document.querySelectorAll('fieldset').forEach(x=>x.classList.add('active'));//※1
      const point=[...document.querySelectorAll('.q:checked')].map(x=>parseInt(x.value)).reduce((x,y)=>x+y);
      alert(point);
    }else{
      t.closest('fieldset').classList.remove('active');
      t.closest('fieldset').nextElementSibling.classList.add('active');
    }
  }
  if(t.closest('[readonly]')){
    e.preventDefault();
  }
});
document.addEventListener('change',(e)=>{
  const t=e.target;
  if(t.closest('.q')){
    t.closest('fieldset').querySelector('.kakutei').disabled=false;
  }
});
</script>
<form>
<fieldset>
<legend>Q1</legend>
<label><input type="radio" name="q1" class="q" value="10">A</label>
<label><input type="radio" name="q1" class="q" value="5">B</label>
<input type="button" value="確定" class="kakutei">
</fieldset>
<fieldset>
<legend>Q2</legend>
<label><input type="radio" name="q2" class="q" value="10">A</label>
<label><input type="radio" name="q2" class="q" value="5">B</label>
<input type="button" value="確定" class="kakutei">
</fieldset>
<fieldset>
<legend>Q3</legend>
<label><input type="radio" name="q3" class="q" value="10">A</label>
<label><input type="radio" name="q3" class="q" value="5">B</label>
<input type="button" value="確定" class="kakutei">
</fieldset>
<fieldset>
<legend>Q4</legend>
<label><input type="radio" name="q4" class="q" value="10">A</label>
<label><input type="radio" name="q4" class="q"s value="5">B</label>
<input type="button" value="確定" class="kakutei">
</fieldset>
<fieldset>
<legend>Q5</legend>
<label><input type="radio" name="q5" class="q" value="10">A</label>
<label><input type="radio" name="q5" class="q" value="5">B</label>
<input type="button" value="確定" class="kakutei">
</fieldset>
</form>

※一部調整

Comments

[yambejp]

画像はfieldset内におけば設問ごとに設置することができます

Answer 2

各問題のラジオボタンが選択されたらその問題と次の問題のdisplayの値を変えて表示･非表示すればよいかと思います。

displayというのはCSSのプロパティで、要素の表示方法を指定することができます。
display: block;などで要素が表示され、display: none;で非表示になります。

display - CSS: カスケーディングスタイルシート | MDN

各fieldsetをそれぞれdivで包んで、評価ボタンは最後の問題が含まれたdivに入れ、そのdivの表示･非表示を切り替えることにしましょう。

画像もそのdivの子要素にしておけば一緒に切り替わりますし、フェードインなどの切り替え時効果もそのdivにCSSを適用すればできます。

<html>
<head>
  <!-- いろいろあって -->
  <style>
    /* 問題は基本非表示にする */
    .question {
        display: none;
    }
    /* showクラスが付いている問題を表示するようにする */
    .question.show {
        display: block;
    }
  </style>
</head>
<body>
<!-- いろいろあって -->
<form id="questions">
  <div class="question show">
    <fieldset>
      <legend>Q1</legend>
      <img alt="なにかの画像" src="画像のURL">
      <label><input type="radio" name="q1" class="q" value="10">A</label>
      <label><input type="radio" name="q1" class="q" value="5">B</label>
    </fieldset>
  </div>
  <div class="question">
    <fieldset>
      <legend>Q2</legend>
      <img alt="なにかの画像" src="画像のURL">
      <label><input type="radio" name="q2" class="q" value="10">A</label>
      <label><input type="radio" name="q2" class="q" value="5">B</label>
    </fieldset>
    <input type="button" value="評価" id="btn">
  </div>
</form>

<script>
// 問題を非表示にする関数
function hide(question) {
  // showクラスを削除
  question.classList.delete("show");
}

// 問題を表示する関数
function show(question) {
  // showクラスを追加
  question.classList.add("show");
}

window.addEventListener('load', () => {
  // id="questions"の要素に含まれる問題を全て取得
  const questions = Array.from(document.querySelectorAll("#questions .question"));
  // 最後の問題以外の全ての選択肢に「変更があったら次の問題に切り替える」処理を追加する
  questions.slice(0, -1).forEach((question, i) => {
    // 各問題の選択肢を全て取得
    const choices = question.querySelectorAll('.q');
    for (const choice of choices) {
        // 選択肢が変更されたら
        choice.addEventListener('change', _ev => {
          // 現在の問題を非表示にして次の問題を表示
          hide(questions[i]);
          show(questions[i+1]);
        });
    }
  });
});
</script>
</body>
</html>