QuizGeneratorにオリジナルCSS・JSをカスタマイズする

  • HOME
  • オリジナルCSS・JSを適応

QuizGeneratorにオリジナルCSS・JSをカスタマイズする

QuizGeneratorのライセンスをご購入すると、お客様のお好みに合わせて、『 プレイヤー画面のデザインの変更・システム内の言葉を自由に変更 』することができます。それに加え、リスニング問題などで活用される『 音声合成機能 』のオプション設定をプレイヤー内に制限なく設定することができます。

こちらのページではライセンス購入後のオリジナルCSS・JSをカスタマイズする設定方法についてご紹介します。

ライセンス購入後のプレイヤー画面はこちらです。

  今回のカスタマイズではボタンの色を変更して、sampleを点滅させるように設定してます。

  ダウンロード: 変換元ファイル, 変換済ファイル     別ウィンドウで開く

QuizGeneratorにオリジナルCSS・JavaScriptをカスタマイズする方法

オリジナルCSS・JSをカスタマイズをする場合、ライセンスのご購入が必要です。ライセンスの価格については、1ヶ月間のライセンスが5,500円(税込み)、1年間のライセンスが22,000円(税込み)となっております。ライセンスをまだ購入されていないお客様はこちら購入することができます。
QuizGeneratorのライセンスを購入する

カスタマイズに使うCSSとJavaScriptをご紹介いたします。

今回は練習なので、上記のQuizGeneratorに使用されているCSS、JavaScriptを例にご紹介いたします。

▼QuizGeneratorに実装されているCSS・JavaScriptはこちらです。
QuizGenerator-カスタマイズ

CSSとJavaScriptをダウンロードします

まず初めに、カスタマイズに使用する、CSSとJavaScriptを変換元ファイルからダウンロードします。

▼こちらの動画をご覧ください。

1.変換元ファイルをクリックして、ZIPファイルをダウンロードします。
2.次にZIPファイルを解凍します。
3.すべて展開 >> 展開とお進みください。
4.展開ボタンをクリックすると、ファイルが解凍されます。

テキスト・エクセルから設定する方法

解凍されたZIPファイルの中には、『 CSSファイル・JavaScriptファイル・クイズ 』が入っています。こちらの3つのファイルを使ってカスタマイズしていきます。クイズをテキスト・エクセルで作成した場合の手順は下記の通りとなります。

  • テキスト
  • エクセル

▼作業手順1.解凍したオリジナルのCSSファイル、JavaScriptファイル、クイズを用意します。
QuizGenerator-カスタマイズ

▼作業手順2.オリジナルのCSSのファイル名を「add_personal.css」にし、オリジナルのJSのファイル名を「add_personal.js」にして作成します。
※変換元ファイルからダウンロードされたCSS・JavaScriptファイルは既に「add_personal.css」、「add_personal.js」の状態で保存されています。お客様自身で、CSS・JavaScriptファイルをご用意する際は名前の変更だけ、お忘れないようにご注意ください。

QuizGenerator-ライセンスの購入

▼作業手順3.クイズ(テキスト)に「#add_css_file:true」「#add_js_file:true」「#email:***」「#key:***」4つのオプションを追加します。

eラーニング-クイズをカスタマイズする

▼作業手順4.3つのファイルを指定し、1つのzipファイルにまとめて圧縮します。
QuizGenerator-クイズを作成する

▼作業手順5.圧縮したzipファイルを変換ツールにアップロードするとオリジナルのCSS・JSが適応されます。

クイズ-webで作成

▼作業手順1.解凍したオリジナルのCSSファイル、JavaScriptファイル、クイズを用意します。
クイズ-エクセル-1

▼作業手順2.オリジナルのCSSのファイル名を「add_personal.css」にし、オリジナルのJSのファイル名を「add_personal.js」にして作成します。
※変換元ファイルからダウンロードされたCSS・JavaScriptファイルは既に「add_personal.css」、「add_personal.js」の状態で保存されています。お客様自身で、CSS・JavaScriptファイルをご用意する際は名前の変更だけ、お忘れないようにご注意ください。

クイズ-エクセル

▼作業手順3.クイズ(エクセル)に「#add_css_file:true」「#add_js_file:true」「#email:***」「#key:***」4つのオプションを追加します。

エクセル-クイズを作る

▼作業手順4.3つのファイルを指定し、1つのzipファイルにまとめて圧縮します。

エクセルでクイズを作成する

▼作業手順5.圧縮したzipファイルを変換ツールにアップロードするとオリジナルのCSS・JSが適応されます。

クイズ-webで作成

CSS・JSをカスタマイズしたがプレイヤーが上手く動作しない方へ

クイズのオプション値を入れ忘れているかもしれません!
⇒「#add_css_file:true」「#add_js_file:true」「#email:***」「#key:***」4つのオプションを追加します。オプション値を入力する際、半角英数字で入力します。オプションを入力する際は、#を含めた英数字を入力します。頭の#を入れ忘れにはご注意ください。

zipファイルの圧縮をファルダごとやってしまってるかもしれません!
⇒解凍したファイルをフォルダごと、圧縮してしまうとアップロードした際に上手く表示されません。CSS・JS・クイズの3つのファイルを指定し、1つのzipファイルにまとめて圧縮します。ご注意ください。

▼間違った圧縮方法
eラーニング-クイズ

▼正しい圧縮方法
クイズ-圧縮する