投稿日：2020-04-07T18:00:14+09:00

<jQueryで作る>画面がぱっぱ変わる性格診断アプリ

もともとのシュミレーション問い合わせ画面を、
ネットによくある性格診断アプリに変えて、簡単にコーディング。
今回は「選択するたびに質問がぱっぱ変わる性格診断アプリ」を作成。
デモはこちら。

See the Pen eYNqrPL by 坊拓磨 (@bo_chan6130) on CodePen.

準備物

①htmlとcssとjs
②表記をjQueryで書いているのでCDNで読み込んでおく。

今回はjsでの動作をメインにしている記事なので、cssはcode Penからコピペするかデザインしてください。

実装過程(思考)

①質問を回答(選択ボタンをおす)すれば、前の質問が消えて、次の質問が現れる
②回答の選択数に応じて答えの出し方を記述

の２つ。

以下説明。

①質問を回答すれば、前の質問が消えて、次の質問が現れる

index.html

<!DOCTYPE html>
<html>
<head>
  <title>パパッと変わる性格診断</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
</script>

<div class="choose_box">
      <div class="app-theme">
        <p>ぱっぱ画面が変わる性格診断アプリ(全5問)</p>
      </div>


 <!-- ここから５つ質問を記述 -->
      <!-- 質問1 -->
      <div id="q_01" class="fit">
        <p>質問1: あなたは普段　</p>
        <ul>
          <li><a class="btn" href="#q_02" data-value="a">話すペースが速い</a></li>
          <li><a class="btn" href="#q_02" data-value="b">話すペースがゆっくり</a></li>
        </ul>
      </div>

      <!-- 質問2 -->
      <div id="q_02" style="display: none;">
        <p>質問2:　あなたは普段、相手との会話で</p>
        <ul>
          <li><a class="btn" href="#q_03" data-value="a">間をとらずに話す</a></li>
          <li><a class="btn" href="#q_03" data-value="b">間をとりながら話す</a></li>
        </ul>
      </div>

      <!-- 質問3 -->
      <div id="q_03" style="display: none;">
        <p>質問3:　あなたの話し方は</p>
        <ul>
          <li><a class="btn" href="#q_04" data-value="a">語尾がキッパリ</a></li>
          <li><a class="btn" href="#q_04" data-value="b">語尾がソフト</a></li>
        </ul>
      </div>

      <!-- 質問4 -->
      <div id="q_04" style="display: none;">
        <p>質問4:　あなたは普段声が</p>
        <ul>
          <li><a class="btn" href="#q_05" data-value="a">大きめ</a></li>
          <li><a class="btn" href="#q_05" data-value="b">小さめ</a></li>
        </ul>
      </div>

      <!-- 質問5 -->
      <div id="q_05" style="display: none;">
        <p>質問5:　意見を求められた時、あなたは</p>
        <ul>
          <li><a class="btn end" data-value="a">自分から口火を切る</a></li>
          <li><a class="btn end" data-value="b">後から発言する</a></li>
        </ul>
      </div>



<!-- ここから以下回答 -->
 <!-- この辺に回答を記述 -->
 </div>




  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="index.js"></script>
</body>
</html>

①それぞれの質問に「#q_01」のようにidをふる。
②最初の「質問1」は画面に出力しておく。他の質問はdisplay:none;を記述し、あとで前の質問が回答されたら、次の質問のdisplay:none;を解除する、という指示をjsに後述。
③また合わせて、次の質問を出力する際にclass="fit"をaddClass()メソッドでつけることで、fitがついている質問のみを出力されるようにする。
④タグの２つの選択に、それぞれdata属性でa,bと値をふっておく。
⑤最後の質問「質問5」にはclassにendをつけておいて、「end」がクリックされたら結果が表示される仕組みをjsに後述する。

と、下処理はこんな感じ。

index.js

//ボタンを押すごとに画面が切り替わる関数
  $(function () {
    $(".btn").on("click", function () {
      //btnクラスをクリック後の関数処理
      $(this).closest("div").css("display", "none");
      //質問画面にあたらる親要素divをdisplay:none;にする
      id = $(this).attr("href");
      //次の質問hrefをidに格納
      $(id).addClass("fit").fadeIn("slow").show();
      //次の質問にfitをつけて出力。
    });

これで、画面の切り替える処理は終了。

②回答の選択数に応じて答えの出し方を記述

次に、回答に応じて答えを出力する処理を記述。
はじめにhtmlに回答を記述。

index.html

<!-- ここから以下回答 -->
  <!-- 回答の答え1 -->
     <div id="answer_01" class="result" style="display: none;">
      <div class="result_theme ">
            <p>あなたの性格は</p>
      </div>
      <div class="result_type0 ">
            <h4>『イケイケどんどん』タイプ</h4>
      </div>
      <div class="result_discription0">
        <h2>めっちゃ自己主張 × めっちゃスピーディ</h2>
        <p>
          　あなたは自己主張強いのでリーダーに向いています。今すぐリーダーになろう。
        </p>
      </div>
       <div class="return-btn">
        <a class="return" href="index.html">もどる</a>
       </div>
     </div>



  <!-- 回答の答え2 -->
     <div id="answer_02" style="display: none;">
          <div class="result_theme ">
            <p>あなたの性格は</p>
      </div>
      <div class="result_type1 ">
            <h4>『まろやか』タイプ</h4>
      </div>
      <div class="result_discription1">
        <h2>周りを立てる人 × じっくり考える人</h2>
        <p>
          　あなたは物事をじっくり考えて、最善策を練ることが得意。組織や周りを支えることが得意。
        </p>
      </div>
       <div class="return-btn">
        <a class="return" href="index.html">もどる</a>
       </div>
     </div>

①それぞれの回答のdivタグに「answer_01」のようにidをふる
②回答はdisplay:none;で隠しておく。あとで、回答に応じて、display:none;を解除する処理をjsに記述する。

index.js

//選択ボタンデータを配列に入れてカウントする関数
      var countA;
      //data-value="a"を選択した数を入れる変数
      var countB;
      //data-value="b"を選択した数を入れる変数
      var box =[];
      //それぞれのデータを配列に入れるための変数box
    $(".btn").each(function(){
      $(this).on('click',function(){
        var value = $(this).data("value");
         box.push(value);
         //data-value値をboxに入れる。(配列に値を入れるときはpush()を使用)

        countA = box.filter(function(x){
                      return x === "a"
                    }).length;
        //aの数を変数countAへ入れる
        countB = box.filter(function(y){
                        return y === "b"
                    }).length;
        //bの数を変数countBへ入れる
      });
    });

ここまでで選択するたびに、その選択したデータの数をcountA / countBに入っている。
(もともとの開発アプリから間引いたものなので、もしかした遠回りしているコーディングかもしれません)

以下、回答数に応じて答えを出力する処理を記述。

//結果を出力する関数
    $('.end').on('click',function(){
      //endクラスをクリックしたときの関数
      if( countA > countB ) {
        $('#answer_01').css("display",""); //回答1
      //answer_01のdisplayを""へ
      } else {
        $('#answer_02').css("display","");//回答2
      //answer_02のdisplayを""へ
    }
  });

display:none;をdisplay:"";とすることで、
選択された回答は出力されるように処理を記述。

これで、簡単な診断テストは完成。

まとめ

今回は２択問題で結果を出力しているが、
４択にしたい場合は、liタグを増やしてdata-valueをいじる→jsで該当処理をいじる
とすることもできるし、
回答数を増やす場合は、出力処理の条件を変更すれば、
簡単に出力できるはず。

コピペして使えると思うので、
使用したい方はドゾー

　 Tweet
Qiitaで続きを読む

投稿日：2020-04-07T12:10:39+09:00

CSS_flexbox【SKILLHUB学習まとめ⑥】

「新HTML/CSS入門講座」でflexboxを学習したのでまとめます。

基本は箱を作って、その中にまた箱を並べるイメージです。
html
<div class="container">
 <div class="box1">box1</div>
 <div class="box2">box2</div>
 <div class="box3">box3</div>
</div>

css
.container {
 display: flex;
}
.box1 {
 flex: 1;
}
.box2 {
 flex: 2;
}
.box3 {
 flex: 1;
}
このようにすると、box1,box2,box3を1：2：1の割合で横並びにできます。

便利なチートシートを見つけました☟解説も丁寧です。
日本語対応！CSS Flexboxのチートシートを作ったので配布します。

　 Tweet
Qiitaで続きを読む

投稿日：2020-04-07T04:59:33+09:00

初心者によるプログラミング学習ログ 283日目

100日チャレンジの283日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
283日目は、

おはようございます
283日目　2h
・xdデザインカンプからのサイト模写
・ヘッダーとフッターのブラウザ幅いっぱい表示#早起きチャレンジ #駆け出しエンジニアと繋がりたい #100DaysOfCode
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) April 6, 2020

　 Tweet
Qiitaで続きを読む

投稿日：2020-04-07T03:14:40+09:00

GitHub の「Fork」ボタンを「パクる」に置き換える UserCSS

User.css

CSSでは元のテキストが消せないので
『Fork is パクる』
となる様に調整。
user.css
@-moz-document domain("github.com") {
form.btn-with-count[action="/github/choosealicense.com/fork"] button::after {
    content:" is パクる";
}
}
実は置き換えてない。。。

表題詐欺
('A｀)

~~元ネタ~~ パクリ元

パクリ元に敬意を評して載せます。
謝辞。

・GitHub の「Fork」ボタンを「パクる」に置き換える UserScript - Qiita
https://qiita.com/foooomio/items/27429f0b136d0debe25b
からネタを頂きました。
@foooomio さんに謝辞。

・Toshihide Ii (BitByte) @IiToshihide - Twitter
https://twitter.com/IiToshihide/status/1246487047545556992
を参考にさせて頂きました。
@IiToshihide さんに謝辞。

えっ、丸パクリじゃん。
せめてどこから取ってきたかぐらい
もっと書くべき。
学生だからって、何でも許されるわけと
ちゃうやろ・・・
高専生って基本こういうイメージ、怖い・・・https://t.co/YKoOvgGplg
— Toshihide Ii (BitByte) (@IiToshihide) April 4, 2020

　 Tweet
Qiitaで続きを読む

投稿日：2020-04-07T03:14:40+09:00

GitHub の「Fork」ボタンを「Fork is パクる」にする UserCSS

User.css

CSSでは元のテキストが消せないので
『Fork is パクる』
で妥協
user.css
@-moz-document domain("github.com") {
form.btn-with-count[action="/github/choosealicense.com/fork"] button::after {
    content:" is パクる";
}
}
~~元ネタ~~ パクリ元

パクリ元に敬意を評して載せます。
謝辞。

・GitHub の「Fork」ボタンを「パクる」に置き換える UserScript - Qiita
https://qiita.com/foooomio/items/27429f0b136d0debe25b
からネタを頂きました。
@foooomio さんに謝辞。

・Toshihide Ii (BitByte) @IiToshihide - Twitter
https://twitter.com/IiToshihide/status/1246487047545556992
を参考にさせて頂きました。
@IiToshihide さんに謝辞。

えっ、丸パクリじゃん。
せめてどこから取ってきたかぐらい
もっと書くべき。
学生だからって、何でも許されるわけと
ちゃうやろ・・・
高専生って基本こういうイメージ、怖い・・・https://t.co/YKoOvgGplg
— Toshihide Ii (BitByte) (@IiToshihide) April 4, 2020

　 Tweet
Qiitaで続きを読む

20200407のCSSに関する記事は5件です。

<jQueryで作る>画面がぱっぱ変わる性格診断アプリ

準備物

実装過程(思考)

①質問を回答すれば、前の質問が消えて、次の質問が現れる

②回答の選択数に応じて答えの出し方を記述

まとめ

CSS_flexbox【SKILLHUB学習まとめ⑥】

初心者によるプログラミング学習ログ 283日目

100日チャレンジの283日目

GitHub の「Fork」ボタンを「パクる」に置き換える UserCSS

User.css

実は置き換えてない。。。

元ネタパクリ元

GitHub の「Fork」ボタンを「Fork is パクる」にする UserCSS

User.css

元ネタパクリ元

日付別

タグ一覧

20200407のCSSに関する記事は5件です。

<jQueryで作る>画面がぱっぱ変わる性格診断アプリ

準備物

実装過程(思考)

①質問を回答すれば、前の質問が消えて、次の質問が現れる

②回答の選択数に応じて答えの出し方を記述

まとめ

CSS_flexbox【SKILLHUB学習まとめ⑥】

初心者によるプログラミング学習ログ 283日目

100日チャレンジの283日目

GitHub の「Fork」ボタンを「パクる」に置き換える UserCSS

User.css

実は置き換えてない。。。

元ネタ パクリ元

GitHub の「Fork」ボタンを「Fork is パクる」にする UserCSS

User.css

元ネタ パクリ元

日付別

タグ一覧

元ネタパクリ元

元ネタパクリ元