知人からYesNo診断のページ作りたいのだけれど、何か良いの知らないと聞かれ、簡単に調べてみて見当たらなかったのでサクッと作ったものを公開しておきます。
デモとソース
codepenにデモを設置してみたのですが、スマホからだと動作していない予感です。ソースをサーバーにアップすれば、もちろんスマホでも正しく動作します。
一応レスポンシブっぽくなっています。
ソースはGitHubにアップしてあります。
参考
CSSによる装飾は下記の記事を参考にしました。最近はCSS3を使えば画像なしに結構綺麗に仕上げられて良いですよね。
使い方や注意等
ソースを見ていただければわかるかと思いますが、id先にhrefやonclickの数字を充ているだけです。設問数など自由に増やせます。設問数が多くなるとこんがらがるのでエクセルなどで整理した方が良いかもしれません。
また勢いで作ったのでhtmlやCSS等だいぶ雑になっているのはご了承を。
GoogleAnalyticsのイベント機能と連動させればユーザー動向調査にも
純粋にコンテンツとしてもこれは使えますが、合わせてユーザーがどの結果たどり着いたかを集計できるようにしておけば、管理者側としてはアンケート結果集計装置にもなります。
googleAnalyticsが導入されているなら、イベントトラッキング機能を使うと楽でしょう。
具体的には、結果画面に遷移する質問のaタグのonclickに以下のように記述を追加していく形です。('result01'となっている部分を、解答ごとにわかりやすい名称に個別に変更していく。)
<a href="#101" onclick="showLAYER(101);ga('send', 'event', 'yesno', 'result', 'result01',1,{'nonInteraction': 1});" class="qabtn">
ユーザーの需要がこれで集められるようになるので便利ですね。ただアンケートに答えてくださいだと面倒ですが、これならお互いにメリットがある形ですので。
古参的なあとがき
昔はCGI配布サイトの「夢幻」など、こういったものがたくさんフリーで配布されていたのに、気がつけばそんな文化も減ってしまいなんだか寂しいですね。
もちろんGitHubのような進化した形もありますが、一からwebページを作るというのが一般の人がやるもので無くなってきて自然と敷居が上がったように感じられます。
学生時代に自分のホームページに掲示板設置するの楽しかったのになーなんて思っちゃいますよね。
