The goal of the challenge is to make few fixes to the CSFV Citizen Science page as outlined in Challenge Requirements section.

Challenge Requirements

Scroll bar

Adjacent widgets should always have the same height, but we have cases where height get changed when we have content that push the div height little further than adjacent widgets.

We have an updated UI prototype you will use to update the page styling, refer to these pages in prototype :

• science-landing-page_blog-details(disqus).html

• science-landing-page_blog.html

• science-landing-page_home.html

• science-landing-page_infographics.html

• science-landing-page_interviews.html

• science-landing-page_media.html

We want to fix this issue by enabling scroll bar for following widgets :

• Home/Blog/Media Articles tabs :

  • Media Articles Widget

  • Infographics Widget

  • Interview Widget

• Infographics tab :

  • Media Articles Widget

  • Interview Widget

  • Blog Widget

  • Infographics Widget

• Interviews tab :

  • Media Articles Widget

  • Blog Widget

  • Infographics Widget

Blog Details Page

The current page styling is broken, example : http://www.verigames.com/science#/blog/55a835f9590077c05395e1da

• The updated UI prototype page science-landing-page_blog-details(disqus).html will replace that page. The page you will implement must match the UI prototype.

• The blog content now is full width.

• Bottom widgets are :

  • Media Article Widget

  • Community Stats Widget

  • Scholarly Article Widget

  • Interview Widget

  • Infographics Widget

  • Newsletter Subscription Widget

• Scroll bar must be enabled in all bottom widgets as mentioned in Scroll Bar section.

Interview Widget In Infograpics Tab

• Prototype File name : science-landing-page_infographics.html
• Update Interview Widget structure to match the one in prototype file.
• Scroll bar to be enabled here as well.

Source Code

Source code exists in private github repo https://github.com/topcoderinc/

If you get 404 then you need permission to access it. Request it in challenge forums, copilot will add you to the repository and you should receive email about you being added to github. Post your *github* account name when requesting access.

• csfv_frontend_module (use master branch)

• csfv_test_data_generator (use master branch)

• csfv_backend_module (use master branch)

Get Started

You need to run the following to get CMS running and Frontend application pages up :

• Checkout csfv_test_data_generator

• Update db configuration in config/development.js, you don’t need to change it if you are using localhost in default port, and no username/password.

• Run ‘npm install’

• Run ‘node app.js’

• Kill the app when you see ‘generation done.

• Checkout csfv_frontend_module

• Update configuration following README.

• run ‘npm install’

• run ‘node app-sockets.js’

• run ‘node app.js’

• access http://csfv.com:8889/science

  • You might need to configure your hosts file to point csfv.com to 127.0.0.1

• Science code placed under csfv_frontend_module:

  • controller :controllers/Science.js

  • views : csfv_frontend_module/views/science/ folder

  • angularjs frontend : public/js/angular/science.js

  • css code for the page : public/css/science.css

  • images are placed under public/i/ folder

Documents

UI Prototype is provided in challenge forums.

 

Final Submission Guidelines

Submission Deliverables

Below is an overview of the deliverables:

• Patch file of changes.

• Deployment document with verification screens for reviewers.

Final Submission

For each member, the final submission should be uploaded to the Online Review Tool.