押したボタンによって表示する内容を変えたい

押したボタンによって表示する内容を変えるWEBサイトを作りたいです。

こんな感じのよくある〇〇診断のように洗濯したボタンによって次に出でくる質問を変え、最後に「あなたは〇〇な人です！」のような表示を出したいです。

聞きたいことは２点
・どのように押したボタンによって次に出でくる質問を変える仕組みを作れるか
（ボタンを選択し、違うページに行くたびにURLを変えたほうがいいのか）
・最後にでる「あなたは〇〇な人です！」の〇〇の選び方はどう作れるか
if文を何個も書けばできると思うのですが、もっとスマートな方法はないのかなと

よろしくお願いいたします！！

defghi1977

2018/03/30 10:50

https://teratail.com/help/avoid-asking

行動規範の内容に同意します

回答2件

ざっくり考え方は3つあります

分岐はするが常に次の設問は同じ

YesとNoの傾向を係数化し合計していき点数の範囲で最終結果をだす

分岐ごとにすべて別々の設問を用意する

　例えば1問目をa1として分岐がYes：b1,No:b2
bからの分岐Cはb1のYes:c1、No:c2、b2のYes:c3、No:c4・・・・
傾向は細かく読めるが、設問を考えるのは大変で現実的ではない

分岐ごとに設問はわかれるが、ある程度収束する

　例えば1問目をa1として分岐がYes：b1,No:b2だとすると
bからの分岐Cがb1のYes:c1、b1のNoとb2のYesがc2、b2のNoがc3・・・
収束の仕方は法則性がなくてもいいが、整合性がとりにくい
YES,NOチャートの基本、ある程度の分岐で、ある程度の結果を得る

投稿2018/03/30 11:28

yambejp

総合スコア114769

ベストアンサー

なぜかPythonタグがついているようですが、ガン無視してjavascriptで書きます。
サンプル

HTML
1<div class="active">
2<p class="A">A?</p>
3<p class="B">B?</p>
4</div>
5<div id="A">
6<p class="AA">AA?</p>
7<p class="AB">AB?</p>
8</div>
9<div id="B">
10<p class="BA">BA?</p>
11<p class="BB">BB?</p>
12</div>
13<div id="AA">
14<p>you are AA.</p>
15</div>
16<div id="AB">
17<p>you are AB.</p>
18</div>
19<div id="BA">
20<p>you are BA.</p>
21</div>
22<div id="BB">
23<p>you are BB.</p>
24</div>

CSS
1div{
2  display:none;
3}
4.active{
5  display:block;
6}

js
1document.querySelectorAll('p').forEach(function(el){
2  el.addEventListener('click',function(e){
3    el.parentElement.classList.remove('active');
4    document.getElementById(el.className).classList.add('active');
5  })
6})