ChatGPTで診断チャートをアプリケーションに仕上げた話

eyecatch4765

SHARE

この度、ChatGPTを使って、診断チャートをオンライン化してみました！

当ブログでも人気の記事「【将来の夢がない人向け】大学選び 2つの方法（学部診断付き）」「【文理選択 診断付き】将来の夢が無い人へ２段階で選ぶ方法を解説」の中にある、学部診断チャート。

これまでは画像を張り付けるだけでしたが、この度オンラインで実施できるようにしました。

【簡単30秒診断】あなたに向いている学部は？

今回も実現にあたり、ChatGPTを活用しました。

そこでこの記事ではどのようなプロンプトを投げかけたのか、その点を中心に紹介したいと思います。

是非最後まで読んでみてください！

ChatGPTに投げかけたプロンプト

早速投げかけたプロンプトを紹介します。

ChatGPTで問いかけてみる。

まずはどういったものを作りたいのかを投げかけました。

コトゼニ
コトゼニ

webページ上でYes/Noの選択肢に応じて次の質問が変わる診断チャートを実装したいのですが、javascriptで実現できますか？

chatGPT
chatGPT

はい、JavaScriptを使用して、Webページ上でYes/Noの選択肢に応じて次の質問が変わる診断チャートを実装することができます。以下に、基本的なアプローチの例を示します。

HTMLの部分には、質問と選択肢を表示するための要素を配置します。例えば、以下のような形式です：

<!DOCTYPE html>
<html>
<head>
  <title>診断チャート</title>
</head>
<body>
  <div id="question"></div>
  <button onclick="startDiagnosis()">スタート</button>
  <button onclick="answerYes()">Yes</button>
  <button onclick="answerNo()">No</button>

  <script src="script.js"></script>
</body>
</html>

var chartData = {
  "questions": [
    {
      "id": 1,
      "text": "質問1",
      "yes": 2,
      "no": 3,
      "category": "カテゴリA"
    },
    {
      "id": 2,
      "text": "質問2",
      "yes": 4,
      "no": 5,
      "category": "カテゴリB"
    },
    // 他の質問データも同様に続く...
  ]
};

var currentQuestionIndex = 0;

function displayQuestion() {
  var questionText = chartData.questions[currentQuestionIndex].text;
  document.getElementById("question").innerHTML = questionText;
}

function startDiagnosis() {
  currentQuestionIndex = 0;
  displayQuestion();
}

function answerYes() {
  var nextQuestionIndex = chartData.questions[currentQuestionIndex].yes;
  if (nextQuestionIndex !== null) {
    currentQuestionIndex = nextQuestionIndex - 1;
    displayQuestion();
  } else {
    document.getElementById("question").innerHTML = "診断が終了しました。";
    // その他の終了処理を追加する場合はここに記述する
  }
}

function answerNo() {
  var nextQuestionIndex = chartData.questions[currentQuestionIndex].no;
  if (nextQuestionIndex !== null) {
    currentQuestionIndex = nextQuestionIndex - 1;
    displayQuestion();
  } else {
    document.getElementById("question").innerHTML = "診断が終了しました。";
    // その他の終了処理を追加する場合はここに記述する
  }
}

毎度のことながら、なんとまぁ…

ひとまず実践してみました。その挙動がこちら。

ロジックを組み立てる

土台は出来上がったので、ここからユーザーが使いやすいようにアレンジしていきます。

まずは、

スタートボタンを押すと、

  • 質問内容が表示
  • Yes /Noボタンが表示される

ように相談してみます。

コトゼニ
コトゼニ

JavaScriptを詳しく実装します。「・診断開始前はスタートボタンのみ表示されている・スタートボタンをクリックすると質問内容とYes /Noボタンが表示される」ようにHTMLに適宜divタグを挿入し、JavaScriptの挙動を整えてください

chatGPT
chatGPT

了解しました。HTMLとJavaScriptを適宜修正して、診断開始前には「スタート」ボタンのみが表示され、スタートボタンをクリックすると質問内容とYes/Noボタンが表示されるようにします。

<!DOCTYPE html>
<html>
<head>
  <title>診断チャート</title>
</head>
<body>
  <div id="startContainer">
    <button onclick="startDiagnosis()">スタート</button>
  </div>

  <div id="questionContainer" style="display: none;">
    <div id="question"></div>
    <button onclick="answerYes()">Yes</button>
    <button onclick="answerNo()">No</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

var chartData = {
  "questions": [
    {
      "id": 1,
      "text": "質問1",
      "yes": 2,
      "no": 3,
      "category": "カテゴリA"
    },
    {
      "id": 2,
      "text": "質問2",
      "yes": 4,
      "no": 5,
      "category": "カテゴリB"
    },
    // 他の質問データも同様に続く...
  ]
};

var currentQuestionIndex = 0;

function displayQuestion() {
  var questionText = chartData.questions[currentQuestionIndex].text;
  document.getElementById("question").innerHTML = questionText;
}

function showQuestionContainer() {
  document.getElementById("startContainer").style.display = "none";
  document.getElementById("questionContainer").style.display = "block";
}

function startDiagnosis() {
  currentQuestionIndex = 0;
  displayQuestion();
  showQuestionContainer();
}

function answerYes() {
  var nextQuestionIndex = chartData.questions[currentQuestionIndex].yes;
  if (nextQuestionIndex !== null) {
    currentQuestionIndex = nextQuestionIndex - 1;
    displayQuestion();
  } else {
    document.getElementById("question").innerHTML = "診断が終了しました。";
    // その他の終了処理を追加する場合はここに記述する
  }
}

function answerNo() {
  var nextQuestionIndex = chartData.questions[currentQuestionIndex].no;
  if (nextQuestionIndex !== null) {
    currentQuestionIndex = nextQuestionIndex - 1;
    displayQuestion();
  } else {
    document.getElementById("question").innerHTML = "診断が終了しました。";
    // その他の終了処理を追加する場合はここに記述する
  }
}

続いて、

診断が完了すると

  • 診断結果の学部名が表示される

ようにします。

配列データに

    {
      "id": 99,
      "text": "国際関係（系）学部",
      "yes": null,
      "no": null,
      "category": 2
    }

のように学部データは保存しており、学部の場合はidを90以上にしています。ですからidを使って条件分岐させます。

コトゼニ
コトゼニ

診断結果をHTMLで表示させます。 JSONデータに含まれているidが90以上の場合、以下を満たす関数を実行させてください。 またその関数も作成してください。 ・Yes/Noボタンを非表示にし ①<p>”あなたにおすすめの学部は”＋questionText+”です”</p> ②<p>”どんなことを学ぶかを見てみる”</p> ①②を含んだdiv要素をHTMLに表示する

chatGPT
chatGPT

了解しました。以下に診断結果を表示させるための関数を追加し、HTMLに結果を表示するコードを示します。

<!DOCTYPE html>
<html>
<head>
  <title>診断チャート</title>
</head>
<body>
  <div id="startContainer">
    <button onclick="startDiagnosis()">スタート</button>
  </div>

  <div id="questionContainer" style="display: none;">
    <div id="question"></div>
    <button onclick="answerYes()">Yes</button>
    <button onclick="answerNo()">No</button>
  </div>

  <div id="resultContainer" style="display: none;">
    <p id="resultText"></p>
    <p><a href="#" id="learnMoreLink">どんなことを学ぶかを見てみる</a></p>
  </div>

  <script src="script.js"></script>
</body>
</html>

// ...（以前のコードをそのまま）

function showResultContainer() {
  document.getElementById("questionContainer").style.display = "none";
  document.getElementById("resultContainer").style.display = "block";
}

function displayResult() {
  var questionText = chartData.questions[currentQuestionIndex].text;
  document.getElementById("resultText").innerHTML = "あなたにおすすめの学部は「" + questionText + "」です";
  document.getElementById("learnMoreLink").href = "https://example.com/" + questionText; // ここに適切なリンクを設定

  showResultContainer();
}

function answerYes() {
  var nextQuestionIndex = chartData.questions[currentQuestionIndex].yes;
  if (nextQuestionIndex !== null) {
    currentQuestionIndex = nextQuestionIndex - 1;
    displayQuestion();
  } else {
    if (chartData.questions[currentQuestionIndex].id >= 90) {
      displayResult();
    } else {
      document.getElementById("question").innerHTML = "診断が終了しました。";
    }
  }
}

function answerNo() {
  var nextQuestionIndex = chartData.questions[currentQuestionIndex].no;
  if (nextQuestionIndex !== null) {
    currentQuestionIndex = nextQuestionIndex - 1;
    displayQuestion();
  } else {
    if (chartData.questions[currentQuestionIndex].id >= 90) {
      displayResult();
    } else {
      document.getElementById("question").innerHTML = "診断が終了しました。";
    }
  }
}

関数「displayResult」と「showResultContainer」が追加されました。

それぞれの学部で学ぶ内容を別ページで遷移させますが、文系理系また、その中でも2ページずつに分かれます。

JSONデータの「category」の値により遷移先のリンクを変更します。

コトゼニ
コトゼニ

先程のコードの中に含まれる「function displayResult()」において、「document.getElementById(“learnMoreLink”).href = “https://example.com/” + questionText; // ここに適切なリンクを設定」のリンク先をquestionのcategoryによって分岐させます。categoryが1,2,3,4のとき、それぞれ別のリンクへ遷移したいのですが、コードを修正してください

chatGPT
chatGPT

分岐させたリンク先を設定するために、categoryによって異なるリンクを設定するロジックを追加します。以下は、displayResult()関数を修正したコードです：

function displayResult() {
  var questionText = chartData.questions[currentQuestionIndex].text;
  document.getElementById("resultText").innerHTML = "あなたにおすすめの学部は「" + questionText + "」です";

  var category = chartData.questions[currentQuestionIndex].category;
  var learnMoreLink = document.getElementById("learnMoreLink");

  switch (category) {
    case 1:
      learnMoreLink.href = "https://example.com/link1";
      break;
    case 2:
      learnMoreLink.href = "https://example.com/link2";
      break;
    case 3:
      learnMoreLink.href = "https://example.com/link3";
      break;
    case 4:
      learnMoreLink.href = "https://example.com/link4";
      break;
    default:
      learnMoreLink.href = "https://example.com/defaultlink";
  }

  showResultContainer();
}

これで診断で到達した学部に紐づいたcategoryに基づいて、リンク先を分けることができました。

最終的には学部は別の配列で管理することにし、条件分岐の優先順位も調整し、完成したのが以下のコードです。

<!DOCTYPE html>
<html>
<head>
  <title>診断チャート</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
  <div id="startContainer">
    <button onclick="startDiagnosis()">スタート</button>
  </div>

  <div id="questionContainer" style="display: none;">
    <p>質問</p>
    <div id="question"></div>
    <button id="yesButton" onclick="answerYes()">Yes</button>
    <button id="noButton" onclick="answerNo()">No</button>
  </div>

  <div id="resultContainer" style="display: none;">
    <p id="resultText"></p>
    <p><a href="#" id="learnMoreLink">どんなことを学ぶかを見てみる</a></p>
  </div>

  <script src="diagnose.js"></script>
  <script src="questionflowchart.js"></script>

</body>
</html>
var currentQuestionIndex = 0;

function displayQuestion() {
  var questionText = chartData.questions[currentQuestionIndex].text;
  document.getElementById("question").innerHTML = questionText;
}

function showQuestionContainer() {
  document.getElementById("startContainer").style.display = "none";
  document.getElementById("questionContainer").style.display = "block";
}

function startDiagnosis() {
  currentQuestionIndex = 0;
  displayQuestion();
  showQuestionContainer();
}

function showResultContainer() {
  document.getElementById("questionContainer").style.display = "none";
  document.getElementById("resultContainer").style.display = "block";
}

function displayResult(indexInDepartments) {
  var questionText = departments[indexInDepartments].text;
  document.getElementById("resultText").innerHTML = "あなたにおすすめの学部は<br><span class='questionText'>" + questionText + "</span><span class='resultTextSuffix'>です</span>";

  var category = departments[indexInDepartments].category;
  var learnMoreLink = document.getElementById("learnMoreLink");
  learnMoreLink.innerHTML = questionText + "がどんなことを学ぶかを見てみる";

  switch (category) {
　　//任意のリンクに修正してください。
    case 1:
      learnMoreLink.href = "https://example.com/link1";
      break;
    case 2:
      learnMoreLink.href = "https://example.com/link2";
      break;
    case 3:
      learnMoreLink.href = "https://example.com/link3";
      break;
    case 4:
      learnMoreLink.href = "https://example.com/link4";
      break;
    default:
      learnMoreLink.href = "https://example.com/defaultlink";
  }

  showResultContainer();
}

function answerYes() {
  var nextQuestionIndex = chartData.questions[currentQuestionIndex].yes;
  if (nextQuestionIndex >= 90) {
    var indexInDepartments = departments.findIndex(function(item) {
      return item.id === nextQuestionIndex;
    });

    displayResult(indexInDepartments);
  } else if (nextQuestionIndex !== null) {
    currentQuestionIndex = nextQuestionIndex - 1;
    displayQuestion();
  } else {
    document.getElementById("questionContainer").style.display = "none";
    document.getElementById("resultContainer").style.display = "block";
  }
}

function answerNo() {
  var nextQuestionIndex = chartData.questions[currentQuestionIndex].no;
  if (nextQuestionIndex >= 90) {
    var indexInDepartments = departments.findIndex(function(item) {
      return item.id === nextQuestionIndex;
    });

    displayResult(indexInDepartments);
  } else if (nextQuestionIndex !== null) {
    currentQuestionIndex = nextQuestionIndex - 1;
    displayQuestion();
  } else {
    document.getElementById("questionContainer").style.display = "none";
    document.getElementById("resultContainer").style.display = "block";
  }
}



var chartData = {

  "questions": [
    {
      "id": 1,
      "text": "行動するより考えるタイプだ",
      "yes": 2,
      "no": 6,
      "category": 0
    },
    {
      "id": 2,
      "text": "LINEやDMの返信は早い",
      "yes": 3,
      "no": 7,
      "category": 0
    },
    {
      "id": 3,
      "text": "友達を作るのは得意だ",
      "yes": 12,
      "no": 4,
      "category": 0
    },
    {
      "id": 4,
      "text": "論理立てて話すタイプだ",
      "yes": 8,
      "no": 5,
      "category": 0
    },
    {
      "id": 5,
      "text": "マイペースと言われることが多い",
      "yes": 9,
      "no": 13,
      "category": 0
    },
    {
      "id": 6,
      "text": "演劇では主役をやりたい",
      "yes": 10,
      "no": 7,
      "category": 0
    },
    {
      "id": 7,
      "text": "好きなことをやっていると時間を忘れる",
      "yes": 4,
      "no": 13,
      "category": 0
    },
    {
      "id": 8,
      "text": "テスト前は友達と勉強したい",
      "yes": 13,
      "no": 14,
      "category": 0
    },
    {
      "id": 9,
      "text": "万物や宇宙の法則よりも現代的な文明の方が好き",
      "yes": 95,
      "no": 96,
      "category": 0
    },
    {
      "id": 10,
      "text": "リーダーなどのまとめ役が得意だ",
      "yes": 16,
      "no": 11,
      "category": 0
    },
    {
      "id": 11,
      "text": "動画を撮ることや編集が好き",
      "yes": 12,
      "no": 14,
      "category": 0
    },
    {
      "id": 12,
      "text": "友人が遅れても怒らずに待てる",
      "yes": 18,
      "no": 19,
      "category": 0
    },
    {
      "id": 13,
      "text": "プレゼントをもらうより贈る方が好きだ",
      "yes": 19,
      "no": 21,
      "category": 0
    },
    {
      "id": 14,
      "text": "よく「個性的」と言われる",
      "yes": 9,
      "no": 15,
      "category": 0
    },
    {
      "id": 15,
      "text": "SDGsはもっと広く認知されるべき",
      "yes": 97,
      "no": 22,
      "category": 0
    },
    {
      "id": 16,
      "text": "自分の考えや意見を持っている",
      "yes": 17,
      "no": 12,
      "category": 0
    },
    {
      "id": 17,
      "text": "「人間の文化」に興味がある",
      "yes": 91,
      "no": 18,
      "category": 0
    },
    {
      "id": 18,
      "text": "子どもと一日中遊んでいられる",
      "yes": 90,
      "no": 92,
      "category": 0
    },
    {
      "id": 19,
      "text": "イベントを盛り上げるのが好き",
      "yes": 18,
      "no": 20,
      "category": 0
    },
    {
      "id": 20,
      "text": "起業や経営に興味がある",
      "yes": 93,
      "no": 94,
      "category": 0
    },
    {
      "id": 21,
      "text": "海外で暮らしてみたい",
      "yes": 22,
      "no": 20,
      "category": 0
    },
    {
      "id": 22,
      "text": "海外の人と積極的に交流したいタイプだ",
      "yes": 99,
      "no": 98,
      "category": 0
    },
  ]
};


var departments = [
  {
    "id": 90,
    "text": "教育系学部",
    "yes": null,
    "no": null,
    "category": 1
  },
  {
    "id": 91,
    "text": "文学部・外国語学部、人文・教養・人間科学部系",
    "yes": null,
    "no": null,
    "category": 1
  },
  {
    "id": 92,
    "text": "医・歯・薬学部、看護・栄養学部",
    "yes": null,
    "no": null,
    "category": 4
  },
  {
    "id": 93,
    "text": "経済・経営・商学部",
    "yes": null,
    "no": null,
    "category": 2
  },
  {
    "id": 94,
    "text": "法学部",
    "yes": null,
    "no": null,
    "category": 1
  },
  {
    "id": 95,
    "text": "理学部",
    "yes": null,
    "no": null,
    "category": 3
  },
  {
    "id": 96,
    "text": "工学部",
    "yes": null,
    "no": null,
    "category": 3
  },
  {
    "id": 97,
    "text": "農学部",
    "yes": null,
    "no": null,
    "category": 4
  },
  {
    "id": 98,
    "text": "社会・社会福祉学部",
    "yes": null,
    "no": null,
    "category": 2
  },
  {
    "id": 99,
    "text": "国際関係（系）学部",
    "yes": null,
    "no": null,
    "category": 2
  }
];

あとは、装飾するためのCSSを整えてWordPressにカスタムHTMLで貼り付ければ完成です！

CSSも一瞬で土台ができたので、こちらの記事にまとめました。ぜひご覧ください。

eyecatch4806ChatGPTで診断チャートのCSSを簡単に作り上げた話

まとめ

ChatGPTと診断チャートをオンライン化しました。

プロンプトを正確にするだけで、ヒントや解答を一瞬で与えてくれるAIは本当にすごいですね。

是非診断アプリケーションを試してみてください！

最後まで読んでいただきありがとうございました。

この記事が少しでも参考になれば幸いです。

それではまたここで会いましょう！

ブログランキング・にほんブログ村へにほんブログ村

ブログ村に参加中です。上のバナーをクリックいただくだけで当ブログにポイントが入ります。いつも応援クリックありがとうございます。

Twitter

Twitter やってます。

新着記事のお知らせをしていますのでぜひフォローしてください！

人気の記事

この記事を読んだ人はこちらの記事も読んでいます。

▶︎「【塾長分析】大学入学共通テスト2025「情報」まとめ【難易度・対策】」

共通テスト情報・対策共通テスト「情報」対策に必要なことは？塾講師が解説！勉強法と参考書

▶︎「【最新】（情報1）共通テスト試作問題 難易度と3つの対策」

eyecatch-2491【最新】（情報1）共通テスト試作問題 難易度と3つの対策

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


前の記事

eyecatch-4818
高校情報Ⅰ おすすめ参考書・問題集【2024年2月】最新書籍と…

次の記事

ChatGPTで診断チャートのCSSを簡単に作り上げた話
eyecatch4806