【Javascript】input type="checkbox"でcheckedになった数を計測し、type="radio"では回答に応じて点数を与え、合計値を算出したい

Question

input type="checkbox"でcheckedになった数を計測し、type="radio"では回答に応じて点数を与え、合計値を算出したい

<div class="q1">
  <p>Bobが好きな乗り物はなんでしょう？</p>
  <div>
    <input type="radio" id="bike" name="vehicle" value="1">
    <label for="bike">バイク（１点）</label>
  </div>
  <div>
    <input type="radio" id="scooter" name="vehicle" value="2">
    <label for="scooter">スクーター（２点）</label>
  </div>
  <div>
    <input type="radio" id="car" name="vehicle" value="3">
    <label for="car">車（３点）</label>
  </div>
  <div>
    <input type="radio" id="train" name="vehicle" value="1">
    <label for="train">電車（１点）</label>
  </div>
</div>

<div class="q2" hidden>
  <p>Bobが好きな色は何色でしょう？</p>
  <div>
    <input type="checkbox" id="black" name="color">
    <label for="black">黒</label>
  </div>
  <div>
    <input type="checkbox" id="white" name="color">
    <label for="white">白</label>
  </div>
  <div>
    <input type="checkbox" id="blue" name="color">
    <label for="blue">青</label>
  </div>
  <div>
    <input type="checkbox" id="yellow" name="color">
    <label for="yellow">黄色</label>
  </div>
</div>
<button id="select">ポイント獲得数</button>
</div>

document.getElementById('select').onclick = function() {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
    alert(checkboxes.length);
}

---

結果の例）
Q1
車を選択→3点
Q2
黒と白を選択→2点（各1点）

合計 5点

---

初心者なりに色々調べた結果、この方法だとinputのタイプに応じてチェックした数を計測できることがわかりました。
しかし、チェックした回答に応じて点数を数値化して与える方法がわかりません。
inputにvalueなどで対応できるのでしょうか？

また、他にも実装してみたい挙動があり、以下の通りです。
ご回答いただけるととても助かります。

チェック前の項目は非表示→チェック後次の項目のみを表示したい

例）
最初はQ1のみ表示→Q1が回答されたら自動でQ2が表示され、Q1は消える

buttonを使わずに、チェックを終えたら自動でチェックリストの下に合計点数に応じたコンテンツを表示したい

例）
チェックボックス 2個
ラジオボタンの得点 3点
合計 5点（「おめでとう！5点獲得です」という画像を表示する）
※コードや数値ではなく画像で表したい

Comments

[int32_t]

1つの質問で複数のことを聞くと回答を書く手間が増えるので、できるだけ1つのことだけ聞くようにしてください。

[shin12t]

わかりました！
ありがとうございます！