Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@reonwowwas(玲音 木戸)

選択肢が増やせる診断機能

Last updated at Posted at 2022-08-02

選択肢が増やせる診断機能を紹介します！！

1.コントローラーを作成します

 rails g controller sindans

2.コントローラーに以下を記載

def index 
end

3.index.html.erbに以下をコピペ

index.html.erb
    <header id="commonHeader">
        <section id="flowsHead" class="wf-mplus1p">あなたにあった〇〇が1分でわかる</section>
        <section id="flows" class="wf-mplus1p">〇〇診断</section>
        </header>
        
        <div id="wrapper">
           <div class="sense">
                <article id="pageBody">
        
                    <div class="point_box">
                    <div class="box">
                    <div class="txt">
                    <p>1分だけ下記の質問に答えてみてください。あなたにぴったりの〇〇がわかります!</p>
                    </div>
                    </div>
                    </div>
        
        
                    <ul class="qalist wf-mplus1p">
        
                    <li id="1" class="question">
                        <a name="#1"></a>
                        <div class="qbox"><span  class="q">Q.</span>あなたは〜ですか?</div>
                        <div class="qabox">
                            <a href="#2" onclick="show(2)" class="qabtn"><div class="btnBox btnBox_y">YES</div></a>
                            <a href="#3" onclick="show(3)" class="qabtn"><div class="btnBox btnBox_n">NO</div></a>
                        </div>
                    </li>
                    <li id="2" class="question" style="display:none;">
                        <a name="#"></a>
                        <div class="qbox"><span  class="q">Q.</span>〜ですか？</div>
                        <div class="qabox">
                            <a href="#101" onclick="show(101)" class="qabtn"><div class="btnBox btnBox_y">YES</div></a>
                            <a href="#102" onclick="show(102)" class="qabtn"><div class="btnBox btnBox_n">NO</div></a>
                        </div>
                    </li>
                    <li id="3" class="question" style="display:none;">
                        <a name="#"></a>
                        <div class="qbox"><span  class="q">Q.</span>〜ですか？</div>
                        <div class="qabox">
                            <a href="#103" onclick="show(103)" class="qabtn"><div class="btnBox btnBox_y">YES</div></a>
                            <a href="#104" onclick="show(104)" class="qabtn"><div class="btnBox btnBox_n">NO</div></a>
                        </div>
                    </li>
                    </ul>
        
                    <div class="answerList">
        
                        <div id="101" style="display:none;" class="answer point_box">
                            <div class="box">
                                <div class="title">
                                <p>あなたに勧める〇〇は<span class="fs-18"><span class="bg-y">『〇〇〇〇』</span></span>です！</p>
                                </div>
                            <div class="txt">
                                <div class="img">
                                <%= image_tag '' %></div>
                                <p>説明会文「タイトル」</p>
        <p>詳細を記載</p>
                                <p><a href="#" class="square_btn">もっと詳しくみる</a></p>
                            </div>
                            </div>
                        </div>
                        <div id="102" style="display:none;" class="answer point_box">
                            <div class="box">
                                <div class="title">
                                <p>あなたに勧める〇〇は<span class="fs-18"><span class="bg-y">『〇〇』</span></span>です！</p>
                                </div>
                            <div class="txt">
                                <div class="img">
                                <%= image_tag '' %></div>
                                <p>説明文「タイトル」</p>
        <p>詳細を記載</p>
        <p>詳細を記載</p>
        <p>詳細を記載</p>
                                <p><a href="#" class="square_btn">もっと詳しくみる</a></p>
                            </div>
                            </div>
                        </div>
                        <div id="103" style="display:none;" class="answer point_box">
                            <div class="box">
                                <div class="title">
                                <p>あなたに勧める〇〇は<span class="fs-18"><span class="bg-y">『〇〇』</span></span>です！</p>
                                </div>
                            <div class="txt">
                                <div class="img">
                                <%= image_tag '' %></div>
                                <p>説明文「タイトル」</p>
        <p>詳細を記載</p>
        <p>詳細を記載</p>
        <p>詳細を記載</p>
                                <p><a href="#" class="square_btn">もっと詳しくみる</a></p>
                            </div>
                            </div>
                        </div>
                        <div id="104" style="display:none;" class="answer point_box">
                            <div class="box">
                                <div class="title">
                                <p>あなたに勧める〇〇は<span class="fs-18"><span class="bg-y">説明文「タイトル」</span></span>です！</p>
                                </div>
                            <div class="txt">
                                <div class="img">
                                <%= image_tag '' %></div>
                                <p>説明文「タイトル」</p>
        <p>詳細を記載</p>
        <p>詳細を記載</p>
        <p>詳細を記載</p>
                            </div>
                            </div>
                        </div>

        
        
                </article>
            </div>
        </div>
        
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
        
        <script type="text/javascript">
        $(function(){
           $('a[href^=#]').click(function() {
              var speed = 600;
              var href= $(this).attr("href");
              var target = $(href == "#" || href == "" ? 'html' : href);
              var position = target.offset().top;
              $('body,html').animate({scrollTop:position}, speed, 'swing');
              return false;
           });
        });
        $(function(){
            h = $(window).height();
            h = h-30;
            $(".question").css("min-height", h + "px");
            $(".answerList .box").css("min-height", h + "px");
            
        });
        function show(idName){ 
            $("#" + idName).show();
        }
        
        </script>
        
        
</body>
</html>

3.次にindex.CSSに以下をコピペします！！

index.css
@charset "utf-8";

/* reset style
------------------------------------------ */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:top}
article,aside,figure,footer,header,nav,section,details,summary{display:block}
html{overflow-y:scroll;-webkit-tap-highlight-color: rgba(0,0,0,0);}
/* a{color:#444444;margin:0;padding:0;text-decoration:none} */
ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
th{font-weight:700;vertical-align:top;word-break:break-all;word-wrap:break-word}
td{font-weight:400;vertical-align:top;word-break:break-all;word-wrap:break-word}

body {
    font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    font-size: 14px;
    line-height: 1;
    color: #535353;
}

.wf-mplus1p { font-family: "Mplus 1p"; }


#commonHeader {
    position: relative;
    margin: 0 auto;
  
    
    color: #5391BA;
    font-weight: bold;
    text-align: center;
    padding: 0.25em;
    border-top: solid 2px #6cb4e4;
    border-bottom: solid 2px #6cb4e4;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);

}
#commonHeader section#flows {
    margin: 0 auto;
    max-height: 170px;
    position: relative;
    
    font-size: 360%;
    text-align: center;
    padding:5px 5px 30px;

}

#flowsHead{
    font-size: 100%;
    text-align: center;
    padding-top: 30px;
    padding:30px 5px 5px;

}

#commonHeader section#flows a.homeLink {
    width: 555px;
    height: 58px;
    position: absolute;
    left: 200px;
    top: 77px;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
}
article:after, section:after, .clrFx:after {
    content: '';
    clear: both;
    display: block;
}
.sense {
    padding: 0 0 35px 0;
    /* margin: 0 auto; */
    max-width: 980px;
    margin: 0 auto;
}


.hsd_question {
    position: relative;
    overflow: hidden;
    margin-bottom: 65px;
    margin-top: 50px;
}
.hsd_question ul {
    position: relative;
    left: 50%;
    float: left;
}
.hsd_question li {
    position: relative;
    left: -50%;
    float: left;
}
#pageBody p {
    margin-bottom: 1em;
}
.hsd_question_txt {
    padding: 8px 10px 0px 12px;
    font-size: 25px;
    color: #282828;
    text-align: center;
    font-family: "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}
.hds_answer {
    position: relative;
    overflow: hidden;
    margin-bottom: 85px;
}
.hds_answer ul {
    position: relative;
    left: 50%;
    float: left;
}
.hds_answer li {
    position: relative;
    left: -50%;
    float: left;
}
.img-yes {
    font-size: 10px;
}

#wrapper {
    position: relative;
    clear: both;
}
.margin {
    background-color: #fff;
    width: 50px;
    height: 151px;
}
.qalist{
    min-width:320px;
    max-width:800px;
    margin:0 auto;
}
.qalist li {
    font-size:130%;
    font-weight: bold;
    padding-top: 30px;
}

.qbox{
    text-align:center;
}
.qabox{
    width:300px;
    margin: 0 auto;
}

.question {
  font-size:15px;
  line-height:1.5em;
  padding:10px;
}
.question:after{
    clear:both;
}
.answer {
  font-size:15px;
  line-height:1.5em;
  color:#000000;
  padding:10px;
}
.sig{
  text-align:right;
  font-size:xx-small;
}


.qabtn {
    position: relative;

}
.qabtn::before,
.qabtn::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.qabtn,
.qabtn::before,
.qabtn::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}


.qabtn:active {
  top: 3px;
  box-shadow: none;
}
.qabtny{
    margin-right:30px;
}

.btnBox{
    text-align:center;
    width: 90px;
    float: left;
    height: 90px;
    padding: 20px;
    border-radius: 90px;
    cursor :pointer;
    
    color: #fff;
    font-size:150%;
    line-height: 90px;
    
    margin-top:30px;
}

.btnBox_y{
    background-color: #FF8DB4;
    margin-right: 40px;
}

.btnBox_n{
    background-color: #62D7DE;
}

.btnBox_x{
    background-color: #94FF99;
}

.btnBox_o{
    background-color: #006699;
    margin-left: 40px;
}

.btnBox_u{
    background-color: #C60710;
  margin-right: 40px;
}

.btnBox_w{
    background-color: #55468C;
  margin-left: 40px;
}

.btnBox_z{
    background-color: #F2D680;
   
}

.btnBox_r{
    background-color: #F2D680;
    font-size: 18px;

   
}



.q{
    font-family: "Mplus 1p";
    font-size:300%;
    height: 50px;
    color:#F55257;
}


.point_box {
    background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    padding: 4px;
    margin: 10px 5px 10px;
    font-size:110%;
}

.point_box .box {
    padding: 5px 5px 1px;
    background-color: #fff;
}

.point_box .title {
    font-weight: bold;
    font-size: 115%;
    position: relative;
    line-height: 1.2;
}
.point_box .title{
    position: relative;
    border-top: solid 2px #80c8d1;
    border-bottom: solid 2px #80c8d1;
    background: #f4f4f4;
    line-height: 1.4;
    padding: 0.4em 0.5em;
    margin: 1em 0 0.5em;
    text-align: left;
}

.point_box .title:after {/*タブ*/
    position: absolute;
    font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
    content: '\f0a7\ Result';
    background: #80c8d1;
    color: #fff;
    left: 0px;
    bottom: 100%;
    border-radius: 5px 5px 0 0;
    padding: 5px 7px 3px;
    font-size: 0.7em;
    line-height: 1;
    letter-spacing: 0.05em;
}

.point_box .box .txt {
    padding: 10px 10px 0px;
    line-height: 1.45;
    text-align: left;
}
.bg-y {
    background: #FFFF73;
}
.fs-18 {
    font-size: 120%;
    font-weight: bold;
    line-height: 140%;
}
.redtext, .red {
    color: #D03F37;
}
.img {
    margin: 0 auto 10px;
    max-width: 500px;
}
.img img {
    max-width: 100%;
}

#pageBody .title p{
    margin:3px 0 1px;
}

.square_btn{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #f7f7f7;
    border-left: solid 6px #ff7c5c;/*左線*/
    color: #ff7c5c;/*文字色*/
    font-weight: bold;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.square_btn:active,
.square_btn:hover {
    box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
    transform: translateY(2px);
}

コードの解説

最初の質問は、idが「1」のli要素で表されています。質問のテキストは「あなたは〜ですか?」となっており、ユーザーは「YES」または「NO」のいずれかを選択することができます。

質問のリストは、idが「1」のli要素から始まります。また、各質問は「question」というクラスを持つli要素で表されています。

 <li id="1" class="question">
                        <a name="#1"></a>
                        <div class="qbox"><span  class="q">Q.</span>あなたは〜ですか?</div>
                        <div class="qabox">
                            <a href="#2" onclick="show(2)" class="qabtn"><div class="btnBox btnBox_y">YES</div></a>
                            <a href="#3" onclick="show(3)" class="qabtn"><div class="btnBox btnBox_n">NO</div></a>
                        </div>
                    </li>
                    <li id="2" class="question" style="display:none;">
                        <a name="#"></a>
                        <div class="qbox"><span  class="q">Q.</span>〜ですか？</div>
                        <div class="qabox">
                            <a href="#101" onclick="show(101)" class="qabtn"><div class="btnBox btnBox_y">YES</div></a>
                            <a href="#102" onclick="show(102)" class="qabtn"><div class="btnBox btnBox_n">NO</div></a>
                        </div>
                    </li>

下記のコードのは、質問が階層的に配置されており、ユーザーは「YES」または「NO」のいずれかの回答を選択できます。
「YES」を選択する場合、idが「2」のli要素が表示されます（style属性が「display:none;」から変更されます）。この質問は「〜ですか？」というテキストで表されており、ユーザーは再び「YES」または「NO」を選択することができます。　

各質問は、ユーザーが回答を選択すると指定されたJavaScript関数（show）が呼び出されます。この関数は、選択された回答に基づいて他の質問を表示または非表示にする役割を果たします。たとえば、最初の質問で「YES」が選択された場合、idが「2」の質問が表示されます。　

質問のテキストは「qbox」クラスのdiv要素内に含まれており、質問の番号と質問の内容が表示されます。
「qabox」クラスのdiv要素内には、YESとNOの回答を選択するためのリンクが含まれています。これらのリンクには、質問の次のステップに進むためのshow関数がonclickイベントとして設定されています。

結論何が言いたいかというと、qaboxクラスのdiv要素内には、YESとNOの回答を選択するためのリンクが含まれています。YESボタンのリンクは#2にジャンプし、NOボタンのリンクは#3にジャンプします。

  <a href="#2" onclick="show(2)" class="qabtn"><div class="btnBox btnBox_y">YES</div></a>
                            <a href="#3" onclick="show(3)" class="qabtn"><div class="btnBox btnBox_n">NO</div></a>

選択肢を増やしたい場合

質問の要素を追加する:
新しい質問を追加するために、<li>要素をコピーし、新しいidを割り当てます。例えば、<li id="4" class="question">とします。
質問のテキストを設定する:
新しい質問のテキストを<div class="qbox">内に入力します。

回答の選択肢を追加する:
新しい回答の選択肢を<div class="qabox">内に追加します。
YESボタンとNOボタンのリンクを追加します。
リンクのhref属性には、新しい質問のidを指定します。例えば、YESボタンのリンクは<a href="#5" onclick="show(5)" class="qabtn">のようになります。

回答の要素を追加する:
新しい回答の要素を<div class="answerList">内に追加します。
回答の要素には、新しいidを割り当てます。例えば、<div id="5" style="display:none;" class="answer point_box">とします。
回答の内容を入力します。

このようにして、質問と回答の選択肢を追加することができます。選択肢が増えるたびに、新しい質問と回答の要素を追加し、適切なidとリンクを設定してください。


 <li id="4" class="question">
                        <a name="#4"></a>
                        <div class="qbox"><span  class="q">Q.</span>あなたは〜ですか?</div>
                        <div class="qabox">
                            <a href="#5" onclick="show(5)" class="qabtn"><div class="btnBox btnBox_y">YES</div></a>
                            <a href="#6" onclick="show(6)" class="qabtn"><div class="btnBox btnBox_n">NO</div></a>
                        </div>
                    </li>

  <div id="5" style="display:none;" class="answer point_box">
                            <div class="box">
                                <div class="title">
                                <p>あなたに勧める〇〇は<span class="fs-18"><span class="bg-y">『〇〇』</span></span>です！</p>
                                </div>
                            <div class="txt">
                                <div class="img">
                                <%= image_tag '' %></div>
                                <p>説明文「タイトル」</p>
        <p>詳細を記載</p>
        <p>詳細を記載</p>
        <p>詳細を記載</p>
                                <p><a href="#" class="square_btn">もっと詳しくみる</a></p>
                            </div>
                            </div>
                        </div>
  <div id="6" style="display:none;" class="answer point_box">
                            <div class="box">
                                <div class="title">
                                <p>あなたに勧める〇〇は<span class="fs-18"><span class="bg-y">『〇〇』</span></span>です！</p>
                                </div>
                            <div class="txt">
                                <div class="img">
                                <%= image_tag '' %></div>
                                <p>説明文「タイトル」</p>
        <p>詳細を記載</p>
        <p>詳細を記載</p>
        <p>詳細を記載</p>
                                <p><a href="#" class="square_btn">もっと詳しくみる</a></p>
                            </div>
                            </div>
                        </div>

同じ階層にボタンを増やしたい場合、以下のように記載する

<li id="1" class="question">
                        <a name="#1"></a>
                        <div class="qbox"><span  class="q">Q.</span>あなたは〜ですか?</div>
                        <div class="qabox">
                            <a href="#2" onclick="show(2)" class="qabtn"><div class="btnBox btnBox_y">おにぎり</div></a>
                            <a href="#3" onclick="show(3)" class="qabtn">　　　　　　　　　　　<div class="btnBox btnBox_n">サンドイッチ</div></a>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 <a href="#4" onclick="show(4)" class="qabtn"><div class="btnBox btnBox_n">カレー</div></a>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 <a href="#5" onclick="show(5)" class="qabtn"><div class="btnBox btnBox_n">野菜</div></a>　
                        </div>
                    </li>

また、色をボタンの色を変えたい場合btnBoxの値を変更してCSSに付け加えれば色が変更します

 <a href="#4" onclick="show(4)" class="qabtn"><div class="btnBox btnBox_w">カレー</div></a>
//btnBoxの値を変更してCSSに付け加えれば色が変更する

結果に画像を表示させたい場合、imag_tagに画像の名前を入れれば診断結果に画像が入ります

 <div class="img"> <%= image_tag '画像の名前' %></div>

以上で診断機能の解説を終わりにします！！！

3
1
0

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
Sign upLogin
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?