Quiz Generator Ranking+(4択クイズ ランキング機能付き Webアプリ)

Webサーバーにアップするだけで簡単に4択クイズを作成できるWebアプリにランキング機能を付けています。
クイズは複数作成でき、それぞれのクイズに違うスタイルを適用できます。ランキングもクイズ毎に作成されます。

スポンサーリンク

特徴

Webサーバーへアップするだけでクイズの作成&動作が出来ます。
クイズ履歴+クイズランキング機能付きです。
スクリプトはPHPで書いてありますので、PHPが使えるサーバーで動作します。

問題のランダム出題・回答のシャッフル機能・正解不正解の表示非表示・サウンドの有無・各問題に得点配分などクイズの機能は全て揃っています。
ゲーム感覚でホームページやブログに使っていただけます。

複数のクイズを作成でき、それぞれの設定やカスタムスタイルシートを適用できます。
履歴・ランキングデータもクイズ毎に作成されます。

Web(ブラウザ)上で動作するクイズエディタ付属でクイズの作成はフォームに記入していくだけ。問題・回答群・オープニングメッセージ・エンディングメッセージやサウンドの有無、簡単な設定をするだけでクイズの作成が出来ます。
またクイズ毎にスタイルシートを適用でき、スタイルシート変更画面で背景色・画像などをクイズ毎に指定できます。
クイズを作ってすぐに実行することが出来ます。色々な点を変更して実行画面を確認できます。

ダウンロード

“Quiz Generator Rnking+” をダウンロード quiz-generator-ranking.zip – 8 回のダウンロード – 426 KB

サンプル

クイズ実行サンプルです。

クイズエディタのサンプルです。(新しいタブで開きます。)

サンプルはクイズの保存が出来ません。
クイズの実行サンプルはエディタのクイズID(sakana kudamono)を入れて生成・実行してください。

設置方法

ダウンロードしてZIPファイルを解凍してご覧下さい。

ファイル一覧

  • quiz-generator-ranking
    • jquery-3.6.0.min.js – JQueryを使用
    • quiz-generator-ranking.js – クイズスクリプト本体
    • quiz-generator-ranking.css – クイズ用メインスタイルシート
    • quiz-generator-ranking.php – クイズ呼び出しスクリプト
    • quiz-editor.php – クイズエディタ
    • regist.php – クイズエディタ、履歴・ランキング登録で使用
    • data – クイズデータ保存用フォルダ
      • quiz-gr-defalt.js – クイズデータ(新規作成用)削除不可
      • quiz-gr-defalt.css – クイズスタイル(新規作成用)削除不可
      • その他の履歴ランキングデータ、クイズデータ.js & .css – クイズデータ
    • image – クイズ用画像フォルダ
    •  sound – クイズ用サウンドフォルダ

クイズを作成するとdataフォルダにクイズデータ・スタイル・履歴データ・ランキングデータが保存されます。

変更箇所

quiz-editor.phpをテキストエディタなどで開き、パスワードを設定してください。
これはクイズ改竄を防ぐためです。

function psw(){
	return "password"; // パスワードを記入してください。
}

その他の設定は不要です。フォルダごとFTPでアップロードしてください。

アップロードしたquiz-editor.phpをブラウザで開けばクイズエディタが動作します。
クイズ本体のHTMLの書き方はクイズエディタに表示されます。

クイズエディタ操作方法

Webサーバーにアップしたquiz-editor.phpをブラウザで開いてください。

初期画面

設定したパスワードを入力しクイズIDを記入。新規作成の場合は使われていないクイズIDを入力し、新規作成にチェックを入れてください。
下段には以前に作成したIDが表示されます。クリックするとIDをペーストします。

編集・新規作成画面

ファイル読み込み・新規作成をクリックすると次の画面になります。

クイズデータが読み込まれます。新規作成の場合は既定値が入ります。

ここからはV3と同じですのでこちらをご覧ください。エディタにも解説が書いてあります。

履歴一覧・ランキング関係の設定

履歴・ランキング登録関係の設定です。
名前の入力必須、匿名の場合の名前など設定できます。
詳しくはエディタに記載しています。

クイズ個別スタイルシートの設定

クイズ毎に個別にスタイルシートを書く事が出来ます。
要素にはコメントで書いてあります。コメント部分は削除可です。
また変更無い部分も親のスタイルシートで設定してありますので削除可です。
背景色や画像、文字の大きさ・色などを指定してください。

クイズファイルの生成・保存

クイズファイルの生成・保存ボタンをクリックするとクイズ設定とスタイルシートがdataフォルダに保存されます。

保存が成功するとクイズの実行・HTML貼り付けタグの表示が出来ます。

クイズの実行

クイズが実行されます。

HTML貼付けタグ出力

同時にHTML貼り付けタグが出力されます。コピーしてホームページやブログに貼り付けてください。念の為、URLをチェックしてください。

<iframe>タグを使い、PHPでパラメータを使い呼び出すクイズを指定しています。
width,heightはクイズ指定幅+枠線2pxx2としています。

クイズを別ウィンドウで呼び出す場合、src=で囲んだURL単体でも動作します。
新規タブや別ウィンドウで開くなど工夫してください。

クイズ生成・作成後にクイズ内容を変更した場合は再度「クイズファイルの生成・保存」をクリックしてください。尚、ブラウザのキャッシュが残っている場合は変更しても反映されない場合があります。その際はブラウザのキャッシュをクリアしてください。

履歴データ・ランキングデータの管理

履歴・ランキングデータに登録があれば表示されます。
ここで各データをクリアする事が出来ます。

動作確認

クイズエディタ

PHPが動作するサーバーが必要です。PHPはバージョン4以上です。

クイズ実行環境

Win/ Chrome Safari・android/ Chomeで動作確認しています。

ライセンス

個人利用(非営利)の場合、無償でご利用いただけます。クレジットは削除禁止です。
商用利用・法人使用は有償(1100円)になります。(クレジットは削除可)
個人使用でクレジットのみを削除したい場合も有償(1100円)です。
教育用・学校・オフライン環境での使用は無償です。クレジットは削除して構いません。

再配布・改造しての再配布は禁止させて頂きます。ご自身で改造して使用する場合、クレジットを削除しなければOKです。

このスクリプトを使用した、いかなる損害に対しても開発者は一切の責任を負いません。

フォーラムの使用報告に一言頂けると開発者が喜びます。

カスタマイズ

有償にてカスタマイズもお受けいたします。
お問い合わせから詳しいカスタマイズ方法など送信してください。

更新履歴

2022.06.11 公開