【jQuery】Yes/No診断テストをバージョンアップしました!

この記事は約3分で読めます。
広告

いつも当ブログを見てくださりありがとうございます!
「Yes/No診断テスト」がバージョンアップしました!

以前のバージョンで、こうして欲しいとアイディアをいただき生意気ながら、診断テストのバージョンアップしてみようと思いました🌸(たなか様ありがとうございます!)
すぐ下のリンクから試してみてくださいね!
Yes/No診断テスト2.0

以前のバージョンとの比較画像
以前のバージョンでは、すべての質問のYesの数を合計して結果を表示していましたが、今回のバージョンは、各質問がYesまたはNoの場合を分岐できるようにしました。

今回のバージョンも再配布以外は著作権フリーで利用可能ですので、診断テストを作る機会がありましたら
下のダウンロードボタンよりダウンロードしてご利用ください。
診断テスト2.0をダウンロード

はじめに

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

利用方法

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

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

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

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

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

バージョン2.0では、結果の分岐がかなり有ります。
「Yes」の数だけで結果を分ける場合は最初のバージョンの診断テストを利用ください!

例えば質問が3つで回答が「Yes・No」の2つの時、結果は8通り必要で、質問が4つで回答が「Yes・No」の2つの時、結果は16通り必要で、質問が5つの時は32通り必要で、6つの時は64通り、7つの時は128通り、8つの時は256通り、9つの時は512通り結果が必要です。

結果の数は、乗法定理を使って求めることができます。
(乗法定理がよくわからないので自分はchat-GPTさんに聞きました)

7つ以上の質問は結果データが100以上とかなりの数になるので別シートに用意した方が混乱が少ないですね!

エンデ・バタローをフォローする
javascriptjQuery

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

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

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

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

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

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