EDIT: Originally I was posing this as a question, but I’ve since figured it out. Skip ahead to post 7 for the tutorial.
Original post below:
Hello,
I enjoy making ID’s to test my skills, but it would be nice to be able to do that on items that are already research grade without knowing what they are.
I know implementing some sort of quiz functionality on the site has been discussed before, and as I recall there is no plans to add such functionality. I think it could possibly be implemented on the user-side very easily in a crude fashion. All it would really require would be changing the font color to be the same as the background color, then you wouldn’t see the text unless you highlighted it. If there was the ability to add a little button you could press to toggle between black/white text that would be great. Even better if you could do it on an individual observation basis. I envision being able to go to the explore page, browsing to my favorite tax, then toggling the text on/off when I’ve made my guess. Obviously keeping a score and things of that nature would be cool, but are much harder to accomplish in scope.
My question to all the tech savvy people out there: Would it be possible with some sort of custom script / CSS add-on to accomplish this?
I’ve been fiddling a little myself with an add-on for firefox, but I have no knowledge in this area and haven’t made any progress. I’m guessing if it’s possible someone in the know could whip this up in a few minutes.
Thanks for reading and I look forward to any suggestions!
Birds was just an example, but the beauty of iNat would be you could quiz yourself on anything; moths, spiders, oaks etc.
Ebird also has a quiz functionality built in, but you just specify an area and date and it makes a quiz of random birds based on that. With iNat you could specify gulls or sparrows etc and only comb through those.
It can’t be that complicated to just toggled all text to white.
it’s definitely possible. to most closely mimic what you’re describing i think you would want to make a browser extension that will search for certain styles and modify those styles on the fly. the class styles on the caption text in grid view in the Explore page are a little jumbled. so probably the easiest thing would be to set the entire caption class to {visibility: hidden}.
if you open up your browser’s developer tools, you could even do it there. it’s not a very automated approach, but once you added the visibility style, you could check/uncheck it to toggle the captions off/on, as needed:
finally, i will note that there has been previous discussion in the forum about making standalone quiz games using iNat data, including at least 2 cases where folks made such games for folks to play. just search for the forum for “quiz”.
Thanks for the reply! This is definitely a step in the right direction. I was able to replicate your work in firefox by adding that “visibilty: hidden” snippet of code. Clicking a picture then opens the observation and the captions are back giving you your answer. Very cool! The only problem being when you hit back the snippet of code is obviously gone again. Hopefully your other link will shed some light on how to make an extension or something to automate that piece of code.
Will report back later once I inevitably get frustrated by the next hurdle! ha
I’ve figured out how to make iNat in to a quiz mode version so easily I think anyone could do it.
At the bottom of this post just click the arrow to display an easy to follow tutorial. I’ve only tried it a little bit, but it seems to work great.
I’ve edited the original title now to reflect the progress.
Thanks to @pisum for getting the ball rolling for me.
Click Here For Tutorial
I used firefox, but I’m sure you could probably replicate with this with any major browser. Ceratinly with edge and chrome anyhow as the extension I used is available for those browsers.
In upper-right click the stylebot icon and select “Open Stylebot”. The stylebot window should open the right side of the screen.
Hovering your mouse over different elements of the screen will highlight them for editing on the right side. Hover your cursor over the bottom of an observation until the whole segment is highlighted in green like the photo and it says “div.caption 261px x 85px” underneath. Click to start our first edit.
On the right in the stylebot menu under Layout click “Hide” next to visibility. Bam! Just like that now the observations have no titles. That’s pretty good, but say we want to be able to click the observation to look at the additional photos. Do just that now and open the observation page.
The observation page has a few different spots that will give away the answer we will have to hide. If stylebot is not still open, open it back up and hover your mouse over the observation title until the box is highlighted and “div.ObservationTitle” is displayed underneath as shown in the photo. Click. Once again underneath the Layout section of stylebot click “Hide”.
You may have to close and re-open Stylebot to get the selector working again. Just simply click the X in the upper-right of the StyleBot window, then click the StyleBot icon again to re-open it. Alternatively you can right-click on elements and at the bottom of the context menu under Stylebot select “Style Element” to accomplish the same thing, but it can be harder to get the right spot this way sometimes.
Next we’ll want to hide the community taxon section. I’m sure by now you could probably do the rest on your own, but I’ll continue to walk you through. Move your curosor over the box until it is highlighted like in the following picture and “div.CommunityIdentification.collapsible-section.undefined” is displayed underneath. Click. Layout → Hidden.
We’ll also want to hide the suggestions people have already made. Hover your cursor over the bottom of the last suggestion until they all appear highlighted and “div.activity” is displayed underneath. Click. Once again underneath layout go to “Hide”. If you want to be able to make ID suggestions still in quiz mode, make sure that section isn’t highlighted or it will be hidden too.
Let’s say you do want to make ID’s without seeing the CV suggestions, this too can be hidden. It can be a little tricky to get the suggestion menu open and the highlighting mode working. First you have to click the field where you enter text to bring up the list of suggestions. Now open StyleBot. When you hover back over the field for typing in a suggestion the menu should display and allow you to highlight elements. We want to highlight the element named “div.ac.vision” as shown in the following picture. After hiding this under layout we are almost done.
As long as you don’t scroll down too far you shouldn’t see the list of Top Identifiers, but just to be safe we can hide this too. As we’ve done before highlight this section to edit “div.Identifiers.collapsible=section”. Click. Then hide.
Voila. Now all these changes should be in place as long as StyleBot is set to run on inaturalist. To undo these changes simply click the StlyeBot extension icon and move the slider for www.inaturalist.org to the off position. The shortcut Alt+Shift+T will also work for this purpose. You can also set your own custom shortcut combo under the stylebot options if you prefer.
