Survey table

[cbouy]

Fixes #37

I've started working on the table of surveys, here's a quick mockup based on what @mariaveldhuizen sent:

We should probably add hover tooltips on each image with a corresponding text description. I'm not sure if we want to keep the MCQ (below the table) or not (to avoid confusion) ? @kwcooper this version isn't considering mobiles for now, but we'll have to make the table mobile-friendly at some point.

Also I'll need the URL for the S&T challenge at some point

[kwcooper]

This looks great!

I wonder if we'll need to add a key of some sort to describe the symbols, or place the text below them.

Also, how does it look on mobile?

For the last column, I wonder if we can resize the images so that the columns are the same size, or maybe edit the spacing between them so that they're closer?

In any case, it looks really good so far!

[mariaveldhuizen]

I can probably revise the icons in the last column to make them uniform in width. How about for mobile we transpose the table, could that work?

[mariaveldhuizen]

Another complication is that the check and challenge both land at the same page. We are looking into two separate links for those, but we want to launch this without waiting (because our new tool is ready for data collection). So I would like to suggest an intermediate solution:

1. when clicking the link to the challenge, we will include an intermediate page that shows a screenshot of the button and say " click the top button on the next page that looks like this"
2. same for check, but the intermediate page the check " click the top button on the next page that looks like this"

I realize this is a super clunky solution, but maybe best in the interest of time?

[mariaveldhuizen]

This is the actual landing page, to challenge is indeed on the top. https://riech-check.de/

[cbouy]

Yes we can have an intermediate window within the page, a bit like with the current setting with the MCQ that opens a popup with the links to the appropriate test(s), except this time there would be images saying "there are several tests so make sure to click on this button". What I'm a bit more worried is that this riech-check.de page is dependent on the browser's language settings so on the page I might only see one test and not the other ? Or are they both available no matter the language ?

[mariaveldhuizen]

YES, THAT can of worms.... So hopefully they will have sorted out different links for the different versions by the time we implement the table for different languages too.... We just want to implement this intermediate solution for English. Because for now we also only need the fourth tool and that extra clarification of the differences between the tools for English mostly.

[mariaveldhuizen]

This folder contains the icons for the table. Naming is consistent with position in Table. Column 1 is "focus" Column 2 is "clock" Column 3 is "calendar" Column 4 is "items"

Row 1 is "challenge" (https://riech-check.de/) (separate URL TBA, language based on browser language) Row 2 is "tracker" (https://is.gd/smellandtastecheck_gccr) (separate links for separate languages) Row 3 is "check" (https://riech-check.de/) (separate URL TBA, language based on browser language) Row 4 is "survey" (https://psusensory.compusensecloud.com/edu/showtest.aspx)

So then for the cells [column, row] we want icon with text: [1,1] focus_challenge.png "awareness" [1,2] focus_tracker.png "change over time" [1,3] focus_check.png "loss" [1,4] focus_survey.png "overall symptoms"

[2,1] clock_challenge.png "under 5 min" [2,2] clock_tracker.png "15-20 min" [2,3] clock_check.png "30 min" [2,4] clock_survey.png "15 min"

[3,1] calendar_challenge.png "daily" [3,2] calendar_tracker.png "weekly for 7 weeks, and 2 follow-ups later" [3,3] calendar_check.png "once or more at your own pace" [3,4] calendar_survey.png "once"

[4,1] items_challenge_combined.png "your own device and a beverage" [4,2] items_tracker_combined.png "your own device and regular household items" [4,3] items_check_combined.png "your own device and regular household items" [4,4] items_survey.png "your own device" selected_icons.zip

Mock table attached as well as zip folder with all icons.

[cbouy]

The table is now responsive to the device width, and the tooltips should appear larger and work on mobile too. I moved the tooltips content from the survey.html file to en.md for clarity. I also fixed the images for the check and the survey which were inverted (survey said 15 min but the clock showed 30 min, and vice versa)

[mariaveldhuizen]

this is great! Thanks @cbouy

[kwcooper]

well... hopefully this doesn't break anything...