性格診断

document.title = '性格診断';
//MBTIタイプを診断します


const demo = document.getElementById("demo");

const form = document.createElement("form");
form.id ='form';
demo.appendChild(form);

const h1 = document.createElement("h1");
h1.textContent = document.title;
form.appendChild(h1);


const p = document.createElement("p");
p.textContent = '10の質問に答えてください。あなたの性格を診断します。';
form.appendChild(p);


const questions = [
  { text: "初対面の人と話すことにあまり抵抗を感じませんか？", trait: "extroversion", score: 1 },
  { text: "締め切りが迫っていないと、なかなか行動を起こせないタイプですか？", trait: "conscientiousness", score: -1 },
  { text: "他人の気持ちに敏感で、共感しやすい方だと思いますか？", trait: "agreeableness", score: 1 },
  { text: "物事を計画的に進めるのが好きですか？", trait: "conscientiousness", score: 1 },
  { text: "新しいアイデアや変化を歓迎する方ですか？", trait: "openness", score: 1 },
  { text: "一人で過ごす時間が好きで、必要だと感じますか？", trait: "extroversion", score: -1 },
  { text: "小さなことでも不安になりやすいですか？", trait: "neuroticism", score: 1 },
  { text: "他人と衝突するのを避けるために、自分の意見を抑えることがありますか？", trait: "agreeableness", score: 1 },
  { text: "規則やルールをきちんと守る方だと思いますか？", trait: "conscientiousness", score: 1 },
  { text: "想像力が豊かで、空想するのが好きな方ですか？", trait: "openness", score: 1 },
];

const traits = {
  extroversion: 0,
  agreeableness: 0,
  conscientiousness: 0,
  openness: 0,
  neuroticism: 0,
};

function createForm() {
  questions.forEach((q, i) => {
    const div = document.createElement("div");
    div.className = "question";
    const label = document.createElement("label");
    label.textContent = `${i + 1}. ${q.text}`;
    div.appendChild(label);

    const radioGroup = document.createElement("div");
    radioGroup.className = "radio-group";

    ["はい", "いいえ"].forEach(val => {
      const labelWrap = document.createElement("label");
      labelWrap.className = "radio-option";

      const radio = document.createElement("input");
      radio.type = "radio";
      radio.name = `q${i}`;
      radio.value = val === "はい" ? 1 : 0;

      labelWrap.appendChild(radio);
      labelWrap.appendChild(document.createTextNode(val));
      radioGroup.appendChild(labelWrap);
    });

    div.appendChild(radioGroup);



    form.appendChild(div);
  });

  // 診断ボタンを作成
  const button = document.createElement("button");
  button.type = "button";  //
  button.textContent = "診断する";
  button.onclick = function(event) {
    calculate(event);
  };
  form.appendChild(button);

  // 結果表示エリアを作成
  const scoreDiv = document.createElement("div");
  scoreDiv.id = "score";
  scoreDiv.className = "score";
  form.appendChild(scoreDiv);

  // 結果メッセージ表示用の要素を作成
  const resultDiv = document.createElement("div");
  resultDiv.id = "result";
  resultDiv.className = "result";
  form.appendChild(resultDiv);
}

function calculate(event) {
  event.preventDefault();
  calculateScore();
  calculateResult();
}

function calculateScore() {
  // リセット
  for (let key in traits) traits[key] = 0;

  for (let i = 0; i < questions.length; i++) {
    const selected = document.querySelector(`input[name="q${i}"]:checked`);
    if (!selected) {
      alert("すべての質問に答えてください。");
      return;
    }

    const answer = parseInt(selected.value);
    traits[questions[i].trait] += answer * questions[i].score;
  }

  // 結果生成
  const result = Object.entries(traits).map(([trait, score]) => {
    let desc = "";
    switch (trait) {
      case "extroversion":
        desc = score > 0 ? "社交的" : "内向的";
        break;
      case "agreeableness":
        desc = score > 0 ? "思いやりがある" : "自己主張が強め";
        break;
      case "conscientiousness":
        desc = score > 1 ? "計画的で誠実" : "やや気まぐれ";
        break;
      case "openness":
        desc = score > 0 ? "創造的で柔軟" : "保守的";
        break;
      case "neuroticism":
        desc = score > 0 ? "不安を感じやすい" : "情緒が安定";
        break;
    }
    return `【${trait}】：${score}点（${desc}）`;
  }).join("<br>");

  document.getElementById("score").innerHTML = result;
}


function calculateResult() {
  // traits をリセットして再集計
  for (let key in traits) traits[key] = 0;

  for (let i = 0; i < questions.length; i++) {
    const selected = document.querySelector(`input[name="q${i}"]:checked`);
    if (!selected) {
      alert("すべての質問に答えてください。");
      return;
    }
    const answer = parseInt(selected.value);
    traits[questions[i].trait] += answer * questions[i].score;
  }

  // traits を MBTI 4文字に変換
  const mbtiType = mapToMBTI(traits);

  // タイプごとのメッセージを取得
  const mbti = mbtiMessages[mbtiType] || {
    type: mbtiType,
    label: "未知のタイプ",
    text: "あなたは独自のバランスを持つ、ユニークな性格タイプです。"
  };

  const resultDiv = document.getElementById("result");
  resultDiv.innerHTML = `
    <h3>【${mbti.label}】</h3>
    <p>${mbti.text}</p>
    <p><strong>MBTIタイプ：${mbti.type}</strong></p>
    <p><b>バーナム効果：このような診断を信用するのはやめましょう。</b></p>
  `;
}




function mapToMBTI(traits) {
  let mbti = "";

  // 外向・内向
  mbti += traits.extroversion >= 0 ? "E" : "I";

  // 感覚・直観
  mbti += traits.openness >= 0 ? "N" : "S";

  // 思考・感情
  mbti += traits.agreeableness >= 0 ? "F" : "T";

  // 判断・柔軟
  mbti += traits.conscientiousness >= 0 ? "J" : "P";

  return mbti;
}


const mbtiMessages = {
  ISTJ: {
    type: "ISTJ",
    label: "実務家",
    text: "真面目で責任感が強く、現実的に物事を進めるタイプ。"
  },
  ISFJ: {
    type: "ISFJ",
    label: "擁護者",
    text: "思いやりがあり、周囲のために尽くす心優しいタイプ。"
  },
  INFJ: {
    type: "INFJ",
    label: "提唱者",
    text: "理想主義で洞察力に優れ、人の心を深く理解するタイプ。"
  },
  INTJ: {
    type: "INTJ",
    label: "建築家",
    text: "戦略的な思考と独自の視点を持つ知的なタイプ。"
  },
  ISTP: {
    type: "ISTP",
    label: "巨匠",
    text: "柔軟で問題解決が得意。実践的な才能にあふれるタイプ。"
  },
  ISFP: {
    type: "ISFP",
    label: "冒険家",
    text: "感受性豊かで自由を愛する。芸術的な感性が魅力のタイプ。"
  },
  INFP: {
    type: "INFP",
    label: "仲介者",
    text: "理想を追い求める優しい心の持ち主。静かな情熱が特徴。"
  },
  INTP: {
    type: "INTP",
    label: "論理学者",
    text: "知識欲が強く、独創的な発想で世界を読み解くタイプ。"
  },
  ESTP: {
    type: "ESTP",
    label: "起業家",
    text: "行動力があり、即断即決のカリスマタイプ。"
  },
  ESFP: {
    type: "ESFP",
    label: "エンターテイナー",
    text: "社交的で人生を楽しむ天才。周囲を明るくする力あり。"
  },
  ENFP: {
    type: "ENFP",
    label: "運動家",
    text: "創造力と情熱で人を惹きつける冒険好きタイプ。"
  },
  ENTP: {
    type: "ENTP",
    label: "討論者",
    text: "好奇心旺盛でアイデアにあふれた自由人。"
  },
  ESTJ: {
    type: "ESTJ",
    label: "幹部",
    text: "統率力と実行力に優れたリーダー気質の持ち主。"
  },
  ESFJ: {
    type: "ESFJ",
    label: "領事官",
    text: "人とのつながりを大切にする、世話好きで誠実なタイプ。"
  },
  ENFJ: {
    type: "ENFJ",
    label: "主人公",
    text: "カリスマ性と共感力で人を導く、情熱的なリーダー。"
  },
  ENTJ: {
    type: "ENTJ",
    label: "指揮官",
    text: "目標達成のために戦略的に動く、生まれながらの指導者。"
  }
};



// 初期化
createForm();

* {
  box-sizing: border-box;
}

#demo {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  padding: 20px;
  margin: 0;
  background-color: #f8f9fa;
  color: #333;
}

#demo h1 {
  font-size: 1.4em;
  margin-bottom: 1em;
  text-align: center;
}

#form {
  max-width: 600px;
  margin: auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.question {
  margin-bottom: 20px;
  padding: 12px;
  background: #f1f3f5;
  border-radius: 6px;
}
.question label {
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

.question label input[type="radio"] {
  vertical-align: middle;
}

input[type="radio"] {
  margin-right: 6px;
}




.radio-group {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.radio-option {
  display: inline-block;
  width:45%;
  text-align:center;
  padding: 10px 16px;
  background-color: #e0e0e0;
  border-radius: 6px;
  border: 1px solid #ccc;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  transition: background-color 0.3s, color 0.3s;
  position: relative;
}

/* 非表示のラジオボタン */
.radio-option input[type="radio"] {
  display: none;
}

/* 選択されたラベルを強調（checked） */
.radio-option input[type="radio"]:checked + label,
.radio-option input[type="radio"]:checked ~ span,
.radio-option:has(input[type="radio"]:checked) {
  background-color: #007bff;
  color: white;
  border-color: #0056b3;
}



button {
  display: block;
  width: 100%;
  padding: 12px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 20px;
}

button:hover {
  background-color: #0056b3;
}

#score,
#result {
  margin-top: 30px;
  padding: 16px;
  background-color: #e9f7ef;
  border-left: 6px solid #28a745;
  border-radius: 6px;
  font-weight: 500;
  color: #155724;
}

@media (max-width: 480px) {
  body {
    font-size: 15px;
    padding: 15px;
  }

  .question {
    padding: 10px;
  }

  button {
    font-size: 15px;
    padding: 10px;
  }

  #result {
    font-size: 15px;
  }
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/game/shindan/