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

キャラの扱いに賛否あるようですが、むしろモブも名前ありキャラも同じように軽く扱ってるところが、キングスマンの面白さな気がする。次回作で、エグジーがサクッと死んだら、それはそれで面白い気がする。
今作は九段が若干むずかちいので十段ワンチャン出て来たくらいでやるとサクッといけると思いまつ
考えるのも飽きたしサクッと短作書いていこかな
無双8も出るしゲームし始めたらやっぱり最新作が着たくなるだろうから無双7以前の衣装もう処分したり解体してもいいんだけどなかなか手にかけられない圧倒的手間と制作費がかかってる……李典ちゃんは保存中鎧踏んで割ってサクッと処分したごめん。
私の卒制ですが本当に友人や家族や先生や音や建築や撮影やお手伝いのひとたちによって成り立っておりまじでサクッと作・岡ともみと言うのが気がひけるくらいなんですが、そういう周りのひとたちに絶対なにか返していけるように岡はやっていくからなという気持ちで作・岡ともみと言おうとおもう
haratomo君をいつでも誘拐できるようにキャラ作とかだけサクッとやっちゃおw
今週金曜日発売なわけだが 土曜日も仕事で 日曜日スタートにしようか、 それともキャラメイクだけやっとこうかなと悩みつつ 今作のキャラメイクだと 凄く悩みそうでサクッと作れないから 金曜日やっちゃうと 土曜日寝不足で仕事になるのが怖い…
次回作のためにスーツとタキシードを練習せねば。サクッと描けるようになりたい
ソシャゲなんて空いた時間にサクッとやれるのが最大のメリットだし、それに何作もある過去作全部の把握を求めるのはあまりにもねぇ……って思うよ

作った背景:分岐型の診断ページの説明用デモを作って欲しいと言われたので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;
        }
    };
[紹介元] CSSタグが付けられた新着投稿 – Qiita JavaScriptでサクッと作る分岐型診断ページ

  • コメント

    1. 匿名希望
      2018/01/18(木) 19:48:26

      キャラの扱いに賛否あるようですが、むしろモブも名前ありキャラも同じように軽く扱ってるところが、キングスマンの面白さな気がする。次回作で、エグジーがサクッと死んだら、それはそれで面白い気がする。

    2. 匿名希望
      2018/01/18(木) 19:48:26

      今作は九段が若干むずかちいので十段ワンチャン出て来たくらいでやるとサクッといけると思いまつ

    3. 匿名希望
      2018/01/18(木) 19:48:26

      考えるのも飽きたしサクッと短作書いていこかな

    4. 匿名希望
      2018/01/18(木) 19:48:26

      無双8も出るしゲームし始めたらやっぱり最新作が着たくなるだろうから無双7以前の衣装もう処分したり解体してもいいんだけどなかなか手にかけられない圧倒的手間と制作費がかかってる……李典ちゃんは保存中鎧踏んで割ってサクッと処分したごめん。

    5. 匿名希望
      2018/01/23(火) 11:00:17

      私の卒制ですが本当に友人や家族や先生や音や建築や撮影やお手伝いのひとたちによって成り立っておりまじでサクッと作・岡ともみと言うのが気がひけるくらいなんですが、そういう周りのひとたちに絶対なにか返していけるように岡はやっていくからなという気持ちで作・岡ともみと言おうとおもう

    記事に戻る

関連記事