Easy instructions to turn iNaturalist in to a quiz mode version

[Jophophora]

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.

1. Install the stylebot extension from https://stylebot.dev/

2. Browse to the explore tab on inaturalist: https://www.inaturalist.org/observations

3. In upper-right click the stylebot icon and select “Open Stylebot”. The stylebot window should open the right side of the screen.

4. 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.
   

   

5. 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.

6. 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”.
   

   

7. 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.

8. 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.
   

   

9. 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.
   

   

10. 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.
    

    

11. 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.
    

    

12. 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.