HTML
CSS
JavaScript

JavaScriptでサクッと作る分岐型診断ページ

作った背景:分岐型の診断ページの説明用デモを作って欲しいと言われたのでJavaScriptで作りました

①HTMLとCSS

※CSSは適当なので、気にしないでください。

HTML
<!DOCTYPE html>
<html>
<head>
  <title>診断ページ</title>
  <style type="text/css">
    html{
      font-size: 62.5%;
    }
    *{
      margin: 0;
      padding: 0;
    }
    p{
      font-size: 2rem;
      padding: 40px 0;
      color: #333;
      font-weight: bold;
    }
    body{
      width: 100%;
      height: 480px;
      margin: 80px 0;
      background-color: #e4f3f9;
    }
    div.content-area{
      width: 600px;
      margin: 0 auto;
      text-align: center;
    }
    input.button{
      font-size: 2.0rem;
      height: 64px;
      width: 240px;
      background-color: #1f7a9e;
      margin: 0 10px;
      border-radius: 8px;
      color: #fff;
      font-weight: bold;
      text-shadow: 0 0 7px #000;
    }
    div.course-name{
      padding: 20px 0;
      color: orange;
      font-size: 4rem;
    }
  </style>
</head>
<body id="body">
<div class="content-area">
  <div id="question-area">
  <p id="question-text"></p>
  <input class="button" type="button" name="button-yes" value="はい" onclick="clickYes()"><input class="button" type="button" name="button-no" value="いいえ" onclick="clickNo()">
  </div>
  <div id="answer-area">
    <p id="answer-text">答え</p>
  </div>
</div>
</body>
</html>

②JavaScript

JavaScript
    document.getElementById('answer-area').style.display = 'none';
    let judgeNum = 0;
    let judge = false;
    let courseName = 'もう一度最初からやり直してください'
    const questionTagObj = document.getElementById('question-text');
    const questionList  = [
    { question: '資格をすでに持っている'},
    { question: '経験5年以上'},
    { question: '経験3年以上'},
    { question: '経験したことがある'}
    ];
    questionTagObj.innerText=questionList[0].question;
    const courseList = [
    { course: 'プロコース' },
    { course: '上級者コース' },
    { course: '中級者コース' },
    { course: '初心者コース' }
    ]

    function clickYes(){
      judge = true;
      judgeCourse(judgeNum);
      console.log(courseName);
      document.getElementById('body').style.backgroundColor = '#f9ecd6';
      document.getElementById('question-area').style.display = 'none';
      document.getElementById('answer-area').style.display = 'block';
      document.getElementById('answer-text').innerHTML = '【あなたにおすすめのコース】<br><div class="course-name">' + courseName + '</div>';
    };
    function clickNo(){
      judge = false;
      judgeNum = judgeNum + 1;
      if(judgeNum === 4){
        clickYes();
      }else{
        nextQuestion(judgeNum);
      }
    };
    function nextQuestion(num){
      if(!judge){
        questionTagObj.innerText = questionList[num].question;
      }else{
        clickYes();
      }
    }
    function judgeCourse(num){
        switch (num){
        case 0:
          courseName = courseList[0].course;
         break;
        case 1:
          courseName = courseList[1].course;
          break;
        case 2:
          courseName = courseList[2].course;
          break;
        case 3:
          courseName = courseList[2].course;
          break;
        case 4:
          courseName = courseList[3].course;
          break;
        }
    };