Q&A
質問文の読みづらさ、なんとかなりませんか。意味のない強調とか。
web上で動作する複数個質問があるアンケートを作成したいです。
1・前提、実現したい事
web上で動作する複数個質問があるアンケートを作成したいです。
レイアウトとしては
・問いかけ
○チェックボックス
○チェックボックス
○チェックボックス
次の質問へ
上記レイアウトのものを作成したいです。
制作にあたっての条件としては
・読み込みや条件分岐なし(余裕があれば教えていただきたいですが現状困っているのは条件分岐なしで制作しています)
・同じエリアに入れ替わる形(アニメーションは無し、ありでも可)
・1要素としてページ内に配置
という条件下で作成しています。
2・発生している問題・エラーメッセージ
私が制作するにあたりJqueruyのタブ切り替えコードを使って制作しましたが問題点があり、
・参考元コードがタブ毎に切り替えボタンがある(今回は簡単なアンケートの為一方通行にしたい)
・参考元コードはクリックした場所が同じ要素内で何番目にあるか判定している為、1表示ボタンを押しても1を表示させてしまいます。(本来は1の問題文が表示されている時は2を表示するボタンが見えていて欲しい、もしくは1に表示されているボタンが2を表示するボタンであって欲しい)
・そもそもこのコードが動作しているのか、動作している場合確認方法はあるのか
私が確認しているだけでもこれだけあり、ここの動作の確認ができないと他の肉付けもできない為手が止まってしまっています。。。
そもそもこの進め方は正解なのか、間違っている場合はどういった手法で進めていくのがいいのか教えて頂きたいです。
よろしくお願いいたします。
下記コードはhtml,CSSJqueryで作成していますがこの制作をきっかけに触り始めたものなのでこれを使うのが正解なのかがわかりません。
汚いですが添付させていただきます。
また作業環境はdreamweverです。
HTML(インラインでheadにCSS,body末尾にJquey)
1<!DOCTYPE HTML> 2<html> 3<meta charset="UTF-8"> 4<head> 5<style> 6 .P_question{ 7 width: 90%; 8 height: auto; 9 position: center; 10 border:10px solid 11 #C2C2C2; 12 border-radius:4px; 13 text-align:center 14} 15 16/*以下タブシステム*/ 17 18 19.P_question .area_Q 20{display:none; 21} 22 23.Q_bn2 24 {display:none;} 25 26 27.P_question .area_Q.active 28{display:block; 29} 30 31.Q_bn2.active 32 {display:block; 33 } 34 35/*Q_bn2 次へを有効化するシステム、ボタン*/ 36 .A_NEXT{width:100px; 37 color:#000000; 38 position: relative; top:center; left:40%; 39 background: #FF0000; 40 cursor: pointer; 41 } 42 43 .Q_bn2.active{ 44 position: relative; top:center; left:40%; 45 width:100px; 46 color:#FF0004; 47 background: #FF0004; 48 text-align: center; 49 cursor: pointer;} 50 51 52 53 54/*以下checkboxシステム*/ 55 56 57.Q_cx { 58 display: block; 59 position: relative; 60 margin: 1em 0; 61 padding-left: 28px; 62 user-select: none; /* テキストの選択を防ぐ */ 63} 64 65/* inputは非表示にする */ 66.Q_cx input { 67 display: none; 68} 69 70.Q_bn2 input { 71 opacity: 1; 72} 73 74/* □ */ 75.checkmark { 76 position: absolute; 77 top: 0; /* 上からの位置 */ 78 left: 50px; 79 height: 22px; /* 大きさ */ 80 width: 22px; /* 大きさ */ 81 border: groove 2px #d4dae2; /* 線 */ 82 border-radius: 4px; 83 box-sizing: border-box; 84} 85/* ✓ */ 86.checkmark：after { 87 content: ""; 88 position: absolute; 89 left: 5px; /* チェックの位置 */ 90 top: 1px; /* チェックの位置 */ 91 width: 6px; /* チェックの大きさ */ 92 height: 10px; /* チェックの大きさ */ 93 border: solid #FFF; 94 border-width: 0 2px 2px 0; 95 transform: rotate(45deg); 96 opacity: 0; /* 透明にしておく */ 97} 98 99/* チェックが入ったときの□ */ 100.Q_cx input:checked + .checkmark { 101 102 background: #2e80ff; /* チェック時の色 */ 103 border-color: #2e80ff; /* チェック時の色 */ 104} 105 106/* チェックが入ったときの✓ */ 107.Q_cx input:checked + .checkmark:after { 108 opacity: 1; /* 透明を解除 */ 109} 110 111/* チェックボックスプログラムの次へボタン透明化の削除 .Q_bn2 input:checked + .Q_bn2:after {opacity: 1;} 112*/ 113 114 115 </style> 116 117</head> 118 119<!--ここまで前提記述--> 120 121 122 <body> 123 <!--以前から定義していたタグ--> 124<div class="P_question"> 125 126 <div class="area_Q active"> 127 128 <h2>ここに質問を入力</h2> 129 <form> 130 <label class="Q_cx"> 131 <input type="checkbox"> <span class="checkmark"></span> Q1 132 </label> 133 134 <label class="Q_cx"> 135 <input type="checkbox"> <span class="checkmark"></span> Q2 136 </label> 137 138 <label class="Q_cx"> 139 <input type="checkbox"> <span class="checkmark"></span> Q3 140 </label> 141 <!--旧ボタン 142 <div class="Q_ba active"> 143 <label class="Q_bn"> 144 <button type="next">次へ</button> 145 </label> 146 </div> 147 --> 148 </form> 149 150 151 </div> 152 153 <!--<div class="A_NEXT"> 154 <p class="Q_bn2">次へ1</p> 155 </div> 156 --> 157 <!--Q1ページ--> 158 159 160 161 <div class="area_Q"> 162 163 <h2>ここに質問を入力2</h2> 164 <form> 165 <label class="Q_cx"> 166 <input type="checkbox"> <span class="checkmark"></span> Q11 167 </label> 168 169 <label class="Q_cx"> 170 <input type="checobox"> <span class="checkmark"></span> Q22 171 </label> 172 173 <label class="Q_cx"> 174 <input type="checkbox"> <span class="checkmark"></span> Q33 175 </label> 176 177 178 179 180 <!--<div class="Q_ba"> 181 <label class="Q_bn"> 182 <button type="next">次へ</button> 183 </label> 184 </div> 185 --> 186 </form> 187 188 <!--Q2ページ--> 189 190 191 </div> 192 193 <div class="A_NEXT"> 194 <p class="Q_bn2 active">次へ2</p> 195 </div> 196 197 198 <div class="area_Q"> 199 200 <h2>ここに質問を入力3</h2> 201 <form> 202 <label class="Q_cx"> 203 <input type="checkbox"> <span class="checkmark"></span> Q111 204 </label> 205 206 <label class="Q_cx"> 207 <input type="checkbox"> <span class="checkmark"></span> Q222 208 </label> 209 210 <label class="Q_cx"> 211 <input type="checkbox"> <span class="checkmark"></span> Q333 212 </label> 213 214 215 <!-- <div class="Q_ba"> 216 <label class="Q_bn"> 217 <button type="next">次へ</button> 218 </label> 219 --> 220 </form> 221 222 223 </div> <!--Q3ページ--> 224 <div class="A_NEXT"> 225 <p class="Q_bn2">次へ3</p> 226 </div> 227 228 229 230</div> 231 232 233 <script 234 src="https://code.jquery.com/jquery-3.6.0.min.js" 235 integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 236 crossorigin="anonymous"></script> 237 238 239 <script> 240 jQuery('.P_question .Q_bn2').click(function() { 241 var index = $('.P_question .Q_bn2').index(this); 242 var index ++ = this ; 243 jQuery('.P_question .area_Q, .P_puestion .Q_bn2').removeClass('active'); 244 jQuery(this).addClass('active'); 245 jQuery('.P_question .area_Q').eq(index).addClass('active'); 246}); 247 </script> 248 249 250 <script> //$('.P .BUTTON').click(function() { 251 //var index = $('.P .BUTTON').index(this); 252 //$('.ALLP .BUTTON, .P .BUTTON').removeClass('active'); 253 //$(this).addClass('active'); 254 //$('.P .BUTTON').eq(index).addClass('active'); 255 // }); 256 257 //問題_次へボタンを押す事で次の質問ページへ切り替え 258 //条件_ページを読み込ませてはいけない→別ページのリンク貼るのはナシ、ので 259 260 //現状↓ 261 //(ボタン).clickでfunction→(ここから(.ボタン)をクリックした際の処理) 262 //{.表示ページ .次へボタン(.this)が何番目のものか取得 263 //(.全体エリア .次へボタン . 全体エリア .表示ページ)removeclass('active');でactive要素を付与されて見える(block)ようになっているページをnone;状態にして隠す 264 //(this).adclass('active')でクリックしたa番目に定義されている(.表示ページ .次へボタン)へactive要素を付与 265 //(前提条件としてcssで.各動作させたい要素. active にblock要素を付与する記述)、 266 //→次のページが見えるようになる 267 268 //解決策 269 //buttonを2番目からスタートさせればok 270 //具体的な作業_var index = $('.P .Q_bn2').index(this);で取得したindex数字に+1できれば...終わり!! 271 272 //サンプルコード 273 //$('.tab_box .tab_btn').click(function() { 274 //var index = $('.tab_box .tab_btn').index(this); 275 //$('.tab_box .tab_btn, .tab_box .tab_panel').removeClass('active'); 276 //$(this).addClass('active'); 277 //$('.tab_box .tab_panel').eq(index).addClass('active'); 278 //}); 279 280 //In this case, the button needs to be hidden, so the active process needs to be doubled. 281 282 //Solution; Create an active system for the buttons, and for the buttons, add a +1 in the internal process to call up the next page. 283 </script> 284 285 286</body> 287</html>[リンク内容](url)
すみません。区切り線を引いたところが強調されてしまっているようで。。
カラの改行を入れればいいです。
ありがとうございます！！
回答も合わせてありがとうございます、今記載いただいたコードがどういうものか、かつDOM生成とcollapseの概念を理解しているところなので追ってご連絡させて頂きます！！
回答2件
0
アンケート製作とのことですが、
ページ遷移なし（別URLへの送信を伴わない）で作る場合、
アンケートの設問と回答箇所を、
質問（と回答）が変更になるたびに壊して作り直す形になります。
それに、ひとつの質問に対していくつ回答候補を設けるのか、
個数の制限が特にない場合には、個数の数だけ回答候補を表示する繰り返し処理にもなります。
壊して作り直す、という処理を、
a.雛形htmlを用意しておき虫食い状態にして文字列を流し込むところを予めdivやspanで用意しておくやり方と、
b.jQueryを駆使してDOM生成をJavaScriptでやりきる方法、
かなと思ったりします。
a.は基本的に$('#foo').text('～');みたいなのの羅列、divやspanにつけてるidを使って行います。
dreamweaverで見た目を先に仕上げていくスタイルには合うかもしれないけど、
先に言った、回答候補の繰り返しってエディタとしての支援がなければ結局ソースを手で変更することになりそう。
b.は例えばこんな感じ。（ちょっと前に作ったものから部分的に引用。）
JavaScript
1const collapse_div = $('<div></div>', { 2 "class": 'collapse facility-list', 3 id: 'facilityList'+kind.id 4}); 5for (const f of features_facilities) { 6 if (f.getProperties().kind === kind.name) { 7 collapse_div.append( 8 $('<div></div>', { 9 "class": 'row mx-0 px-1' 10 }).append( 11 $('<div></div>', { 12 "class": 'col-2 text-end px-1' 13 }).text(no++) 14 ).append( 15 $('<div></div>', { 16 "class": 'col-10 text-wrap px-1' 17 }).append( 18 $('<a></a>', { 19 href: '#', 20 "class": 'facility m-0 p-0', 21 on: { 22 click: function (evt) { 23 // 24 } 25 } 26 }) 27 .attr(～) 28 .attr(～) 29 .text(f.getProperties().name) 30 ) 31 ) 32 ); 33 } 34}
とかです。
出力されるhtmlをChromeのDevTools上で逐一確認しながら、
思ったhtmlとcssになるよう調整を加えていきます。
どっちみち、多かれ少なかれ、DOM操作しないとhtml上に文字列を流し込めないので、
jQueryを利用したDOM操作 要素の追加メソッドまとめ - Qiita
【jQuery】DOM要素の生成 - Qiita
など参考にすると良いかと。
投稿2022/03/03 01:59
退会済みユーザー
総合スコア0
0
自己解決
自己解決しました。
cssとjavaでページ毎に表示するものの条件付けをしました。
html/jquery/css
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<style type="text/css"> 6 7 .checkbox{ 8 user-select:none; 9 10 } 11 12 13 .page1 { 14 display:block; 15 width:320px; 16 height:320px; 17 background-color:gray; 18 color:white; 19 font-weight:bold; 20 } 21 .page2 { 22 display:none; 23 width:320px; 24 height:320px; 25 background-color:slategray; 26 color:white; 27 font-weight:bold; 28 } 29 .page3 { 30 display:none; 31 width:320px; 32 height:320px; 33 background-color:darkgray; 34 color:white; 35 font-weight:bold; 36 } 37 38 .button1 { 39 display:none; 40 } 41 42 43 .button2 { 44 display:block; 45 } 46 47 48 .button3 { 49 display:none;} 50 51</style> 52 <script type="text/javascript" language="javascript"> 53 54 function SelectPage( page ) { 55 /* 56 各ページのエレメントを取得 57 */ 58 var elementPage1 = document.getElementById( "page1" ); 59 var elementPage2 = document.getElementById( "page2" ); 60 var elementPage3 = document.getElementById( "page3" ); 61 62 63 var elementP1 = document.getElementById( "button1" ); 64 var elementP2 = document.getElementById( "button2" ); 65 var elementP3 = document.getElementById( "button3" ); 66 67 68 switch( page ) { 69 case 1: 70 elementPage1.style.display = 'block'; 71 elementPage2.style.display = 'none'; 72 elementPage3.style.display = 'none'; 73 elementP1.style.display = 'none'; 74 elementP2.style.display = 'block'; 75 elementP3.style.display = 'none'; 76 break; 77 78 case 2: 79 elementPage1.style.display = 'none'; 80 81 elementPage2.style.display = 'block'; 82 elementPage3.style.display = 'none'; 83 elementP1.style.display = 'none'; 84 elementP2.style.display = 'none'; 85 elementP3.style.display = 'block'; 86 break; 87 88 case 3: 89 elementPage1.style.display = 'none'; 90 elementPage2.style.display = 'none'; 91 elementPage3.style.display = 'block'; 92 elementP1.style.display = 'none'; 93 elementP2.style.display = 'none'; 94 elementP3.style.display = 'none'; 95 break; 96 } 97 }; 98 </script> 99 100</head> 101 102 103<body> 104<h1>reserve6</h1> 105<div id="page1" class="page1"> 106Q1 107 <ul> 108 <li><label class="checkbox"><p><input type="checkbox" name="A" value="A">選択肢1</p> 109 <p><input type="checkbox" name="B" value="B">選択肢2</p> 110 <p><input type="checkbox" name="C" value="C">選択肢3</p> 111 112 </label></li> 113 </ul> 114</div> 115 116<div id="page2" class="page2"> 117Q2 118 <ul> 119 <li>checkbox</li> 120 </ul> 121</div> 122 123<div id="page3" class="page3"> 124Q3 125 <ul> 126 <li>checkbox</li> 127 </ul> 128</div> 129 130 <div id="button1" class="button1"> 131 <input type="button" value="page1" onclick="SelectPage(1);"> 132 </div> 133 134 <div id="button2" class="button2"> 135 <input type="button" value="page2" onclick="SelectPage(2);"> 136 </div> 137 138 <div id="button3" class="button3"> 139 <input type="button" value="page3" onclick="SelectPage(3);"> 140 </div> 141 142</body> 143</html>
投稿2022/03/07 08:35
総合スコア26
あなたの回答
tips
プレビュー
