Survey Page and Logic

[kwcooper]

Hey all. So we're planning a bigger change to the site, being, a separate page for the survey. This was in planning in the beginning, but got pushed under the rug with everything else going on.

The logic is thus:

• Have one, simple landing page for survey takers to go to, then select their language.
• Selecting their language will take them to a language specific page with the links to the survey, as well as links for them to share the survey.

Right now, I implemented an early draft of this at https://gcchemosensr.org/survey/ Only the English link works now, but clicking the button will take you to the English specific page at https://gcchemosensr.org/survey/srv-en/

For reference, the first page can be called landing-page and the second the language-page

The way I see it, we can put the other languages within the survey folder on the site, with the name srv-, and where is the language code. The translations for each page are to come soon.

What is still needed:

• [ ] Can we create a new Jekyll layout for this? We need the banner, and the contact form stripped. We want it to look less like our site.

• [ ] Can we add logic, similar to the original buttons, to dynamically create the buttons on the landing page in a for loop from the yaml file? (With links to pages, not the survey links)

• [ ] Have additional logic on the language pages for the survey links, and social media links.

I think that should be it for now. Leadership want's this done fairly quickly ie. by Friday if possible, to handle the oncoming press storm.

Thank you everyone! @cbouy @mariaveldhuizen @Huitzilo @kwcooper @vparmac

[cbouy]

Hey ! I'll take care of the Jekyll stuff:

• layout for the language page: do we really need the srv-en or can we stick to just english or en ?
• landing page with automatic creation of buttons (which go to the language page): the implementation will be slightly different from the YML file. More on that when I'm done.
• For "logic on the language page for survey links and social media" I guess you mean having something similar to the current survey links where the content of the page is separated from the style/layout ?

I'll do something very crude at first for the layout without the banner. Do we still need the navigation bar ?

[mariaveldhuizen]

I think it would be good to have a navigation bar that allows going back to the "landing-page" for the different languages. In case someone bilingual changes their mind I guess :)

[cbouy]

I'm done with the Jekyll details, now I need some help with the content:

• Surveys are now stored in the _surveys folder and all the details are stored in a markdown files (.md). For now if we need to add new surveys will need to do it both here and in the survey-links.yml file, but once we are done with the transition we can get rid of the yml file.
• Each new file in this folder will automatically create an entry on the landing page. Since the name of the file is only visible by us and in the url, I'd rather keep the English translation of the language to avoid weird encoding behavior later. The button labels will be the same as what we currently have on the main page.
• Now for the content, let's take English as an example: the source file and the resulting page. The language field is the name displayed on the button of the landing page, and the lang is used for SEO (you can find the corresponding codes here). All the other fields and the 2 lines of text are displayed to the user and should be translated.

What needs to be done:

• validate the text displayed on the language and landing pages (english)
• prepare the files with the translations for the language pages
• I noticed french doesn't have a short link (bit.ly) or I couldn't find it, I will need it at some point
• improve the look and feel of both landing and language pages

What I still have to do:

• Create the share button for twitter, facebook, linkedin, whatsapp, and plain text. Should I add the QR code also ?
• fix the sorting of buttons on the landing page

[vparmac]

Cedric, let me know how the page looks like and I can have the translation file created. Also here is the short bitly for French: https://bit.ly/3a1A7b0

On Fri, Apr 17, 2020 at 3:15 PM Cédric Bouysset notifications@github.com wrote:

I'm done with the Jekyll details, now I need some help with the content:

• Surveys are now stored in the _surveys folder https://github.com/GCCR/GCCR.github.io/tree/master/_surveys and all the details are stored in a markdown files (.md). For now if we need to add new surveys will need to do it both here and in the survey-links.yml file, but once we are done with the transition we can get rid of the yml file.
• Each new file in this folder will automatically create an entry on the landing page https://gcchemosensr.org/surveys/. Since the name of the file is only visible by us and in the url, I'd rather keep the English translation of the language to avoid weird encoding behavior later. The button labels will be the same as what we currently have on the main page.
• Now for the content, let's take English as an example: the source file https://raw.githubusercontent.com/GCCR/GCCR.github.io/master/_surveys/english.md and the resulting page https://gcchemosensr.org/surveys/english/. The language field is the name displayed on the button of the landing page, and the lang is used for SEO (you can find the corresponding codes here https://www.unicode.org/cldr/charts/latest/supplemental/language_territory_information.html). All the other fields and the 2 lines of text are displayed to the user and should be translated.

What needs to be done:

• validate the text displayed on the language and landing pages (english)
• prepare the files with the translations for the language pages
• I noticed french doesn't have a short link (bit.ly) or I couldn't find it, I will need it at some point
• improve the look and feel of both landing and language pages

What I still have to do:

• Create the share button for twitter, facebook, linkedin, whatsapp, and plain text. Should I add the QR code also ?
• fix the sorting of buttons on the landing page

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/GCCR/GCCR.github.io/issues/16#issuecomment-615418940, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMO4Z6W4GDJJT7R443LIR3DRNCTEXANCNFSM4MKHCUAA .

--

Valentina Parma, PhD

Research Assistant Professor Department of Psychology Temple University Weiss Hall, Room 874 1701 North 13th Street Philadelphia, PA 19122 https://vparma.netlify.com/

[cbouy]

Sorry for the late response, I would need translations for the following sentences/words:

• LANGUAGE survey (replace LANGUAGE by English, French, ...etc.)
• Hello!
• Participate in the GCCR study!
• Take the survey
• Share the survey
• The GCCR is a group of 600 scientists, clinicians, and patient advocates across 50 countries founded in response to the COVID-19 pandemic. Our goal is to collect evidence-based information to combat the spread of COVID-19.
• For more information about this study, please contact XXX.

[kwcooper]

I think it looks great! Thank you everyone, especially @cbouy for the jekyll logic he added to make it all more streamlined. In terms of naming, I kept the srv prefix as I anticipate that we may have other language specific pages in the future. But we can cross that bridge when we come to it.

For the share, we may include the icons that I have in the footer for ease of sharing across social media platforms, rather than just one button? We may also want to add the QR code to that page for easier sharing?

[mariaveldhuizen]

I"m following up on the translations

[cbouy]

@kwcooper since the covid-19 surveys are all under the "surveys" folder (i.e https://gcchemosensr.org/surveys/french/ ) that shouldn't be a problem. If we want to translate the home page it can go directly to https://gcchemosensr.org/fr/, and if we add the "home-testing" pages in the future we can have https://gcchemosensr.org/home-testing/french/. I think it makes more sense this way.

For the share button, I thought about displaying all the relevant social buttons once you click on share, but I didn't manage to make it work x) So yeah it will probably be the survey button, and below all the social media buttons. And I agree with the QR code.

[mariaveldhuizen]

https://forms.gle/iGRnobgUvTBRydNw7 check if there is more you want before I collect the information

[kwcooper]

Great! @cbouy good points. maybe even name the pages by the language codes for a shorter (and more standardized) URL?

For the share button, I could play with using the accordion drop-down logic that I have used on the other pages. But frankly, I think just having a section with "Share the survey" with the relevant social media icons below would be just as good.

Lastly, we should add a link to the GCCR homepage. Maybe in the footer?

@mariaveldhuizen the survey looks good to me! Thank you!

[cbouy]

I added more languages to https://gcchemosensr.org/surveys/ with language codes instead of the full name. I managed to make a functional share button, tell me what you think ! The QR code is in there too. I tested it on my pc and Android mobile:

• twitter, whatsapp, and the QR-code work on both pc and mobile
• facebook only works if you're logged in your browser, it doesn't open the app on mobile
• linkedin works as expected (there's not much support for directly sharing links anyway)
• mail works on pc, for mobile it works if I use the Gmail app, not the default app

For the link being shared, should I use the short link (bit.ly) or the link to the landing-page ? @mariaveldhuizen Can you check with language leaders if their survey page is good to go ? I only implement those that are already shared and have the full translation (right now I'm missing swedish, portuguese, kannada, korean and arabic to be up-to-date)

[mariaveldhuizen]

Yes, following up!

[mariaveldhuizen]

The languages that have their own pages already have been notified to check them. The languages that have a survey, but not their own pages yet have also been notified. I'll make a list of pending languages and start prodding them too

[cbouy]

I made a few changes to the layout of the landing page and language page as well (mostly the social buttons for sharing)

[cbouy]

I'm almost up-to-date with the current surveys: https://gcchemosensr.org/surveys/ I'm only missing arabic and korean for the translations.

Should we regroup the buttons a little (3 per line like on the home page) ?

@mariaveldhuizen @vparmac if you have feedback on incorrect translations please tell me !

[mariaveldhuizen]

Japan wants a new email: gccr.japan2@gmail.com Feel free to comment on the Slack channel when you have already resolved some issues, so that I don't follow up unnecessarily.

The pages are looking good, all the buttons are great! Really well done

[vparmac]

This is really great job everybody, thank you! One question I had looking at the https://gcchemosensr.org/surveys/: would it be possible to have the buttons in two columns? The bottom languages have to scroll down a lot. Not sure if you have already discussed this - if so apologies. If not, perhaps if Stephanie Feuer can be of help.

Once again, thank you!

Valentina

On Thu, Apr 23, 2020 at 3:58 AM mariaveldhuizen notifications@github.com wrote:

Japan wants a new email: gccr.japan2@gmail.com Feel free to comment on the Slack channel when you have already resolved some issues, so that I don't follow up unnecessarily.

The pages are looking good, all the buttons are great! Really well done

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/GCCR/GCCR.github.io/issues/16#issuecomment-618244654, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMO4Z6TB2FBZIVWOS35HGHDRN7YK7ANCNFSM4MKHCUAA .

--

Valentina Parma, PhD

Research Assistant Professor Department of Psychology Temple University Weiss Hall, Room 874 1701 North 13th Street Philadelphia, PA 19122 https://vparma.netlify.com/

[cbouy]

Done!

• japan email changed
• traditional chinese button label changed
• "surveys" link added to the navigation bar
• buttons on 2 columns
• all surveys added to the sitemap for SEO

[kwcooper]

Awesome awesome work everyone! I updated the buttons a bit more, and a few minor updates around. Great idea with the sitemap, super low priority, but do you think there is anyway that the update date can reflect when each of the pages are updated? I foresee google's algorithms picking up on full site updates pretty quickly.

What more is left to do on this? Can we close this issue soon?

[cbouy]

From what I see, it's not possible with github-pages (there's a plugin but it's not whitelisted by github so we cannot install it). There seem to be an interesting answer here though, by setting a git pre-commit hook (never used those tbh): https://stackoverflow.com/a/33721446. I'll check if it's doable

PS: nice work on the buttons and the header, I love it

[cbouy]

Closing this issue and opening issue #25 for the sitemap