Guidelines & Tips for Creating Quizzes with Images

(Last Updated On: October 22, 2021)

Clickable Quizzes

  1. In general, images should be resized to be no larger than 200px in either width or height.*
  2. Whenever possible, all question images should have identical dimensions to one another (but not necessarily matching answer images). †
  3. Whenever possible, all answer images should have identical dimensions (but not necessarily matching question images). †
  4. Even if you don’t want text displayed along with your images, please add text to your questions & answers to ensure the results page for your quiz is not blank. You can achieve this by populating the text in the Data tab and using the ‘Hide question text on quiz page’ and/or ‘Hide answer text on quiz page’ checkboxes on the Options tab.

*The exception to this is the rare type of quiz in which images are explicitly intended to be narrow strips taking up the full quiz width – such as in this quiz. In this case, please keep your images at or below 918 x 150px in size.

† Unless the images require specific dimensions, like national flags.

 

Slideshow Quizzes

  1. Slideshow images should not be larger than 640 pixels in width or 480 pixels in height. You may use any proportions/aspect ratio for the images.
  2. Slideshow images should also be at least 300×300 pixels in size, in order to be large enough to be consistently visible.
  3. Whenever possible, each image in your slideshow should have identical dimensions.

 

Multiple Choice Quizzes

  1. The ideal size for GTP images is 275×150 pixels, which fits the precise dimensions of the buttons. When possible, please aim for these dimensions, and do not exceed 275×150 with your image sizes.
  2. If your images are smaller than 275×150, please keep the dimensions identical between the choices within each question.  For example, if you have 4 choices and the first one is 200×150, make the other 3 choices 200×150 images as well.
  3. When selecting a set of images, we prefer quizzes where all of the images in each question have a matching aesthetic. For example, all having the same color background, or all being full color photos (rather than a mixture of photos and clipart, etc).
  4. Even if you don’t want text displayed along with your images, please add text to your questions & answers to ensure the results page for your quiz is not blank. You can achieve this by populating the Question Text/Answer Text in the Data tab and using the ‘Hide question text on quiz page’ and/or ‘Hide answer text on quiz page’ checkboxes on the Options tab.

 

Map/Picture Click Quizzes

  1. Map & Picture click quizzes use only a single images, and it should be smaller than 920 pixels wide.
  2. It’s generally good practice to avoid extremely tall images that would require a lot of scrolling for players in these formats.

 

Picture Box Quizzes

  1. Picture Box quizzes are arranged quite differently from other image-based quiz types. Please see this blog post about Picture Box formatting.
  2. As with Multiple Choice quizzes, it’s a good idea to choose images within your Picture Box quiz that all have the same aesthetic (matching backgrounds, etc.)

 

Grid Quizzes

  1. Like Map & Picture Click quizzes, Grid quizzes can support a single image via the ‘Quiz Image’ field on the ‘Quiz Edit’ tab.
  2. After you have added your URL in the ‘Quiz Image’ field and saved, you will likely still not see any image in the background of your quiz.  This is because, by default, the grid will have a solid background color set for empty & full cells.  To change this, go to the ‘Data’ tab click the gear icon (‘Grid Extras’) and then click either of the first two colored circles on the left side (they should say ‘Empty cell color’ and ‘Full cell color’ when you hover over them, respectively).  When you click these, you should get a small dialog that has a color-picker and a slider bar to the right of the dropper tool.  Dragging this slider to the left will increase the transparency of the cells and allow your background image to show behind your grid.  Depending on your configuration of empty & full cells in your grid, you may need to modify the transparency of one or both of those settings in order to see your image appear in the grid.
  3. There is a maximum width of 920 pixels for images used in Grid Quizzes, however Grid Quizzes are typically fixed at 600 pixels wide, so it can help to resize or crop your image to fit the exact dimensions of your grid.  For example, a Grid Quiz with an equal number of rows & columns should always display as a 600×600 pixel square, so an image with those exact dimensions should fit exactly within the borders of the grid.
  4. If you wish to create a grid whose cells each contain a different picture, this must still be achieved with a single image that contains all of the smaller pictures you wish to display.  If we use a 4×4 grid as an example, the dimensions (as stated above for square grids) will be 600×600 pixels.  This means that each individual grid cell will be 150×150 pixels (600 divided by 4).  If you create an image that is 600×600 in height and fill it with 16 separate 150×150 images, they will align exactly with the grid cells in your quiz.  An example of this strategy can be found in this quiz.

 

Quiz Icons 

  1. While editing a quiz, you have the option to set a Quiz Icon on the Presentation tab.  These icons should be at least 1200×630 pixels in size, and you should avoid images with white backgrounds (due to their placement on the white background of the Sporcle homepage when published).

 

General Suggestions

  1. Please avoid hotlinking to image URLs that you find on the web, as they may change or disappear, breaking your quiz.  You should always save & host your images with a site like Imgur – which is free and very dependable, and your images should always remain available when uploaded there.
  2. When resizing images for your quizzes, be careful not to stretch or squash the image from its original proportions. This can typically be achieved using a combination of both resizing & cropping your image.
  3. Avoid using photos with watermarks.
  4. If you need help with any of the aspects covered in this post, feel free to post a question in our groups and other users and/or staff will be happy to assist!

 

Comments

comments