Google Forms is a tool that allows for easily setting up simple structured data entry. But it's designed to make it easy to analyze a lot of data that has been entered, not to view a single entry. There is a view to show individual entries, but it's very cluttered due to including all of the options that were not selected as well as those that were selected. A display that showed only the entries that were selected could be used as a quick and dirty way to make a form letter-like website.
To make this problem harder, the solution has to run on iPad, a platform not exactly known for its user programmability.
Bookmark this link: hide unselected items in Google Form. Then select that bookmark when on the appropriate Google Forms page. Note that in addition to hiding unselected entries, if the entry that is not select has a value of "Yes", then its entire section will be hidden. If you don't want that behavior, bookmark this variant of the script instead.
Let's back up a bit.
Unfortunately, both of those options require web browser extensions
which are not available on mobile browsers, so they are not an
appropriate solution for running on an iPad. Luckily, there's a
programs stored in bookmarks using the
the bookmark is selected, instead of going to a page, it executes the
it. They're not as powerful as user scripts because they have to be
activated manually, but they can accomplish many of the same tasks.
Writing the script
I knew I wanted to hide a set of elements on the page, so the script would look something like
document.querySelectorAll(selector) .forEach(el => el.style.display = 'none');
which just leaves determining the right value for
Most modern desktop browsers have an "Inspect" feature where you can right-click on an element and it will bring up the HTML of that element in context. Additionally, when hovering over parts of the HTML, it will highlight which part of the page it corresponds to. Using that, it's fairly straightforward to identify which HTML element is the one we want to hide.
As Google Forms isn't trying to obfuscate what the elements are for,
class names are straightforward: disabled items have the
isDisabled class, checked items have the
isChecked class (well,
strangely, so do disabled items), so with a little experimentation, we
can see that the CSS selector
.isDisabled:not(.isChecked) selects the
disabled items which are not checked.
Additionally, the form I was doing this for had some sections that
were "Yes"/"No" choices instead of multiple-choice, so selecting
"No" meant the whole section should be hidden. I accomplished
that by when the "Yes" was to be hidden (determined by checking
el.getAttribute('data-value') == 'Yes' as I noticed the
attribute when looking at the HTML), instead hiding the ancestor of it
that was the element for the entire section. I determined which ancestor
simply by repeating
.parentNode and re-running the script in the
Putting it all together, here's the final script:
document.querySelectorAll('.isDisabled:not(.isChecked)') .forEach(el => (el.getAttribute('data-value') == 'Yes' ? el.parentNode.parentNode.parentNode .parentNode.parentNode.parentNode .parentNode.parentNode : el) .style.display = 'none');
Making the bookmarklet