Specifications

Data

The data at the core of the application is grouped into two types of nodes (predictions and realisations) and links between those nodes. For now, a realisation can only be created in relation to a prediction.

Prediction structure

field	Description	type	required
id	Unique ID for the prediction	number	automatically
source	The source where the prediction was made (a book, a movie, etc.)	id	required
description_E	description of the prediction (limited to 300 chars), in English	string	required1
description_D	description of the prediction (limited to 300 chars), in German	string	required1
year_predicted	year for which the prediction is made, if available	number	optional
category	select from a predefined array of categories, like transportation, health, surveillance	string	required
more_info	hyperlink to a page where more info on the prediction can be found	string	optional
timestamp_created	time when the prediction was created	date	automatically
timestamp_edited	time when the prediction was last edited	date	automatically
headline_E	editors can assign a headline to a prediction in the backend	string	optional
headline_D	editors can assign a headline to a prediction in the backend	string	optional
image	editors can attach a specific image to a prediction	img_url	optional
img_credit	credit info for image	string	optional
editors_pick	editors can highlight a prediction from the backend as editor's pick	boolean	optional
user	name of the user who submits the prediction	string	optional
published	designates if a prediction is currently published	boolean	required

1 at least one of those properties must have a value

Source structure

field	Description	type	required
id	Unique ID for the source	number	automatically
source_type	one of Literature, Movies, TV series, Games, other	string	required
literature_title	Title of the literary work	string	required2
literature_author	Author of the literary work	string	optional
movie_title	Title of the movie	string	required2
movie_director	Director of the movie	string	optional
series_title	Title of the TV series	string	required2
series_season	Season number of the series	number	optional
series_episode	Episode number of the series	number	optional
game_title	Title of the game	string	required2
game_studio	Game studio who produced the game	string	optional
other_title	Title of the work	string	required2
other_creator	Person who made it	string	optional
year_published	when the source work was first published	number	optional
more_info	hyperlink to a page where more info on the source can be found (IMDb, e.g.)	string	optional
description	additional info on the source	string	optional
image	image for the source	img_url	optional
img_credit	credit info for image	string	optional

2 at least one of those properties must have a value

Realisation structure

field	Description	type	required
id	Unique ID for the realisation	number	automatically
description_E	description of the realisation (limited to 300 chars) in English	string	required3
description_D	description of the realisation (limited to 300 chars) in German	string	required3
year_introduced	Year when realisation was first introduced	number	required
more_info	hyperlink to a page where more info on the realisation can be found	string	optional
user	name of the user who submits the realisation	string	optional
image	editors can attach an image to a realisation	img_url	optional
img_credit	credit info for image	string	optional
timestamp_created	time when the realisation was created	date	automatically
timestamp_edited	time when the realisation was last edited	date	automatically
published	designates if a realisation is currently published	boolean	required
3 at least one of those properties must have a value

Connection structure

field	Description	type	required
node1	Endpoint one of the connection	id	required
node2	Endpoint two of the connection	id	required
timestamp_created	time when the connection was created	date	automatically
timestamp_edited	time when the connection was last edited	date	automatically

URL Structure

proposed url structure for a prediction would be: dystopiatracker.com/p/ + creator/ + work/ + prediction-id

eg. dystopiatracker.com/p/george-orwell/1984/id=12

---

Features

First, we will focus on implementing two features: A card overview of all content and the ability for users to contribute data themselves.

Card view

Predictions are displayed as cards. The user can filter the view or select a prediction.

The user can apply three filters, separately or combined

• by category (select from dropdown)
• by media type (select from dropdown)
• by work (typeahead search) Every filtered view has a unique URL

For each view (home or any filters applied), the results are displayed in two groups.

• 1-8 latest matching predictions with property editors_pick. if no matches for the given filter, don't display this section
• latest predictions

On mobile, only the category filter is displayed (and maybe the "search by work" field).

User generated content

Any user, no registration needed, can enter data, i.e. a prediction or a realisation connected to a prediction.

On all list views, there is a button that leads to the input form. On desktop, the button is placed at the top left corner of the latest predictions (see image above), on mobile the button is floating above the content fixed in the bottom right corner (see image above).

The user hits the create button, then:

1. User selects the source type.
2. Based on the source type, the corresponding title and creator fields appear.
3. User fills in remaining fields, publishes prediction.
4. User is prompted to share the prediction / add a realisation / add another prediction.

Once a prediction is published, realisations can be connected to it. There are two trigger points for this.

• Right after a prediction is entered, the user clicks "Add realisation" on the Thank-you-screen.
• Every existing prediction comes with the same button to trigger the form for adding a realisation.

Single prediction page

Every prediction will have a permalink. This dedicated single page shows the prediction with all its connected realisations and optional headline and images added by the editors (we will do that for all editor's picks).

Languages

The application will launch in English and German. All interface elements will be available in both languages, the default being defined by browser settings (if browser set to German, show German, else: English).

Content is entered in the language the application is currently running in (meaning that prediction_E or prediction_D is shown) and will be translated by an editor later.

In the application, show only cards for which the respective content property (prediction_E or prediction_D) has a value.

---

Backend

The backend will be used by editors for quality assurance and to add missing info to existing entries. Thus, the following functionality needs to be provided.

• List of all entries that can be filtered by the same criteria as in the frontend
• Filter option: Show all entries where not all fields are filled
• All entries can be edited or unpublished
• All entries can be highlighted as editors_pick

---

Timeline view

Timeline view complements the card view and is meant to give a good view on the big picture. It is only made available on desktop (with a hint on mobile that it exists...).

###Data We need the same array of data that we use for the timeline on detail pages ($scope.alldates), that contains, for each prediction, the year_published of the source of a prediction, the year_predicted of the prediction and the year_introduced of all realisations attached to the prediction.

###Interface

• All data points are displayed on the same canvas, squares for predictions, circles for predicted realisations (year_predicted) and actual realisations (year_introduced), colored by the category of the prediction (like we do with the cards).
• Per prediction one line is used, predictions are sorted by category.
• Time axis should be linear between 1900 and 2100, before and after exponential to account for very early predictions and stories that are set in a very far future.

###User actions

• On hover, each point reveals some additional data in a tooltip (description, source) and provides a link to the respective detail page.
• On click, a line is drawn between all connected data points (prediction, predicted realisation, actual realisations) and all other data points fade to opacity 0.5.
• User can apply the same filters as in card view
• Toggle to show connection lines for all predictions at once