{"id":161,"date":"2018-03-23T11:36:41","date_gmt":"2018-03-23T02:36:41","guid":{"rendered":"http:\/\/cardgenerator.net\/?page_id=161"},"modified":"2020-07-27T14:42:29","modified_gmt":"2020-07-27T05:42:29","slug":"%e7%94%bb%e5%83%8f%e5%85%a5%e3%82%8a%e5%95%8f%e9%a1%8c%e3%82%92%e4%bd%9c%e3%82%8b","status":"publish","type":"page","link":"https:\/\/cardgenerator.net\/en\/%e7%94%bb%e5%83%8f%e5%85%a5%e3%82%8a%e5%95%8f%e9%a1%8c%e3%82%92%e4%bd%9c%e3%82%8b\/","title":{"rendered":"Create Quiz with Image"},"content":{"rendered":"You can create a quiz with card form with a image\r\n<h2 class=\"style3a\">At first<\/h2>\r\nTo add the image you have prepared, you can add the image link to the question text in HTML format<strong>&lt;img src=&quot;&rdquo;\u30d5\u30a1\u30a4\u30eb\u540d\/\u753b\u50cf\u540d&rdquo;&quot;&gt;\u3000<\/strong>It is described in\nThen, when converting the question text to a quiz, you can use<strong>&quot;Question (.txt) + folder containing images&quot;<\/strong>You need to convert the file to a .zip file that includes the following information: *Note* Please do not use Japanese characters in the file name, only alphanumeric characters. Note* Please do not use Japanese characters in the file name, only alphanumeric characters. If you use Japanese characters in the file name, the image will not be displayed.\r\n<h3 class=\"style5a\">Structure inside the zip<\/h3>\r\nThe final problem is that you need to create a zip file. The image below shows the folder structure just before converting it to a zip file.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"wp-image-185 aligncenter\" src=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1632-300x217.png\" alt=\"\" width=\"476\" height=\"344\" srcset=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1632-300x217.png 300w, https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1632-768x557.png 768w, https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1632.png 789w\" sizes=\"auto, (max-width: 476px) 100vw, 476px\" \/>\r\n\r\nAs you can see, the image files are stored in the images folder.\r\n<pre>\u30fbquiz.txt \u30fbimages &gt;dog.jpg<\/pre>\r\n&nbsp;\r\n\r\nIt has the above structure.\r\n<h2 class=\"style3a\">How to make it<\/h2>\r\nStep by step, we will create the following questions:\r\n<h3 class=\"style5a\">sample<\/h3>\r\n<p style=\"text-align: center;\"><strong>Download<\/strong>: <a href=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/quiz.zip\">Original File<\/a>, <a href=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/card_quiz.zip\">Converted File<\/a>,<a href=\"https:\/\/cardgenerator.net\/en\/cardhoster\/?action=play&amp;course_id=45908&amp;course_path=48c7182aa1503875f381be5c1287bb0d\">Open in another window<\/a><br>\r\n<iframe loading=\"lazy\" style=\"width: 500px; height: 700px;\" src=\"\/\/quizgenerator.net\/quizhoster\/?action=play&amp;course_id=45904&amp;course_path=4788e57b1264a277ccbf52d663f602a7\" width=\"300\" height=\"150\" frameborder=\"0\" class=\"embed\">Please view with an iframe compatible browser.<\/iframe><\/p>\r\n\r\n<h3 class=\"style5a\">1. Prepare an image<\/h3>\r\nFirst, prepare an image. Save the image below. *Note* Do not use Japanese characters in the file name; use only alphanumeric characters. If you use Japanese characters, the image will not be displayed.\r\n\r\n<a href=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/dog.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-170 aligncenter\" src=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/dog.jpg\" alt=\"\" width=\"313\" height=\"235\" \/><\/a>\r\n<h3 class=\"style5a\">2. Create an image folder called &quot;images&quot;<\/h3>\r\nCreate a folder called &quot;images&quot;. Move the image files into &quot;images&quot;.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"wp-image-172 aligncenter\" src=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_0942-300x213.png\" alt=\"\" width=\"443\" height=\"315\" srcset=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_0942-300x213.png 300w, https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_0942-768x545.png 768w, https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_0942.png 833w\" sizes=\"auto, (max-width: 443px) 100vw, 443px\" \/>\r\n<h3 class=\"style5a\">3. Create the question text<\/h3>\r\nRight-click and click &quot;New&quot; -&gt; &quot;Text Document&quot;. Edit the text file name to &quot;quiz.txt&quot;.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"wp-image-173 aligncenter\" src=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_0944-300x219.png\" alt=\"\" width=\"447\" height=\"326\" srcset=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_0944-300x219.png 300w, https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_0944-768x561.png 768w, https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_0944.png 792w\" sizes=\"auto, (max-width: 447px) 100vw, 447px\" \/>\r\n<h3 class=\"style5a\">4. Create questions with image tags<\/h3>\r\nInsert the image in the first line.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"wp-image-187 aligncenter\" src=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1636-300x120.png\" alt=\"\" width=\"545\" height=\"218\" srcset=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1636-300x120.png 300w, https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1636-768x308.png 768w, https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1636.png 881w\" sizes=\"auto, (max-width: 545px) 100vw, 545px\" \/>\r\n<pre>&lt;img src=&quot;images\/dog.jpg&quot;&gt;<\/pre>\r\nIt will be published in this form.\r\n<h6><strong>| Point 1&lt;img src=&quot;&rdquo;images\/\u30d5\u30a1\u30a4\u30eb\u540d&rdquo;&quot;&gt;<\/strong><\/h6>\r\nThe tag for inserting an image is<strong>&lt;img src=&quot;&rdquo;images\/\u30d5\u30a1\u30a4\u30eb\u540d&rdquo;&quot;&gt;<\/strong>Please enter a file name after checking whether the image format is JPG, PNG, or GIF. *Note* Do not use Japanese in the file name; use only alphanumeric characters. If you use Japanese, the image will not be displayed.\r\n<h6><strong>| Point 2 &lt;br \/&gt;<\/strong><\/h6>\r\n&lt;br \/&gt;represents a line break in HTML. If you want to start a line break within the question text,&lt;br \/&gt;or&lt;br&gt;Please use.\r\n<h3 class=\"style5a\">5. Complete the question<\/h3>\r\nPlease write the question as below:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183 aligncenter\" src=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1627-1-300x105.png\" alt=\"\" width=\"605\" height=\"212\" srcset=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1627-1-300x105.png 300w, https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1627-1-768x269.png 768w, https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1627-1.png 1005w\" sizes=\"auto, (max-width: 605px) 100vw, 605px\" \/>\r\n<pre>&lt;img src=&quot;images\/sakura.jpg&quot;&gt;&lt;br \/&gt;How do you say dog in English?<span style=\"color: #ff0000;\">\u2190Question statement<\/span>\r\n dog <span style=\"color: #ff0000;\">\u2190Correct answer<\/span><\/pre>\r\n* Use the Tab key to create spaces between the question and the correct answer. Do not use the Space key or line breaks.\r\n<h3 class=\"style5a\">6. Convert to a zip file<\/h3>\r\nSelect the two files, images folder and quiz.txt, right-click &gt; Send &gt; Compress. A zip file will be generated. Change the name to quiz. (You can leave it as is or use a different name.)\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"wp-image-186 aligncenter\" src=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1633-300x223.png\" alt=\"\" width=\"470\" height=\"349\" srcset=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1633-300x223.png 300w, https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1633-768x572.png 768w, https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1633.png 791w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/>\r\n<h6><strong>\uff5c\u203bCommon mistakes<\/strong><\/h6>\r\nIn many cases, people right-click the folder containing the images folder and quiz.txt and compress them into a zip file.\r\n<strong>This is incorrect.<\/strong>Please select the images folder and quiz.txt and compress them.\r\n<h6><strong>\uff5c\u203bWhen compressing zip files on a Mac<\/strong><\/h6>\r\nThe standard Mac compression function changes the folder structure during compression and cannot convert it.<a href=\"https:\/\/tidajapan.com\/macwinzipper\" target=\"_blank\" rel=\"noopener noreferrer\">Macwinzipper<\/a>Please compress it into a zip file using the above.\r\n<h3 class=\"style5a\">7. Convert to quiz with flashcard generator<\/h3>\r\nConvert the created zip file with Flashcard Generator. Click Flashcard Generator \u2192 Select the created zip file \u2192 Click Convert.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"wp-image-188 aligncenter\" src=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1641-300x154.png\" alt=\"\" width=\"734\" height=\"377\" srcset=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1641-300x154.png 300w, https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1641-768x395.png 768w, https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1641-1024x526.png 1024w, https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1641.png 1121w\" sizes=\"auto, (max-width: 734px) 100vw, 734px\" \/>\r\n\r\nThe file conversion results will be displayed as follows:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"wp-image-189 aligncenter\" src=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1643-300x207.png\" alt=\"\" width=\"606\" height=\"418\" srcset=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1643-300x207.png 300w, https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/2018-03-14_1643.png 731w\" sizes=\"auto, (max-width: 606px) 100vw, 606px\" \/>\r\n<h3 class=\"style5a\">8. That&#039;s it!<\/h3>\r\nWhen you unzip the downloaded zip file, the file will be converted into the flashcard generator&#039;s HTML format, which can then be uploaded to a server, etc.\r\n<h2>There are other ways to insert images<\/h2>\r\n<h3 class=\"style5a\">sample<\/h3>\r\nThere are two ways to insert an image:\r\n<p style=\"text-align: center;\"><strong>Download<\/strong>: <a href=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/images.zip\">Original File<\/a>, <a href=\"https:\/\/cardgenerator.net\/wp-content\/uploads\/2018\/03\/card_images.zip\">Converted File<\/a>,<a href=\"https:\/\/cardgenerator.net\/en\/cardhoster\/?action=play&amp;course_id=45897&amp;course_path=91d6bf912a2850a6e2e1fd6d8da309ca\">Open in another window<\/a><br>\r\n<iframe loading=\"lazy\" style=\"width: 500px; height: 700px;\" src=\"\/\/quizgenerator.net\/quizhoster\/?action=play&amp;course_id=45906&amp;course_path=0a85ba2d56069cfac3e5377e144ea950\" width=\"300\" height=\"150\" frameborder=\"0\" class=\"embed\">Please view with an iframe compatible browser.<\/iframe><\/p>\r\nIf you try to create it using the basic method and find that the image display is too small or you would like to display it on a different screen, please refer to this and feel free to use it if you like.\r\n<h5><strong>How to set the maximum width on smartphones and a fixed width of 300px on computers<\/strong><\/h5>\r\n<pre>&lt;img src=&quot;images\/dog.jpg&quot;style=&quot;width:100%;max-width:300px;&quot;&gt;&lt;br\/&gt;[\u2461Size control method] dog<\/pre>\r\n<h5><strong>How to control the display size of the above image + display it in a separate tab<\/strong><\/h5>\r\n<pre>&lt;a href=&quot;\/en\/images\/dog.jpg\/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;&lt;img style=&quot;width: 100%; max-width: 300px;&quot; src=&quot;images\/dog.jpg&quot; \/&gt;&lt;\/a&gt;[\u2462How to control the size and display in a separate tab] dog\r\n<\/pre>\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;","protected":false},"excerpt":{"rendered":"You can create a quiz with images added to flashcards. To add an image, add an image link to the question in HTML format.","protected":false},"author":4,"featured_media":300,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-161","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/cardgenerator.net\/en\/wp-json\/wp\/v2\/pages\/161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cardgenerator.net\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cardgenerator.net\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cardgenerator.net\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/cardgenerator.net\/en\/wp-json\/wp\/v2\/comments?post=161"}],"version-history":[{"count":78,"href":"https:\/\/cardgenerator.net\/en\/wp-json\/wp\/v2\/pages\/161\/revisions"}],"predecessor-version":[{"id":591,"href":"https:\/\/cardgenerator.net\/en\/wp-json\/wp\/v2\/pages\/161\/revisions\/591"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cardgenerator.net\/en\/wp-json\/wp\/v2\/media\/300"}],"wp:attachment":[{"href":"https:\/\/cardgenerator.net\/en\/wp-json\/wp\/v2\/media?parent=161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}