テキストで画像入り問題を作る
画像を追加したクイズの作成方法です。
はじめに
用意した画像を追加するには、 問題文に画像のリンクを特殊な形式（ [[images/ファイル名]] ）で記載します。
そして、問題文からクイズに変換するとき、.txtではなく、画像を含めた.zipファイルを変換する必要があります。
＊注意＊ファイル名に日本語は使用せず、英数字のみを使用してください。日本語を使用した場合、画像が表示されません。
zip内の構造
最終的な問題の形としては、zipファイルを作る必要があります。
そして、下記の画像が、zipファイルに変換する直前のフォルダ構造です。
ご覧のように、画像ファイルがimagesフォルダの中に格納されています。
・quiz.txt
・images
>sakura.jpg
上記の構造になっています。
＊注意＊ファイル名に日本語は使用せず、英数字のみを使用してください。日本語を使用した場合、画像が表示されません。
- 順を追って、下記の問題を作成していきます。
サンプル
ダウンロード: 変換元ファイル, 変換済ファイル
別ウィンドウで開く
1.画像を用意
まず、画像を用意します。下記の画像を保存してください。
＊注意＊ファイル名に日本語は使用せず、英数字のみを使用してください。日本語を使用した場合、画像が表示されません。
2.画像フォルダを作成「images」
「images」というフォルダを作成します。 「images」の中に、画像ファイルを移動させます。
3.問題用テキストを作成
右クリックから、新規作成→テキスト文書を作成 をクリックします。 テキストのファイル名を「quiz.txt」に編集します。
4.画像タグ入りの問題を作成
一行目の問題文章に画像を挿入します。
花の名称を選べ<br />[[images/sakura.jpg]]
といった形で記載します。
ポイント① [[images/ファイル名]]
画像挿入のタグは[[images/ファイル名]]と記載します。画像の形式が JPG か PNG か GIFなのか確認して、ファイル名をご入力ください。
＊注意＊ファイル名に日本語は使用せず、英数字のみを使用してください。日本語を使用した場合、画像が表示されません。
ポイント② <br />
<br />はHTML言語で改行を表しています。問題文内で改行したいときは、<br />または<br>を用いてください。
5.問題文を完成させる
下記のように問題文を記載ください。
花の名称を選べ[[images/sakura.jpg]]←問題文
桜 ←正答
梅 ←以降、誤答
朝顔
6.zipファイルに変換する
imagesフォルダとquiz.txtの２つのファイルを選択して右クリック＞送る＞圧縮をクリックしてください。
zipファイルが生成されます。quizという名前に変更してください。（変更しなくても、あるいは別の名前でも使用可能です。）
※よくある間違い
imagesフォルダとquiz.txtを格納したフォルダを右クリックしてzipファイルに圧縮してしまうケースが多々あります。
これは間違いです。imagesフォルダとquiz.txtの２つを選択して圧縮してください。
※Macでのzip圧縮の場合
Mac標準の圧縮機能は、圧縮時にフォルダ構造を変更してしまい、変換できません。Macwinzipper等を利用しzipに圧縮下さい。
7.変換ツールでクイズに変換
作成したzipファイルを変換ツールで変換します。
変換ツールをクリック→作成したzipファイルを選択しGenerateをクリックします。
8.以上で完成
ダウンロードされた変換済zipファイルをそのままアップローダーにアップロードすると、公開できます。
ダウンロードされたzipファイルを解凍すると、クイズジェネレーターのHTML形式に変換されたファイルになっていますので、サーバー等にアップロードすることもできます。
画像を挿入する他の方法もございます
サンプル
ダウンロード: 変換元ファイル, 変換済ファイル
別ウィンドウで開く
ぜひこちらを参照し、よろしければご活用ください。
スマホで横幅最大/パソコンでは600pxの固定幅にする方法
【htmlタグを用いた大きさの制御方法】
この花は何？<img style=”width: 100%; max-width: 600px;” src=”images/cosmos.jpg” />
コスモス
ばら
さくら
マーガレット
上記の画像の表示サイズを制御＋別タブで表示させる方法
【htmlタグを用いて大きさを制御かつ別タブで表示させる方法】
この花は何？<a style=”width: 100%; max-width: 600px;” href=”images/cosmos.jpg” target=”_blank” rel=”noopener”></a>
コスモス
ばら
さくら
マーガレット