あなたのライフスタイルに合った住宅診断アプリ

以下が実装例です。入力フォームによって、ライフスタイルに合った住宅を提案します。


<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>あなたのライフスタイルに合った住宅診断アプリ</title>
</head>

<body>
  <h1>あなたのライフスタイルに合った住宅診断アプリ</h1>
  <form>
    <p>あなたの職業は？</p>
    <label><input type="radio" name="job" value="student">学生</label>
    <label><input type="radio" name="job" value="office_worker">サラリーマン</label>
    <label><input type="radio" name="job" value="freelance">フリーランス</label>
    <label><input type="radio" name="job" value="others">その他</label><br><br>

    <p>あなたの家族構成は？</p>
    <label><input type="radio" name="family" value="single">独身</label>
    <label><input type="radio" name="family" value="couple">夫婦</label>
    <label><input type="radio" name="family" value="family">家族（子供あり）</label><br><br>

    <p>あなたの趣味は？</p>
    <label><input type="checkbox" name="hobby" value="music">音楽</label>
    <label><input type="checkbox" name="hobby" value="sports">スポーツ</label>
    <label><input type="checkbox" name="hobby" value="reading">読書</label>
    <label><input type="checkbox" name="hobby" value="traveling">旅行</label><br><br>

    <p>あなたの予算は？</p>
    <label><input type="radio" name="budget" value="low">1000万円以下</label>
    <label><input type="radio" name="budget" value="medium">1000〜3000万円</label>
    <label><input type="radio" name="budget" value="high">3000万円以上</label><br><br>

    <p><input type="button" value="診断する" onClick="diagnose()"></p>
  </form>

  <div id="result"></div>

  <script>
    function diagnose() {
      var job = document.querySelector('input[name="job"]:checked').value;
      var family = document.querySelector('input[name="family"]:checked').value;
      var hobby = [];
      var checkboxes = document.querySelectorAll('input[name="hobby"]:checked');
      for (var i = 0; i < checkboxes.length; i++) {
        hobby.push(checkboxes[i].value);
      }
      var budget = document.querySelector('input[name="budget"]:checked').value;

      var result = "";

      if (job == "student") {
        result += "あなたにはシングルタイプのワンルームがおすすめです。";
      } else if (job == "office_worker") {
        if (family == "family") {
          result += "あなたにはファミリータイプの住宅がおすすめです。";
        } else {
          result += "あなたにはシングルタイプのマンションがおすすめです。";
        }
      } else if (job == "freelance") {
        result += "あなたにはオフィスと住宅を兼ねたスタジオタイプの住宅がおすすめです。";
      } else {
        result += "診断できませんでした。";
      }

      if (hobby.indexOf("music") != -1) {
        result += "音楽を楽しむなら、防音性の高い住宅がおすすめです。";
      }
      if (hobby.indexOf("sports") != -1) {
        result += "スポーツをやるなら、広い屋内スペースがある住宅がおすすめです。";
      }
      if (hobby.indexOf("reading") != -1) {
        result += "読書をするなら、静かな住宅がおすすめです。";
      }
      if (hobby.indexOf("traveling") != -1) {
        result += "旅行を楽しむなら、駅や空港へのアクセスが良い住宅がおすすめです。";
      }

      if (budget == "low") {
        result += "予算に合わせて、中古物件を選んでみてはいかがでしょうか。";
      } else if (budget == "medium") {
        result += "予算に余裕があるなら、新築の住宅を建てるのもいいでしょう。";
      } else if (budget == "high") {
        result += "予算に余裕があるなら、高級住宅地で一戸建てを建てるのもいいでしょう。";
      }

      document.getElementById("result").innerHTML = result;
    }
  </script>
</body>

</html>


ジョークを取り入れた例：

Q.「どんな住宅がおすすめですか？」
A.「たけのこ洞窟。」

※これはジョークであり、現実的な提案ではありません。