JavaScript 診断テストをつくりたい。

Question

前提・実現したいこと

Javascriptを使って性格診断テストを作りたい。

まだ完成ではなく
『複数クリックしても最後のものだけ色を付けるようにする。』
『入力したものをデータベースに取り込む』
という所のイメージがついていません。

特にさわったばかりで、JavaScriptで選択したデータはデータベースにそもそも取り込めるのかもわかりません。どういった関数でプログラムを作っていけるんでしょうか？
また、最後のものだけに色を付けるやり方も今のクラスを付与する形のものをいじくったらできますでしょうか？

そもそも診断テストならもっと簡単な形がいいんでしょうか(^-^;

該当のソースコード

'use strict';

{
  const question = document.getElementById('question'); //constで値を変えないものとして代入
  const btn = document.getElementById('btn'); //getElementById指定したIDに会ったドキュメントを取得
  const choices = document.getElementById('choices'); //

  const quizSet = [
    {q: 'What is A?', c: ['A0', 'A1', 'A2']},
    {q: 'What is B?', c: ['B0', 'B1', 'B2']},
    {q: 'What is D?', c: ['C0', 'C1', 'C2']},
    {q: 'What is E?', c: ['C0', 'C1', 'C2']},
    {q: 'What is F?', c: ['C0', 'C1', 'C2']},
    {q: 'What is G?', c: ['C0', 'C1', 'C2']},
    {q: 'What is H?', c: ['C0', 'C1', 'C2']},
    {q: 'What is I?', c: ['C0', 'C1', 'C2']},
    {q: 'What is J?', c: ['C0', 'C1', 'C2']},
  ];
  let currentNum = 0;
  let isAnswered;

  function shuffle(arr) { 
    return arr;
  }

  function checkAnswer(li) {
    if(isAnswered){
      return;
    }
      li.classList.add('correct');
      btn.classList.remove('disabled');
  }
  function setQuiz() {
    isAnswered = false;

    question.textContent = quizSet[currentNum].q;

    while (choices.firstChild) {
      choices.removeChild(choices.firstChild);
    }

    const shuffledChoices = shuffle([...quizSet[currentNum].c]);
    shuffledChoices.forEach(choice => { //アロー関数？
      const li = document.createElement('li');
      li.textContent = choice;
      li.addEventListener('click', () => {
        checkAnswer(li);
      });
      choices.appendChild(li);
    });
  }

  setQuiz();
  btn.addEventListener('click', () => {
    currentNum++;
    setQuiz();
  });
}

      <div class ="container2">
        <p id="question"></p>
      <ul id="choices"></ul>
      <div id="btn" class="disabled">Next</div>
    </div>

/* 診断テスト*/
.container2 {
  width: 400px;
  margin: 8px auto;
  background: #fff;
  border-radius: 4px;
  padding: 16px;
  position: relative;
}

#question{
	margin-bottom: 16px;
	font-weight: bold;
}

#choices {
	list-style: none;
	padding: 0;
	margin-bottom: 16px;
}

#choices li{
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 10px;
	margin-bottom: 10px;
	cursor: pointer;
}
  #choices li:hover {
  background: #f8f8f8;
}

	#choices li.correct{
		background: #d4edda;
		border-color: #c3e6cd;
		color: #155724;
		font-weight: bold;
	}

#btn{
	background: #3498db;
	padding: 8px;
	border-radius: 4px;
	cursor: pointer;
	text-align: center;
	color: #fff;
	box-shadow: 0 4px 0 #2880b9;
}
#btn.disabled{
	background: #ccc;
	box-shadow: 0 4px 0 #bbb;
	opacity: 0.7;
}

試したこと

サンプルやテキストを参考に少しいじくって形は完成ではないですが、一応作れました。

Comments

[papinianus]

私に回答依頼なさったのはGoogleフォームでやりたいということですか？

[m.ts10806]

>一応作れました。
自身で具体的に回答にして解決済みにしておいてください。

Answer 1

どういった関数でプログラムを作っていけるんでしょうか？

まずどういった関数(メソッド)があるのか勉強しましょう。
コードを見た限りではドットインストールの「JavaScriptで三択クイズを作ろう」の
コードをコピペして自身で少し変更した程度でメソッドなどをよく理解できていないようなので
もっと勉強したほうが良いです。
(例: shuffleという関数で配列をそのまま返す無駄な処理があるなど)
https://dotinstall.com/lessons/quiz_js_v2

また、最後のものだけに色を付けるやり方も今のクラスを付与する形のものをいじくったらできますでしょうか？

当たり前ですが勉強すればできます
勉強しなければできないです。

そもそも診断テストならもっと簡単な形がいいんでしょうか(^-^;

それ以前に質問に記載されているコードは
複数選択ができ、選択したら解除ができないので
診断テストとして見たら論外なので修正が必要です。

Answer 2

質問の要点がまったくわからないのですが、疑問文になっている箇所だけ

どういった関数でプログラムを作っていけるんでしょうか？

答えはありません。プログラマが「この方法がいい」と思って、最終的に実現できているのなら、それが（その人にとっての）正解です。

また、最後のものだけに色を付けるやり方も今のクラスを付与する形のものをいじくったらできますでしょうか？

できる、できないのレベルであれば、「いじくったら（そういう機能にしたら）できる」ということになります。

そもそも診断テストならもっと簡単な形がいいんでしょうか(^-^;

それはプログラマ本人（および共同開発者等の利害関係者）が考えることであって、第三者には判断できません。