LoginSignup
8

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-01-12

作った背景:分岐型の診断ページの説明用デモを作って欲しいと言われたので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;
        }
    };

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8