Article feedback/Version 5/Technical Design

This page describes technical designs for the Article Feedback Tool Version 5 (AFT V5).

See also: feature requirements page, project overview page, testing page, interactive prototype, as well as data and metrics plan.

Overview
The front end of the AFTv5 extension follows the ArticleFeedback extension: on article pages, a set of javascript modules attach a new div to the bottom of the page and fill it with a feedback form. On submission, the form is replaced by a CTA (call to action). Most of this code has been rewritten to allow for the selection of one of a set of possible forms, and one of a set of possible CTAs. Right now, form options 1, 2, and 3 are available, and the edit CTA is the primary choice (falling back to the learn more CTA if the current user cannot edit the article in question).

The back end is entirely new: rather than displaying aggregate data, the Special page shows a feed of the responses to the article passed in to the url. Right now the back end is not available in production; however, it is the first priority for the next phase. (For now, aggregate data from production is available via Dario's tools.)

Database schema
TODO: Rewrite for clarity



New schema here: Article_feedback/Version_5/Technical_Design_Schema (will update and merge into this page soon)

When a feedback form is submitted, a record is created in the article_feedback table and also, depending on the feedback form, a number of rows may be added here, one row is inserted to article_feedback per recordable answer;

aaaa_feedback_id is the aa_id in aft_article_feedback, and aaaa_field_id is from the article_field table (which will eventually live in memcache, to save us some querying)

The value of aaf_data_type will determine which of the "aaaa_response_" columns is filled in - only one will be set for each answer row. Group ID is optional, and is used for grouping similar inputs on reports.

After that, there are four rollup tables that store reporting data and averages, which are updated on each for submission. There are two tables grouped by pageID, which count the sum of all revisions, back to the wgArticleFeedbackRatingLifetime, and two for revisions, which are grouped by revisionID. aft_article_revision_feedback_ratings_rollup is identical, save for including an "afr_revision" column, and the prefix changing from "aap_" to "afr_" These tables are used for aggregating numerical ratings (trustworthiness from 1-5, etc), and boolean inputs (did you find what you're looking for, with "yes" being a 4 and "no" being a 2, per WMF requirements). There are also a second set of rollup tables for counting the option-based questions. As above, there exists an aft_article_revision_feedback_select_rollup table, which is identical save for the revision_id column, and with the "aarfsr_" prefix. This is used for determining, for example, how many feedback comments were marked as suggestions versus problems or praises.

Free-text comment fields are not rolled up.

Overview of changes from AFTv4:
 * 1) Prefix all table names with "aft_", per WMF.
 * 2) Alter table article_feedback to drop columns aa_rating_id and aa_rating_value, and add columns for created and modified timestamps, is_submitted (boolean)
 * 3) Create additional tables to store ratings and comments relationally, allowing for arbitrary fields in arbitrary "buckets" of feedback.
 * 4) Rename article_fedback_pages and _revisions to something more descriptive of them being rollups, and add page/revision rollup tables to track averages of the boolen or select inputs (IE, the percentage who "did you find what you were looking for", or a breakdown on feedback type - "suggestion", "problem", "praise"). Add bucket column to all tables, for A/B split evaluation.
 * 5) Change rollup logic to recalculate based on averages/sums, instead of adding/subtracting ratings totals on each submission.
 * 6) Remove any restrictions on the number of feedback records a given user may record, or any capacity to overwrite/edit feedback records, per WMF 11/7, and allow any number of records to be recorded. Note that the actual ratings calculations are to be based on only the most recent feedback ratings per user per article revision, per Fabrice's 11/9 email.

NB: Extension installer files will have to be created or updated as needed.

Front End
After page load, the startup module (ext.articleFeedbackv5.startup.js) determines whether to display the form, and if so, loads the primary module (ext.articleFeedbackv5.startup.js). The primary module attaches a new div to the bottom of the page and invokes the jquery plugin (jquery.articleFeedbackv5.js) on it, then adds a link in a prominent location -- if the user scrolls to the bottom of the page, they'll see the form there; if they click the link, they'll see it in a overlay window. The particular form the user sees, and the exact location of the link, are chosen via bucketing.

If the user hits the submit button, it runs an error check and, if there are no issues, invokes an AJAX request. Upon successful return, the form is replaced with a CTA (call to action).

Flow

 * 1) Startup phase
 * Determines whether to display the tool:
 * 1) * the user agent is supported
 * 2) * the page is an article
 * 3) * the category is whitelisted/blacklisted
 * If all is well, it loads the main module.
 * 1) Main phase
 * Creates a new div, inserts it at the bottom of the article, and invokes the jquery plugin on it
 * Selects a trigger link option and adds it to the page
 * * NB: The click event calls the plugin's open-as-modal event
 * 1) Init phase (, method  )
 * Sets some state variables, chooses a display option, and binds the "appear" event to the holder div
 * 1) Load phase (, method  )
 * Sets up the bottom of the page and overlay containers, builds the selected form, and puts it in the appropriate container
 * 1) Submit phase (, method  )
 * Runs validation, locks the form, and sends off an ajax request
 * 1) Submit response phase (, method  )
 * On success, selects a CTA and loads it into the appropriate container, and removes the
 * On error, sets an error state and unlocks the form
 * 1) CTA close
 * If the user closes the CTA, it is entirely removed from the page and cannot be retrieved.

Debug state and query string options
When the plugin is in the debug state, you can choose a display option or a trigger link option from the URL and avoid bucketing. The debug state may be invoked by setting the config variable  to true in , or by passing   in the url.

Bucketing


The decision of what form to display works like this:


 * 1) If the plugin is in the debug state, and a form has been requested in the url, and that form is known, select it.
 * 2) If there's a form-bucket cookie set, select it.
 * 3) Otherwise, call.

The decision of what link to display works like this:


 * 1) If the display bucket is   or , select   (nothing).
 * 2) If the bucketing object is missing from the config, select.
 * 3) If the plugin is in the debug state, and a link has been requested in the url, and that link is known, select it.
 * 4) Otherwise, call.

Note that the form selection doesn't check for a missing bucketing config object -- it should; this will be changed soon.

Submit AJAX call
This call is made when the user submits any of the feedback forms.

Call can be found at:

, method

Response can be found at:

Parameters:

Success response:

JSON object with one key,, containing this object:

Error response:

JSON object with one key,, containing the token for the appropriate error message

Special Page
TODO


 * 1) Moderation tools - hide, promote (to talk page), or flag various pieces of feedback.
 * 2) Sorting and filtering options - good comments first (how that's defined is unclear), newest first, etc. Basicallym tools are needed to manage or at least hide the inevitable flood of spam "feedback".
 * 3) A special page, on the level of the talk pages - add a link to this in the not-quite-top-level navigation on said talk page.
 * 4) Need to work out which bits of this page are must-have-now vs must-have-eventually.
 * 5) Phase 1 will have a limited version with:
 * 6) Filters: All, Visible only
 * 7) Moderation Tools: Hide this comment
 * 8) Sorting: By date only
 * 9) Pagination: Fixed at 50

Platforms
We aim to support the following web browsers for phases 1.0 and 1.5:
 * Internet Explorer 7+
 * Firefox 3+
 * Safari 5+
 * Opera 10+
 * Chrome 5+

NB: Support for IE7 was pulled from phase 1.0.

We will focus our testing on these top browser versions for Wikipedia:
 * IE 8			(17%)
 * Chrome 14	       (16%)
 * Firefox 7		(11%)
 * IE 7			  (7%)
 * IE 9			  (6%)
 * Firefox 3		  (5%)
 * Firefox 6		  (2%)

These will be tested on these desktop platforms:
 * Windows	(78%)
 * Mac		 (8%)
 * Linux		 (3%)

We are not currently planning to support IE6 or mobile platforms for phases 1.0 and 1.5, and will not show the forms at all on these unsupported platforms. In future versions, we will aim for 'graceful degradation' in unsupported platforms, and are working on a good definition for testing that objective.