Yes/No診断テストをjQueryで作りました!ダウンロードですぐに利用可能

CSS
この記事は約3分で読めます。
スポンサーリンク

いつも当ブログを見てくださりありがとうございます!
「Yes/No診断テスト」を自由に使っていただけるよう、jQueryで作成しました。
Yes/No診断テスト
再配布以外は著作権フリーで利用可能ですので、診断テストを作る機会がありましたら
下のダウンロードボタンよりダウンロードしてご利用ください。
診断テストをダウンロード

はじめに

「Yes/No診断テスト」は、HTML、CSS、javascriptに、ある程度理解のある方を対象としております。
「Yes/No診断テスト」は、javascriptライブラリ「jQuery3.2.1」を利用して作成しています。
カスタマイズした「Yes/No診断テスト」をサーバーへアップしてご利用ください。

利用方法

下のダウンロードボタンから「quesitons.zip」をダウンロードしてご利用ください。
診断テストをダウンロード

診断テストの質問変更方法

Yes/No診断テスト画像
診断テストの質問は「index.html」に書いてます。
「index.html」ファイルの中の「.questions」内が質問内容になります。
ブラウザで表示すると質問内容以外に「Q,1」や「Yes」「No」のボタンがありますが
これはjavascriptで追加している要素になります。
質問番号「Q,1」が不要な場合は、「common.js」ファイルを編集してください。
診断テストサンプルの質問が5問用意されていますが、質問数や質問文言など自由に書き換えてご利用してください。
進行状況を表すプログレスバーも質問数に応じてイイ感じに自動で変更されます。

診断テストの結果変更方法

Yes/No診断テスト画像
診断テストの結果を変更する場合は「common.js」を編集します。
「common.js」の91行目「// 診断テスト結果」から編集してください。
質問数を変更した場合は、結果も同じように増やしたり減らしたりしてくださいね。

ソーシャルリンクの変更方法

質問ページの「index.html」と、診断結果ページの「answer.html」には
ソーシャルへのリンクアイコンが用意してあります。
アイコンがSVGの直書きで、pathの数字が長いからソースの見栄えが悪いよね。
苦し紛れのコメントアウトで何のアイコンか書いてあるので、なんとかなってるかな?
必要に応じてリンクの追加とアイコンの削除お願いします。
自分の場合は、「twitter」「instagram」「pinterest」だけですね。。。
Youtubeチャンネルとか作りたいけど、なかなかできずにいます。

デザインについて

デザインは流行りのニューモフィズムで作成しました。
さっとミニマムな雰囲気になる「ニューモフィズムジェネレーター」もあるので、フラットなボタンデザインに飽きたら、デザインに追加してみてはいかがでしょう?

ニューモフィズムについて

2020年初頭に、新しいデザインのトレンド「ニューモーフィズム(Neumorphism)」が注目を集めました。
フラットデザインやマテリアルデザインのようなミニマムでシンプルな要素と、スキューモーフィズムの現実的な立体感が組み合わさったデザイン手法。

その他

スマホ、PCの両方で機能するレスポンシブレイアウトになっていて
お手持ちのスマホの画面設定に合わせてカラーの変更をしていますので
iPhoneの場合、「設定」から「画面表示と明るさ」へ行き、そこの「外観モード」の設定でライト・ダークを変更して表示してみてください!
参考:CSSでダークモードに即対応。OSの画面設定をウェブでも利用しよう!

もしダークテーマの時に背景真っ黒が良かったらCSSを修正してみてね!

あと、プログレスバーが、質問数に応じて可変するから質問数を気にしなくても
いい感じの見た目と機能が実装可能なのが嬉しい所。

SNSフォローボタン
エンデ・バタローをフォローする
CSSHTMLjavascriptjQueryサイト制作デザイン

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

  1. エンデ・バタロー様

    お返事ありがとうございます。

    早速、試させていただきました。

    私の説明不足で申し訳ありません。

    「YES・NO」のボタンにリンクを貼るのではなく、

    「common.js」ファイル内の

    // 診断テスト結果

    この部分になります。

    〇〇〇タイプの方は、テキストテキストテキス 。テキストテキストテキストテキストテキストテキスト。

    こちらを

    〇〇〇タイプの方は、テキストテキストテキス 。テキストテキストテキストテキストテキストテキスト。<a href="http://リンク先アドレス&quot; rel="nofollow ugc">詳細はコチラ!</a>

    このような感じでリンクを貼りたいです。

    また、 診断テスト結果内に

    このようなタグで画像も表示したいです。

    言葉足らずですいませんでした。

    • 稲葉様

      お世話になります!
      ご確認いただきありがとうございますm(__)m

      あぁ。。。申し訳ないです!
      質問ページ内だと勘違いしておりました!
      急いで修正しましたので下記のリンクよりダウンロードしご確認ください!

      診断テスト(修正版)をダウンロード

      これでもう完璧なはずです!

      • エンデ・バタロー様

        稲葉です。

        できました。

        うれいしいです。

        本当にありがとうございました。

  2. エンデ・バタロー様

    Yes/No診断テストを使わさせていただいております。

    ちょっと質問があってコメントしています。

    「common.js」ファイルを編集しているのですが、htmlを記入すると表示されない場合があります。

    例えば・・・

    <a href="リンク先のURL" rel="nofollow ugc">アンカーテキスト</a>

    このようなタグを書くと表示されません。

    また、

    <b></b>
    <strong></strong>

    これらのタグは問題なく使えます。

    リンクタグを使うにはどうすればいいのでしょうか?

    もし、よろしかったら教えていただけないでしょか?

    よろしくお願いします。

    • 稲葉様

      お世話になります!

      リンクタグを利用できるよう修正しましたので
      下記のリンクよりダウンロードしご確認ください!

      診断テストをダウンロード

      【修正箇所について】

      「common.js」内の↓の箇所を書き換えております!
      pタグでaタグを囲むようにすると良い感じにできます。

      ——— common.js —————

      // 各問題に[Yes]、[No]ボタンを追加
      q_list.eq(i).append('<div class="select"><p>YES</p><p>NO</p></div>');

      ————————————–

      また、「style.css」についても記述を追加しました!
      変更箇所のみ記述してある「_style.css」のソースを、ご自身のcssファイルに追加してくださいね!

      稲葉様の力になれれば嬉しい限り♪

タイトルとURLをコピーしました