Intro.js tutorial

[danrademacher]

This actually looks pretty good.

Here's the mockup: https://seattlegov.sharepoint.com/:p:/r/sites/OSE-External/_layouts/15/Doc.aspx?sourcedoc=%7BB72BE390-04E8-44AF-B15B-187B8872D964%7D&file=User%20Tutorial%20Mock%20Up.pptx&action=edit&mobileredirect=true

That might be annoying to access, so I saved to Drive, but we should be mindful that Mike could update the Sharepoint and Drive will not stay in sync.

https://docs.google.com/presentation/d/14Sbl9xQwP0rQSoAW2dVy0eLuF0fqKL4b?rtpof=true&usp=drive_fs

[danrademacher]

Notes from meeting:

• Can we get to the building report have a similar set?
  • Yes
• Might want to have it almost as second tutorial -- or at least some way to start it at that step for the building report

[tomay]

I’m not sure intro.js will do anything dynamic on the page. Although we might be able to, using an approach like this.

Way back in 2018 I used hopscotch to do something similar, we opened a panel that was by default closed, and then highlighted something within it. That project has been archived, but doesn’t mean we can’t use it.

There’s another one called driver.js that lets you do asynchronous things before calling the next step.

[danrademacher]

I guess the relevant example is the async tour? https://driverjs.com/docs/async-tour

Looks highly functional, though it takes some imagination to apply their examples to real interfaces

[tomay]

The asnyc utilities of Driver seem to be working well so far.

One limitation could be that we can only highlight a single element, using the bbox of that element. So a view like this, for example, won't be possible:

Here's what we get instead (the entire panel, not just the labels)

[tomay]

Here's the splash screen so far:

[danrademacher]

That's looking really nice!

One thing I was thinking about after last meeting was that we need to make sure the splash is super accessible and easy for tab nav and screen reader, since they are using it to highlight accessible alternative

[tomay]

Good thinking! I added focus styles (projects of this vintage this often include a "reset" CSS to remove all default focus styles), increased the font size to 16px and made the close button a proper <button>

[tomay]

The tour is largely ready to review, however, I only realized far into the work how difficult it was to access the map from the tour.

I might refactor the tour as a child of the map and building layer views. Sounds weird, but that way I'd have direct access to the map and map state, which is only available after the map loads (and needed here to reset x,y,z to the default after the last step).

I'm working around this now with a 3 second timeout when I initialize the Splash and Tour, which is not great.

[tomay]

For now, I've deployed this to https://greeninfo-network.github.io/seattle-building-dashboard/#seattle/2021

We could leave it as is, or dive back in and try another approach for organizing it. My concern with the timeout is that if the map takes longer than 3 seconds to load, then the tour would break when it gets to the map as default lat/lng/zoom will be undefined.

[tomay]

Hmm, just realized you can have this happen, if loading a URL with a report open:

Maybe we just always click the back-to-map link after starting the tutorial?

[tomay]

Updated PPT mockup saved to Drive: https://docs.google.com/presentation/d/1pkCEZoNl8aa8RiQkIkS8FkY4aN4e5Elk/edit?usp=drive_link&ouid=112218622749960089733&rtpof=true&sd=true

[danrademacher]

Pulling over from Slack that I am somewhat concerned that the Launch Tutorial link does not repeat the splash page info, so there's no easy way to get that. But Tom is concerned that the user told us not to show them that panel, so why are we showing it to them and making them click again?

A both/and solution here would be to add to the FAQ, but when I tried that in this branch, the HTML for links is ignored.

My main concern here is that the accessibility information should be accessible even if I disable the tour.

[tomay]

To make this work, I had to double up on the interior quotes in faq.csv

cartodb_id,question,answer
18,What is this tool for?, Use this tool to explore building energy and greenhouse gas emissions performance data that is collected under Seattle’s energy benchmarking ordinance.
19,How else can I access this data?,"The Energy Benchmarking Map displays annual energy and GHG emissions data for buildings 20,000 square feet and larger, dating back to 2015. To access Seattle Energy Benchmarking data in a spreadsheet format, please visit the the <a href=""https://data.seattle.gov/browse?q=building%20energy%20benchmarking&sortBy=relevance&utf8=%E2%9C%93"">Seattle Open Data Portal</a>."
20,What accessibility accommodations are available?,"The City of Seattle encourages everyone to participate in its programs and activities. For disability accommodations or information in alternate formats, please contact <a href=""mailto:energybenchmarking@seattle.gov"">energybenchmarking@seattle.gov</a>."

[danrademacher]

Mike sent a doc with a bunch of feedback on it. I saved it here: https://docs.google.com/document/d/1N8pZIzmjX6YSRcDnuBC23gFbpfV-LDJ4?rtpof=true&usp=drive_fs

Th most significant item to me is the issue where if you use the arrows to move backward rapidly in the tutorial, yo get into a state like this:

It seems like the DOM element for that step is not on the screen, and can't be found. This does seem related to going backward, and Mike offered the option of just not allowing backward navigation if we can't fix that issue.

[tomay]

I had to remove references to LeftArrow from the Driver source, rebuild, and include that here.

So the left arrow is now inoperable, but right arrow continues to work as before

[tomay]

This says it defaults to GHG emissions – though sometimes when I run the tutorial the map is actually toggled to show GHG intensity – can we force the tutorial to always show total GHG emissions for this step?

We need to ensure that

• [x] Accordion is open to first panel
• [x] Total GHG is selected
• [x] No buildings are selected
• [ ] ~Year is 2021 (for reliability, given that 2022 is in flux)~ I think this is just a function of the data being inbetween. Once merged and updated to a single file, this should all work as expected