16タイプ性格診断ゲーム

<style>
  #mbti-game {
    font-family: sans-serif;
    max-width: 600px;
    margin: auto;
    background: #f7f7f7;
    padding: 20px;
    border-radius: 8px;
  }
  #mbti-game h2 {
    font-size: 1.5em;
    margin-bottom: 15px;
  }
  #mbti-game #question {
    font-size: 1.2em;
    margin-bottom: 15px;
  }
  #mbti-game button {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
    padding: 12px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #333;
    background: white;
    color: black;          /* 文字色を黒に */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
  }
  #mbti-game button:hover {
    background: #ddd;
    color: black;          /* ホバー時も文字色黒を維持 */
  }
  #mbti-game #result {
    margin-top: 20px;
    font-weight: bold;
    font-size: 1.3em;
  }
</style>

<div id="mbti-game">
  <h2>16タイプ判定ゲーム</h2>
  <div id="question">質問がここに表示されます</div>
  <button id="btnA">A</button>
  <button id="btnB">B</button>
  <div id="result"></div>
</div>

<script>
(function(){
  const questions = [
    {q:"パーティーであなたは…？", A:"多くの人と話すのが楽しい", B:"親しい人と少人数で過ごすのが好き", axis:"EI", scoreA:"E", scoreB:"I"},
    {q:"新しい環境では…？", A:"すぐに周囲に溶け込む", B:"まず様子を見て考える", axis:"EI", scoreA:"E", scoreB:"I"},
    {q:"仕事で大事にするのは…？", A:"具体的な事実やデータ", B:"未来の可能性やアイデア", axis:"SN", scoreA:"S", scoreB:"N"},
    {q:"話す時は…？", A:"事実を中心に話す", B:"抽象的な話を好む", axis:"SN", scoreA:"S", scoreB:"N"},
    {q:"決断するとき…？", A:"論理的に判断する", B:"人の気持ちを考慮する", axis:"TF", scoreA:"T", scoreB:"F"},
    {q:"友人と喧嘩したら…？", A:"理由を話して解決したい", B:"感情を大事にして和解を優先", axis:"TF", scoreA:"T", scoreB:"F"},
    {q:"計画を立てるとき…？", A:"きっちり予定を決める", B:"臨機応変に対応したい", axis:"JP", scoreA:"J", scoreB:"P"},
    {q:"休日は…？", A:"予定を先に決める", B:"気分で動くのが好き", axis:"JP", scoreA:"J", scoreB:"P"}
  ];

  const scores = {E:0, I:0, S:0, N:0, T:0, F:0, J:0, P:0};
  let currentIndex = 0;

  const questionDiv = document.getElementById("question");
  const btnA = document.getElementById("btnA");
  const btnB = document.getElementById("btnB");
  const resultDiv = document.getElementById("result");

  function showQuestion() {
    if(currentIndex < questions.length){
      const q = questions[currentIndex];
      questionDiv.textContent = q.q;
      btnA.textContent = "A: " + q.A;
      btnB.textContent = "B: " + q.B;
    } else {
      showResult();
    }
  }

  function showResult() {
    let EI = scores.E >= scores.I ? "E" : "I";
    let SN = scores.S >= scores.N ? "S" : "N";
    let TF = scores.T >= scores.F ? "T" : "F";
    let JP = scores.J >= scores.P ? "J" : "P";

    let type = EI + SN + TF + JP;
    questionDiv.textContent = "あなたのタイプは…";
    btnA.style.display = "none";
    btnB.style.display = "none";

    let explanations = {
      "INFJ":"理想主義的で深い洞察力を持つ調和者。",
      "INTJ":"戦略的で計画的な独創者。",
      "INFP":"内面的価値観を大切にする仲介者。",
      "INTP":"分析的で論理的な思想家。",
      "ENFJ":"人を引きつけるカリスマ的指導者。",
      "ENTJ":"決断力のあるリーダー。",
      "ENFP":"自由で創造的な発想家。",
      "ENTP":"議論好きな発明家。",
      "ISFJ":"責任感が強く献身的な守護者。",
      "ISTJ":"現実的で信頼できる管理者。",
      "ISFP":"感受性豊かな芸術家。",
      "ISTP":"柔軟で実践的な職人。",
      "ESFJ":"社交的で協力的な世話役。",
      "ESTJ":"組織的で実務的な統率者。",
      "ESFP":"明るく楽しみ上手なエンターテイナー。",
      "ESTP":"行動的で即断即決の冒険者。"
    };

    resultDiv.textContent = type + " - " + (explanations[type] || "タイプの説明はありません。");
  }

  function answer(choice) {
    if(currentIndex >= questions.length) return;
    const q = questions[currentIndex];
    if(choice === "A"){
      scores[q.scoreA]++;
    } else {
      scores[q.scoreB]++;
    }
    currentIndex++;
    showQuestion();
  }

  btnA.addEventListener("click", () => answer("A"));
  btnB.addEventListener("click", () => answer("B"));

  showQuestion();
})();
</script>