Image Inserted Quiz with Text

  • HOME
  • Image Inserted Quiz with Text

How to create the quiz include images in its content

At first

To add the image, describe the image link in a special format ([[images/file name]]) in the problem statement. And when converting from question sentences to quizzes, it is necessary to convert .zip files that contain images, not only .txt.

* Warning* Do not use Japanese for the file name but only alphanumeric characters are applicable. Images are not displayed when using Japanese.

structure of the inside of zip file

The final step is to create a zip file for quiz generation. The image below is the folder structure just before converting it to a zip file.

画像を含むフォルダ構造

the image file is packed at images folder as it is shown

・quiz.txt
・images
>sakura.jpg

inside the question structure seen like the above.

Note: only alphanumeric is acceptable. If Japanese is used, there is no pic

  • the following procedure is shown for quiz generation

Sample

  Download: original file, converted file     Open by New Window

1. Prepare an image

Prepare and save the image (shown below)

Note: The only alphanumeric is acceptable. If you input Japanese it would not reflect the image

sakura

2.Create an image folder (images)

create the folder for images. transfer images to the “image directory”.

 

3. Create a Questionnaire

click create new -> create text by right click. Edit the file name to “quiz.txt”.

 

4.A Quiz with Tags on image

inserts the image following with the question sentence at the 1st line.

画像入り問題文作成

Choose a name of the flower<br />[[images/sakura.jpg]]

Describe it as shown above.

 

Point 1  [[images/file]].

The tag for image insertion is described as [[images / file name]]. Make sure that the image format is JPG, PNG or GIF, and enter the file name.

Note: The only alphanumeric is acceptable. If you input Japanese it would not reflect the image

point 2  <br />

Use <br/> as line break. If you would like to do line-break use <br/> or <br>

5.Complete the question sentence

Please describe the sentence like shown below

問題文

Choose a name of flower [[images/sakura.jpg]]←Question Sentence
Cherry Blossom ← Correct Answer
plum ← Incorrect answer from this question
Morning Glory

6.Convert to zip file

Select two files, images folder and quiz.txt, right click on it and click on Send> Compress. A zip file is generated.

Please change the name to the quiz. (You can use it without changing it or with another name.)

※ Caution

There are many cases where the image folder and the folder containing quiz.txt are right-clicked and compressed into a zip file.
This is not the correct procedure.
Select and compress the images folder and quiz.txt together.

※ Use the Mac for Zip file as the file compression method

The standard compression function of Mac changes folder structure at the time of compression and it would not convert to the zip folder.
Please compress to zip file using Macwinzipper etc.

7. Quiz conversion by using “conversion tool”

convert the generated zip file by “conversion tool

Click “conversion tool”→ select the zip file you created and click “Generate”.

 

8. Completed!

Upload the downloaded converted zip file directly to the “uploader” for publishing.

 

If you unzip the downloaded zip file, it will be converted to the HTML format of the quiz generator, so you can upload it to a server, etc.

Other option

  Download: original file, converted file     Open by New Window

when you created a quiz by a conventional method, if you think that the image display is smaller or you want to display it on another screen, please refer to this.

 How to set the maximum landscape for smartphone / fixating the width to 600px on the desktop
[size control by using HTML tag】

What kind of flower is this?<img style=”width: 100%; max-width: 600px;” src=”images/cosmos.jpg” />
Cosmos
Rose
Cherry
Margaret

 How to control the display size of the above image + display in another tab

【by HTML tag】

What kind of flower is this?<a style=”width: 100%; max-width: 600px;” href=”images/cosmos.jpg” target=”_blank” rel=”noopener”></a>
Cosmos
Rose
Cherry
Margaret