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.
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:
Print on a larger sheet of paper and cut the cards out yourself
Print on index cards where one card will print on each with no additional cutting.
Save the print view of the index card version so that you can send it to a photo printer to print the cards
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:
Layout: Choose portrait or landscape depending on the layout you have chosen
Open "More settings"
Paper size: choose the size that you will be printing on, for either index cards or photos
Margins: choose "None"
If you are printing via your own printer, click Print. If you are sending to a photo service choose "Open PDF in Preview" on a Mac and hopefully you can find something similar on Windows.
If you are printing to a photo service, they usually do not take PDFs as source for the photos. I used PDFtoJPG.net to convert the PDF to jpg images that you can upload to your photo service of choice.
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.
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:
3 items - 2 items per card
7 items - 3 items per card
13 items - 4 items per card
31 items - 6 items per card
57 items - 8 items per card
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
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.
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 severaldiscussions 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.
