QuizGeneratorにオリジナルCSS･JSをカスタマイズする
QuizGeneratorにオリジナルCSS･JSをカスタマイズする
QuizGeneratorのライセンスをご購入すると、お客様のお好みに合わせて、『 プレイヤー画面のデザインの変更・システム内の言葉を自由に変更 』することができます。それに加え、リスニング問題などで活用される『 音声合成機能 』のオプション設定をプレイヤー内に制限なく設定することができます。
※learningBOX（https://lms.quizgenerator.net/）内のご注文画面からQuizGeneratorのライセンスをご購入頂いた場合は、learningBOXの設定画面にて、自動でライセンスキーが設定されます。本ページは、QuizGenerator（https://quizgenerator.net/）内のページからライセンスキーをご購入された場合について説明しています。
こちらのページではライセンス購入後のオリジナルCSS･JSをカスタマイズする設定方法についてご紹介します。
ライセンス購入後のプレイヤー画面はこちらです。
QuizGeneratorにオリジナルCSS･JavaScriptをカスタマイズする方法
オリジナルCSS･JSをカスタマイズをする場合、ライセンスのご購入が必要です。ライセンスの価格については、1ヶ月間のライセンスが5,500円（税込み）、1年間のライセンスが22,000円（税込み）となっております。ライセンスをまだ購入されていないお客様はこちら購入することができます。
➡ QuizGeneratorのライセンスを購入する
QuizGeneratorのライセンスは決済後、決済時に入力したE‐mailアドレスにライセンスキーが配信されます。決済時に入力したE‐mailアドレス・ライセンスキーはこの後の設定で使いますので、ひかえておいてください。（メールが届かない場合はスパムフィルタに掛かっていないか確認して下さい。）
カスタマイズに使うCSSとJavaScriptをご紹介いたします。
今回は練習なので、上記のQuizGeneratorに使用されているCSS、JavaScriptを例にご紹介いたします。
▼QuizGeneratorに実装されているCSS・JavaScriptはこちらです。
CSSとJavaScriptをダウンロードします
まず初めに、カスタマイズに使用する、CSSとJavaScriptを変換元ファイルからダウンロードします。
▼こちらの動画をご覧ください。
１．変換元ファイルをクリックして、ZIPファイルをダウンロードします。
２．次にZIPファイルを解凍します。
３．すべて展開 >> 展開とお進みください。
４．展開ボタンをクリックすると、ファイルが解凍されます。
テキスト・エクセルから設定する方法
解凍されたZIPファイルの中には、『 CSSファイル・JavaScriptファイル・クイズ 』が入っています。こちらの3つのファイルを使ってカスタマイズしていきます。クイズをテキスト・エクセルで作成した場合の手順は下記の通りとなります。
- テキスト
- エクセル
▼作業手順１．解凍したオリジナルのCSSファイル、JavaScriptファイル、クイズを用意します。
▼作業手順２．オリジナルのCSSのファイル名を「add_personal.css」にし、オリジナルのJSのファイル名を「add_personal.js」にして作成します。
※変換元ファイルからダウンロードされたCSS・JavaScriptファイルは既に「add_personal.css」、「add_personal.js」の状態で保存されています。お客様自身で、CSS・JavaScriptファイルをご用意する際は名前の変更だけ、お忘れないようにご注意ください。
▼作業手順３．クイズ(テキスト)に「#add_css_file:true」「#add_js_file:true」「#email:***」「#key:***」4つのオプションを追加します。
▼作業手順４．3つのファイルを指定し、１つのzipファイルにまとめて圧縮します。
▼作業手順５．圧縮したzipファイルを変換ツールにアップロードするとオリジナルのCSS・JSが適応されます。
▼作業手順１．解凍したオリジナルのCSSファイル、JavaScriptファイル、クイズを用意します。
▼作業手順２．オリジナルのCSSのファイル名を「add_personal.css」にし、オリジナルのJSのファイル名を「add_personal.js」にして作成します。
※変換元ファイルからダウンロードされたCSS・JavaScriptファイルは既に「add_personal.css」、「add_personal.js」の状態で保存されています。お客様自身で、CSS・JavaScriptファイルをご用意する際は名前の変更だけ、お忘れないようにご注意ください。
▼作業手順３．クイズ(エクセル)に「#add_css_file:true」「#add_js_file:true」「#email:***」「#key:***」4つのオプションを追加します。
▼作業手順４．3つのファイルを指定し、１つのzipファイルにまとめて圧縮します。
▼作業手順５．圧縮したzipファイルを変換ツールにアップロードするとオリジナルのCSS・JSが適応されます。
CSS・JSをカスタマイズしたがプレイヤーが上手く動作しない方へ
クイズのオプション値を入れ忘れているかもしれません！
⇒「#add_css_file:true」「#add_js_file:true」「#email:***」「#key:***」4つのオプションを追加します。オプション値を入力する際、半角英数字で入力します。オプションを入力する際は、#を含めた英数字を入力します。頭の#を入れ忘れにはご注意ください。
zipファイルの圧縮をファルダごとやってしまってるかもしれません！
⇒解凍したファイルをフォルダごと、圧縮してしまうとアップロードした際に上手く表示されません。CSS・JS・クイズの3つのファイルを指定し、１つのzipファイルにまとめて圧縮します。ご注意ください。
▼間違った圧縮方法
▼正しい圧縮方法
JA 
EN