[Idea] Reduce "oops" page visits by limiting selections to available combinations

[hegold]

Description

I love the concept but my initial user experience was poor as I landed on "oops" page after "oops" page because the combinations I was looking for were not available. There should be a way to see what is available before clicking into it.

Requirements

A user should know before they click "Go" whether the combination they have selected is available.

Ideas for implementation

• "Grey out" items and/or the "Go" button when a combination is not available yet (e.g. C++ classes)
• Add a message explaining that the item is unavailable next to the "Go" button, perhaps another button to go to Github if you want to contribute, or the "Go" button changes to that button
• ~~Add a "browse" feature to allow exploration of all available languages~~ Now in #494
• ~~Publish data on oops page visits so contributors can see the most requested missing items~~ Now in #495

[geekygirlsarah]

You know, this is something I was thinking about at least a year ago but never ended up really writing out. It's kind of similar to #366 but keeps the same UI elements. This also got a bit worse after adding in multiple language versions.

Thanks for adding this @hegold!

[TomReilly1]

This may be something that I could handle @geekygirlsarah.

I was thinking I could add an event listener to each select element, so every time it changes, it sends a fetch API request to the respective endpoint, much like you suggested in issue #366. If the language/concept is not present, a small alert (can probably just use a bootstrap alert) similar to the 'oops' page will be displayed in the card, underneath the go button, and the go button disabled. If the language/concept is present, any current alert will be hidden, and the go button enabled. Can probably do this in a single static js file.

In regards to the third and fourth bullets that hegold made, I think those are some good ideas to implement, but maybe would be better to add them later as separate issues?

[geekygirlsarah]

This may be something that I could handle @geekygirlsarah.

I was out this past week with the high school robotics group I mentor so I couldn't really keep up with emails so I'm just now seeing this. If you wanted to work on it, I'd appreciate it!

I was thinking I could add an event listener to each select element, so every time it changes, it sends a fetch API request to the respective endpoint, much like you suggested in issue #366. If the language/concept is not present, a small alert (can probably just use a bootstrap alert) similar to the 'oops' page will be displayed in the card, underneath the go button, and the go button disabled. If the language/concept is present, any current alert will be hidden, and the go button enabled. Can probably do this in a single static js file.

Sounds like a good plan to me.

In regards to the third and fourth bullets that hegold made, I think those are some good ideas to implement, but maybe would be better to add them later as separate issues?

Yeah, that's a good point, those do seem a bit out of scope or needing some extra thought. I'll split those out.

[TomReilly1]

Ok so I think it's all set.

In addition to the alert, I added a small function for the compare card select elements that will disable the lang option that corresponds to its counterpart's value. For example, if the 1st select element value is Ada (version 2012), then the Ada (version 2012) option element in the 2nd select element will be disabled.

Another thing I did was that on the the initial load, the 2nd select element changes its value to the 2nd lang/ver in line so that they are not duplicates. In the current case, it switches from Ada (version 2012) to Bash (version 5).

A minor issue with the alert is that, on the initial load, the alert will display on both cards since there currently is not a structure for Ada (version 2012) Classes or Bash (version 5) Classes. So, it's doing what it's supposed to do, but, until those two structures are completed, it'll show up every time someone visits the website on a fresh session. Might not be that big of a deal, but I just thought I should bring it up.

I was out this past week with the high school robotics group I mentor so I couldn't really keep up with emails so I'm just now seeing this.

Sounds like a good time! I hope you had fun!

[github-actions[bot]]

This issue has been inactive for 2452 hours (102.17 days) and is past the limit of 408 hours (17.00 days) so is being unassigned.You’ve just been unassigned from this ticket due to inactivity – but feel free to pick it back up (or a new one!) in the future! Thank you again for your contribution to this project.

[geekygirlsarah]

Adding @TomReilly1 due to PR still in review.

[github-actions[bot]]

This issue has been inactive for 355 hours (14.79 days) and will be unassigned after 53 more hours (2.21 days). If you have questions, please visit the #casa channel in slack during n/a. Link: https://rubyforgood.herokuapp.com/

If you are still working on this issue, that's fine. Please comment here to tell the bot to give you more time.