Change #1247616 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/extensions/QuickSurveys@master] [WIP, PoC] Add simple feedback question type

https://gerrit.wikimedia.org/r/1247616

I've done some investigation into QuickSurveys and have detailed my findings below. cc @Sneha, @HFan-WMF, and @Jdlrobson

Design

Are we able to modify quick survey to what's shown above

Yes, I think we can do this. Some of it is already supported, while other parts would require updating QuickSurveys to support this style of question. IMO, QuickSurveys should support this kind of modern "vibe check" survey so it could be used across features.

Here's a rundown of the customizations we want to make and how we could handle them:

Put survey in a custom place on a special page

QuickSurveys already supports this: we can display the survey only on a special page, then set the embedElementId option to ~ and use the showSurvey API to display the survey within a Vue component on the Saved Pages page.

Button responses, dialog, and success message

This would represent the bulk of the work we'd need to do in QuickSurveys to support this new question type. Currently you can only have single answer questions (radio buttons) or multi answer questions (checkboxes), plus a submit button. We'd need to create a new layout type that would use buttons that launch a dialog. I think we should consider how to generalize this into a feedback format that could be used across features. I've created a proof of concept patch to represent one way of doing this.

Custom styling

We can style the new survey type however we want. We'd need to decide if we want these styles to apply to all surveys in this new format (and put the styles in QuickSurveys), or if it's specific to ReadingLists.

Mobile

Do quick survey's show up on mobile?

Yes! QuickSurveys appear on mobile web just like they do on desktop. As noted above, we can configure where the survey appears on the page, and this will work on both desktop and mobile web.

Can we make sure to not show the survey if the user has taken the survey on another platform for e.g. if taken on Desktop don't show on Mobile.

Yes, the survey will behave the same way on both.

Proof of concept

For developers in the future: my proof of concept patch could be used as a starting point. To get it working, put the following in your LocalSettings.php file:

$wgQuickSurveysConfig = [
	[
		'name' => 'ReadingLists beta feature survey',
		'type' => 'internal',
		'questions' => [
			[
				'name' => 'enjoyment',
				'question' => 'readinglists-betafeature-quicksurvey-question',
				'layout' => 'simple-feedback',
				'answers' => [
					[ 'label' => 'readinglists-betafeature-quicksurvey-answer-positive' ],
					[ 'label' => 'readinglists-betafeature-quicksurvey-answer-negative' ]
				],
				'shuffleAnswersDisplay' => false,
			],
		],
		// TODO: set embedElementId to ~ and display survey via showSurvey API.
		// This is all configured to make the survey show up for everyone.
		// TODO: Show survey for the right users.
		'audience' => [
			'minEdits' => 0,
			'registrationStart' => '2018-01-01',
			'registrationEnd' => '2080-01-31'
		],
		'privacyPolicy' => 'ext-quicksurveys-example-external-survey-privacy-policy',
		'enabled' => true,
		'coverage' => 100,
		'platforms' => [
			'desktop' => [ 'stable' ],
			'mobile' => [ 'stable' ]
		],
	]
]

Then add the following to your i18n files in ReadingLists:

// in en.json
	"readinglists-betafeature-quicksurvey-question": "Are you enjoying this feature?",
	"readinglists-betafeature-quicksurvey-answer-positive": "👍 Yes",
	"readinglists-betafeature-quicksurvey-answer-negative": "👎 No"

// in qqq.json
	"readinglists-betafeature-quicksurvey-question": "QuickSurvey question asking for feedback on the ReadingLists beta feature.",
	"readinglists-betafeature-quicksurvey-answer-positive": "Positive response to survey question",
	"readinglists-betafeature-quicksurvey-answer-negative": "Negative response to survey question"