MBTI診断
以下の質問に答えてください。
1. 社交的な方だと思いますか？
2. 外向的な方だと思いますか？
以下は、JavaScriptを使用して実装されたMBTI（Myers-Briggs Type Indicator）診断アプリの例です。
```html
<!DOCTYPE html>
<html>
<head>
<title>MBTI診断</title>
</head>
<body>
<h1>MBTI診断</h1>
<p>以下の質問に答えてください。</p>
<div id="question">
<p>1. 社交的な方だと思いますか？</p>
<label><input type="radio" name="q1" value="E">はい</label>
<label><input type="radio" name="q1" value="I">いいえ</label>
</div>
<div id="question">
<p>2. 外向的な方だと思いますか？</p>
<label><input type="radio" name="q2" value="E">はい</label>
<label><input type="radio" name="q2" value="I">いいえ</label>
</div>
<!-- 他の質問も同様に追加 -->
<button onclick="calculateMBTI()">診断結果</button>
<script>
function calculateMBTI() {
// 質問の回答を取得
const q1 = document.querySelector('input[name="q1"]:checked').value;
const q2 = document.querySelector('input[name="q2"]:checked').value;
// 他の質問の回答も同様に取得
// MBTIタイプの計算
let mbtiType = '';
if (q1 === 'E') {
if (q2 === 'E') {
mbtiType = 'ESFJ';
} else {
mbtiType = 'ENFP';
}
} else {
if (q2 === 'E') {
mbtiType = 'ISTJ';
} else {
mbtiType = 'INTP';
}
}
// 結果の表示
const result = document.createElement('p');
result.textContent = 'あなたのMBTIタイプは ' + mbtiType + ' です。(あくまで推測ですので参考程度にご覧ください)';
document.body.appendChild(result);
// ジョークの表示
const joke = document.createElement('p');
joke.textContent = 'なんと、あなたはMBTIの達人です！'
document.body.appendChild(joke);
}
</script>
</body>
</html>
```
この例では、2つの質問を含むMBTI診断フォームが表示されます。回答を選択した後、"診断結果"ボタンをクリックすると、回答に基づいてMBTIタイプが計算され、結果が表示されます。また、最後にMBTIに関連するジョークも表示されます。
注意：この例では特にセキュリティ上の問題はありませんが、実際のアプリケーションでは適切なセキュリティ対策を講じることが重要です。また、MBTIは人間の行動傾向を分析するものであるため、結果はあくまで推測として報告されるべきです。