Thesis Front End

First Stage

Landing page with scrolly-features

• Resources
  • https://ig.ft.com/sites/special-reports/one-belt-one-road/
  • https://pudding.cool/2017/01/making-it-big/
  • https://sonuum.com/
  • https://pudding.cool/process/responsive-scrollytelling/
  • https://css-tricks.com/rem-global-em-local/
• Setup elements - HTML
  • Text scroll through (w/ headlines)
    • Appr. time needed
    • Describe elements one-by-one
    • Progress bar description
    • Selection of values (only slider for now)
    • Ability to toggle marker
    • Start button
  • Map div
  • Value-picker (temp)
• Base styling
  • Theme
  • CSS reset
  • Base unit setup
  • Placement all elements large screen
• Scrolly
  • Add in perspective layers
  • ONGOING Fade out other layers based on focus - active marker may need outline highlight
    • Ensure trigger points as expected
  • Button design LARGE + regular
• Clean up and make it look as (almost) for distribution
  • Placement all elements small screen
  • Change elements for real versions:
    • Placement of map working and test browsers+screen sizes
    • Working slider https://pudding.cool/2020/10/photo-history/ - Placement + styling + number of ticks
  • Override scroll on map-div needed? = NO

Form for subject data

• Can't think of any variables of interest placeholder (only click-through and progression)

Progression

• css refactoring core+ other pages
• Slider + Submit
  • Submit inactive until slider change
• Timer - reset and msPassed
• Form -> Slider
• [x]Basic browser-side timer framework (on-load of images, and some events)
  • Image full load ensured
• Hard-coded progression -> go through
• Maybe later Form -> Alpha picker (broad range of backgrounds)) - 2nd step
• Logger (both console + to backend)
• Refactor (intro session+progression, then do user acceptance)

User acceptance form of viz types after progression

• Smaller pictures of viz types
• User input of ratings

Testing

• Testing framework or manual for browsers/sizes and using friends for input
• REMOVE: Progression indicator (working all way from intro page)

Second Stage (After back-end setup)

...

• Placeholder... connect to back-end, get rid of bugs...
• AFTER STATISTICAL TESTS: add opacity selection mechanism?
• AFTER STATISTICAL TESTS: Individual results page?
• AFTER STATISTICAL TESTS: Thank you page?
• AFTER STATISTICAL TESTS: New user setup - currently only one session per "localstorage"?
• AFTER STATISTICAL TESTS: Weird slider moves up until image loaded bug...
• AFTER STATISTICAL TESTS: UUID-gen + randomized progression-gen (front or backend?)...

Building and running on localhost

First install dependencies:

npm install

To run in hot module reloading mode:

npm start

To create a production build:

npm run build-prod

Running

node dist/bundle.js