Make your own Spot It clone

URL Provided content. The spot it game you are viewing is populated via options provided in the URL. This is not content provided by this site and we take no responsibility for what is contained. This option is made available for sharing spot it games with others without saving data on the website itself.

Make your own Spot it game with your own words or images. All the card logic taken from a blog post from Radigan Engineering.

Display Options

Set print size: 3x5 (landscape) 5x3 (portrait) 4x6 (landscape) 6x4 (portrait) 3.5x3.5 (square/circle)

Items per row: 2 3 4
Show labels:
Randomly rotate items:
Big text (for site words):
Colorize words (for site words):

Show print instructions

Print Instructions

Printing these on to cards is a little bit of a process. We have gone through a lot of effort to make it so that you CAN print these directly to index cards to save you a lot of effort of cutting multiple cards on a single larger paper, but to print on cards you have to do a bit of the work.

You have a few options for printing:

Index card/photo printing

I am on a Mac and have only gotten this to work on Google Chrome (not Safari or Firefox). Hopefully it will similarly work on Chrome on Windows.

When printing do the following:

The above is complicated and yet at the same time vague. Sorry about that. I wish it could be easier, but printing in this way just isn't an easy thing. Good luck :)

Play Spot It Game

You can also play a game here online to see how fast you can get 10 matches. Click the item on either card that is the match.

Start game

Timer:

Num correct: /10

Quit game

Provide data


Link to this set

Show instructions on how to provide data

In the text area above, enter the items you would like to be made into cards. The game only works with certain numbers of items:

If you enter more or less than those numbers we will truncate your list down to the next lower number, except for below 2 where we won't be able to use it at all. I don't really understand the math/logic, so I am not sure why there aren't 5 and 7 items per card options. I used what was made available in this article. If you know how to do 5 or 7, let me know.

Separate each item in the list by a return. You can use words, or provide images using one of the options below.

Adding Words

Add one work per line. Done.

Loading Images - Upload

You can drag images anywhere on to this page and they will be used for your game. The images are NOT uploaded to our site, but are saved in your browser. Images are restricted to 100kb each. Any that are larger than 100kb will automatically be resized for you. Depending on the number and size of your images this can take a while. We encourage you to make smaller images before dropping them onto the page, but we will try to work with what you give us

After you add them to the page an interface will be added where you can remove them from your local storage at any time. The filename before the extention will be used as an optional label. So for Mountain.jpg the label would be Mountain. The reason for the 100kb limit is that browsers restrict how much total can be saved, and this is our attempt to keep you under that limit.

If you upload photos, then you can not use the "Link to this set" option as those that you send links to will not have the images locally. You can not drag imgaes directly from another website, you have to get them on your computer first, and then drag them onto this page.

Loading Images - URL Reference

If you provide URLs instead of words we will attempt to load those URLs as images. If your images are different aspect ratios (square, landscape, portrait) your cards will be difference sizes as each card is made up of a different mixture of sizes. For best results, have all images be the same general aspect ratio.

You can optionally provide a label for images by adding a "," to the end of the image URL and then putting your label. http://path/to/image.jpg,label here

Show card build details

Details

Items provided:
Items used: (may be different due to needing to be specific numbers)
Cards:

Locally stored images

These are the images we are storing locally for you. You can remove them all or only certain ones by clicking them below. Any you remove will no longer be available for showing in a game. If you have any saved games, the images referenced there that you delete will come up broken.

Items marked in green are used in the current set. Click an image to add it to the current set, click it again to remove it. Click "Delete" to remove it all together.

Add all locally stored images to game Remove all locally stored images from game Delete all images

Demo Data

Saved data

You can optionally save your data for later. This is only stored on your machine, nothing is saved on the website itself.

Save currently entered data

Load previously saved data by clicking its name.

Show information about the project

About this project

Our family purchased the original Spot it game and I was fascinated by how there could only be one match no matter what two cards you looked at. I went to the internet to find out how it worked. I found several discussions about it that were all above my mental capacities for math. Then I bumped into this article that had examples of what the cards would be for different item counts. Well, if I didn't have to figure things out, I could do something with that.

I thought it would be really cool to make my own Spot It game with my own pictures. So I started digging into making a version that could accept input and generate the game for me. After way too many hours of playing with the code and neglecting my family, this site was created. This allows you to provide your own images or words and cards will be "randomly" generated. I used the structure from RadiganEngineering but randomize the card order and randomize the order of the items within each card.

Naturally I had to keep adding functionality, demo content, save the data locally, pass content in via the URL, load demos via URL, etc. The basic card generation and game I had done in a day, all the other stuff took several weekends.

I hope this is of benefit to others. I found this blog post about creating a Spot It game with family pictures. It looks like it took a lot of work to make that happen. Hopefully this site allows similar creations in a fraction of the time.

I don't pretend to think this is perfect. It was hacked together pretty quickly despite it taking so long. I debated between using newer technologies (SASS, ES6, etc) to help myself improve, but for now I decided to leave it as basic JavaScript so that it is easier for others to understand. Some day I may make it fancier. So for all my techy friends, don't mock my lack of using the latest and greatest, it was for the greater good :) Some day it will bother me enough to update everything, but for now it is what it is.

If you have any feedback, questions, etc you can find me on twitter or give feedback on the GitHub project.

Drop files anywhere to upload. Only .jpg, .gif and .png files are allowed.

Processing file:

Fork me on GitHub