画像を追加したクイズの作成方法です。

はじめに

用意した画像を追加するには、 問題文に画像のリンクを特殊な形式( [[images/ファイル名]] )で記載します。

そして、問題文からクイズに変換するとき、.txtではなく、画像を含めた.zipファイルを変換する必要があります。


*注意*ファイル名に日本語は使用せず、英数字のみを使用してください。日本語を使用した場合、画像が表示されません。

zip内の構造

最終的な問題の形としては、zipファイルを作る必要があります。

そして、下記の画像が、zipファイルに変換する直前のフォルダ構造です。

画像を含むフォルダ構造

ご覧のように、画像ファイルがimagesフォルダの中に格納されています。

・quiz.txt
・images
  >sakura.jpg

上記の構造になっています。


*注意*ファイル名に日本語は使用せず、英数字のみを使用してください。日本語を使用した場合、画像が表示されません。

作り方

順を追って、下記の問題を作成していきます。

1.画像を用意

まず、画像を用意します。下記の画像を保存してください。


*注意*ファイル名に日本語は使用せず、英数字のみを使用してください。日本語を使用した場合、画像が表示されません。

sakura

2.画像フォルダを作成「images」

「images」というフォルダを作成します。 「images」の中に、画像ファイルを移動させます。

フォルダを作成して画像をいれる

3.問題用テキストを作成

右クリックから、新規作成→テキスト文書を作成 をクリックします。 テキストのファイル名を「quiz.txt」に編集します。

quizテキストを作成

 4.画像タグ入りの問題を作成

一行目の問題文章に画像を挿入します。

画像入り問題文作成

花の名称を選べ<br />[[images/sakura.jpg]]

といった形で記載します。

|ポイント① [[images/ファイル名]]

画像挿入のタグは[[images/ファイル名]]と記載します。画像の形式が JPG か PNG か GIFなのか確認して、ファイル名をご入力ください。


*注意*ファイル名に日本語は使用せず、英数字のみを使用してください。日本語を使用した場合、画像が表示されません。

|ポイント② <br />

<br />はHTML言語で改行を表しています。問題文内で改行したいときは、<br />または<br>を用いてください。

5.問題文を完成させる

下記のように問題文を記載ください。

問題文

花の名称を選べ<br />[[images/sakura.jpg]]    ←問題文
桜                              ←正答
梅                              ←以降、誤答
朝顔

6.zipファイルに変換する

imagesフォルダとquiz.txtの2つのファイルを選択して右クリック>送る>圧縮をクリックしてください。

zipファイルが生成されます。quizという名前に変更してください。(変更しなくても、あるいは別の名前でも使用可能です。)

圧縮する

 

|※よくある間違い

imagesフォルダとquiz.txtを格納したフォルダを右クリックしてzipファイルに圧縮してしまうケースが多々あります。

これは間違いです。imagesフォルダとquiz.txtの2つを選択して圧縮してください。

 

|※Macでのzip圧縮の場合

Mac標準の圧縮機能は、圧縮時にフォルダ構造を変更してしまい、変換できません。Macwinzipper等を利用しzipに圧縮下さい。

7.変換ツールでクイズに変換

作成したzipファイルを変換ツールで変換します。

変換ツールをクリック→作成したzipファイルを選択しGenerateをクリックします。

まとめたファイルを変換する

 

8.以上で完成!

ダウンロードされた変換済zipファイルをそのままアップローダーにアップロードすると、公開できます。

アップロードする

ダウンロードされたzipファイルを解凍すると、クイズジェネレーターのHTML形式に変換されたファイルになっていますので、サーバー等にアップロードすることもできます。