『勉強、頑張ってますかー？』のチャート
仕事休憩中に思いついた
『Day1～6の、if文・配列を使って『次の質問』『結果』を表示していくYes/Noチャート作れるのでは？』
そんなこんなで、簡単なチャート制作をしてみました！
※何となく思いつきで制作したので、質問内容・結果はめっちゃアホっぽいけど！笑
主な部分は
【qArray・yesArray・noArray】
→次に進む時に、配列から内容を取り出して表示する。
Yesをクリックしたとき・Noをクリックしたときの進行先を決定
【RewriteSrc(nextId)】
→nextIdが『質問』か『結果』かを判断する。
それに応じた表示をする。
【OnYesClick() & OnNoClick()】
→Yes/Noをそれぞれクリックした時に次の質問・結果を取り出して、RewriteSrc()へ渡す。
【OnAgainClick()】
→再度チャートをするため、質問・結果をリセット・やり直す。
【わからなかった部分・詰まった部分】
・startsWith()
→ if文を使って、
『もし、Yesをクリックしたら～』『もし、Noをクリックしたら～』の流れ から、次の質問・回答が取り出されるようにしよう！…と思ったけど
『。。。どうやってやるん？』
そこから、調べてたら
『startsWith()』というやつがあるらしい
startsWith()
文字列が引数で指定された文字列で始まるかを判定して true か false を返す
↓
『nextId.startsWith("q")』
「nextId」が「q」から始まるか判断して、true/falseを返す。
・各Arrayの配列順
→ 地味に配列順でconfuseした。。。
q1 で Yes をクリック → q2 に移動。
q1 で No をクリック → q3 に移動。
q2 で Yes をクリック → a1 に移動。
q2 で No をクリック → a2 に移動。
q3 で Yes をクリック → a3 に移動。
q3 で No をクリック → a2 に移動。
↓
var yesArray = ["q2", "a1", "a3"];
var noArray = ["q3", "a2", "a2"];
・css
txt-hideとtxt-displayでクラス名を付けていったけど、これもconfuse。。。
↑を参考にさせていただいた。。。
WEBサイトでも、たまに見かける診断チャートって
こんな感じになってるのかーと少しウキウキ…！
（実際もっと複雑なのは、もちろんですが。。。）
楽しかったー！
めっちゃ悩んで、調べて。。。繰り返したけど、
文章にするとあっさりしてるのなんでだ？笑
また、何か作ってみよー！