Project Overview

www.verigames.com (we call it CSFV website) is a gaming community website, the games perform formal verification of software.

“Formal Verification of a Software” is a process that checks that software is free from flaws that can make it operate improperly or vulnerable to misuse.

Challenge Overview

We are adding a new landing page to the website dedicated to post materials about the formal verification process, and how the website games are implementing it.

Challenge Requirements

Pages

• Home page.

• Blog and it’s details page.

• Interviews and it’s details page.

• Media Articles and it’s details page.

• Infographics.

Header, Footer and Navigation

• The page will be implemented as a view and will be embedded in existing CSFV layout. So header, footer, and navigation will be same as other pages in CSFV website.

• The landing page will be accessed directly via /science route.

Next we are listing widgets used in these pages and how they are populated

Widgets Requirements

1. Sharing
   

   • These will link to CSFV social network pages. Same as done in CSFV page headers.

   • The email icon will be a link with “mailto:”, the email will be loaded from configuration.

     • configuration item is SUPPORT_EMAIL_ADDRESS (refer to env_sample)

2. Banner widget

• The slider content will be stored as set of CMS posts. Each item in the carousel will be stored in separate CMS Post.

• The mapping between CMSPost fields and the banner elements is as follow :

  • CMS Post Subcategory : ‘science-banner’.

  • Left side column :

    • Stormbound is a title and populated from cmsPost#title field

    • The description below title is a cmsPost#excerpt

    • The rating stars should be hidden.

    • Play Now button link will retrieved from cmsPost#metadata array, where key is ‘play_link’.

    • The banner image will be retrieved as link from cmsPost#metadata array where the key is ‘banner_image_link’.

3. Blog Articles - very small widget

• Each item is stored in separate CMS Post.

• “From Our Blog” will link to science-landing-page_blog.html

• Clicking on thumbnail or title will take user to details page science-landing-page_blog-details.html

• The mapping between CMSPost fields and displayed item :

  • Subcategory is ‘science-blog’.

  • The thumbnail image will be retrieved as link from cmsPost#metadata array where the key is ‘thumbnail_image_link’.

  • Text below the thumbnail is cmsPost#title.

4. Blog Articles - small widget
   

   • This is identical to “Blog Articles - very small widget”, additional mapping as follow :

     • The paragraph below title is populated from cmsPost#excerpt field.

     • The date below title is populated from cmsPost#createdOn field.

   • Both links above the items link to science-landing-page_blog.html

   • Clicking on thumbnail or title will take user to details page science-landing-page_blog-details.html

5. Blog Articles - large widget
   

   • This is identical to “Blog Articles - small widget”.

   • The content loaded here will be the same cms posts rendered in verigames.com/news but we will use metadata to select specific cms posts from that news page to be rendered in this page.

   • The sharing will be using ShareThis plugin.

     • Refer to existing news listing page to replicate how we do it.

     • Remove number of comments element.

   • Clicking on Thumbnail or title will take user to science-landing-page_blog-details.html

   • More content can be loaded by clicking on “View All XXX” link at bottom of the widget.

6. Full Blog Article widget
   

   • This is displayed in science-landing-page_blog-details.html

   • Remove number of comments element.

   • The mapping with CMSPost will be as follow :

     • Title is populated from cmsPost#title

     • Date below the title is populated from cmsPost#createdOn

     • The banner image will be retrieved as link from cmsPost#metadata array where the key is ‘banner_image_link’.

     • The paragraph below is populated from cmsPost#content.

   • Sharing icons will be implemented as in “Blog Articles - large widget” widget.

7. Media Articles - small widget
   

   • The logic to populate this widget is same as “Blog Articles - small widget” with difference that categories will be pulled from CMS subcategory “science-media-article”.

   • “Media Articles” link will take user to science-landing-page_blog-details.html

8. Media Articles - large widget
   

   • This widget is identical to “Blog Articles - large widget” with difference that posts will be associated with ‘science-media-article’ subcategory.

9. Media Article Details Widget

   • This page will be identical to science-landing-page_blog-details.html.

   • The post is populated same as “Full Blog Article” widget with difference that post will be associated with ‘science-media-article’ subcategory.

10. Infographics - small widget

• The “Infographics” link to science-landing-page_infographics.html page.

• The widget will display exactly one cms post that represents an infographic.

• The cms post will contain following information :

  • Subcategory : ‘science-infographics’.

  • Title can be any text as we don’t render it in the widget.

  • Description can be any text as we don’t render it in the widget.

  • The thumbnail image will be retrieved as link from cmsPost#metadata array where the key is ‘thumbnail_image_link’.

  • The infographics image will be retrieved as link from cmsPost#metadata array where the key is ‘infographics_image_link’.

• The link below the infographics should be removed.

• Clicking on thumbnail will open up the infographics image in a popup.

11. Infographics details widget
    

    • This is rendered in science-landing-page_infographics.html page.

    • It will read same cms post as we did for “Infographics - small widget”.

    • The content will be rendering the infographics image.

12. Scholarly Articles and Bibliography widget

• Scholarly articles will be stored as a single cms post, the mapping is as follow :

  • Subcategory is : ‘science-scholarly’

  • The link will be populated from cmsPost#metadata array where key is ‘scholarly-link’

  • The list will be populated from cmsPost#content.

• Same thing applies to ‘bibliography article’ with difference that the subcategory associated with it is ‘science-bibliography’

• Clicking in both links should open the link in a new page, not in the same page.

13. Interview - small widget

• This will be stored as CMS Post.

• Interview link will take user to science-landing-page_interviews.html page.

• The youtube video id to be rendered in this widget will be configured in a CMS Post with following information :

  • subcategory : ‘science-interview’

  • Youtube video id will be retrieved from cmsPost#metadata array where key is ‘video_link’.

• Using the video ID use Youtube API to retrieve the information to be displayed in the widget :

  • the paragraph is the snippet description of the video.

  • the “John Franky” will be the retrieved from channels API snippet#title.

• “Verigames Company LLC” is hardcoded.

• The video will be created as iframe using the youtube id.

• The video to be pulled from cmsPostService should be randomly selected from list of posts returned.

14. Interview - medium widget
    

    • This is identical to “Interview - small widget”.

15. Interview - large widget
    

    • This is identical to “Interview - small widget” except that we pull multiple items. and we display more stats from youtube api :

      • The date will be retrieved from snippet.publishedAt from youtube list API.

      • comments count will be retrieved from statistics.commentCount from youtube list API.

    • User can scroll further to list more items if available.

16. Audit player list
    

    • Out of scope. keep it static.

17. Subscribe
    

    • This will use mailchimp.

    • Reuse the functionality we have in footer.

18. Comment widget
    

    • This will use disqus widget.

    • Please refer to existing news page/view to replicate the functionality.

19. Twitter widget
    

    • This is a custom UI twitter widget.

    • Please refer to widget implementation in existing home page.

How to create CMS Post ?

1. Open CMS application.

2. Navigate to “Post” listing page.

3. Create new CMS post by clicking on “Add New Post” button.

4. Set content in title, description and Excerpt fields.

5. Set custom fields based on the widget requirements. Common fields are :

   1. page_template and website_id : these are used to identify the posts from other posts. page_template value would be ‘science’ and website_id will be the configured website id in csfv_frontend_module.

   2. To include image link you need to attach a file in the cms post then copy/paste the link in the metadata value field.

6. Select ‘science-resource’ category.

   1. create the category by clicking “Add New Category” link bottom of the ‘categories’ widget.

   2. This category does not have parent category.

7. Select subcategory of ‘science-resource’ category according to the widget requirements.

   1. create the category by clicking “Add New Category” link bottom of the ‘categories’ widget.

   2. Select ‘science-resource’ as parent category.

8. Check ‘Public’ option in top right widget.

9. Click ‘Publish’.

How to read CMS Post?

Here is a snippet that show to retrieve CMS posts from csfv_frontend_module controller using cmsPostService.

// Note that the cmsPostService will be loaded into the controller via injection

_cmsPostService.search(String(request.session.userId ? request.session.userId : 'anonymous'), {

                   categoryName: {sub-category-name},

                   status: "Published",

                   metadata: [

                       {

                           key: {key},

                           value: {value}

                       }, .. etc

                   ]

               }, function(err, posts){

                  // as we might have multiple categories with same name in different levels you need here to validate that the post is associated with both the parent category and the subcategory. Otherwise, ignore the post.

                });

• The above code pass userId if the user is logged in, otherwise, it passees anonymous.

• The search criteria should be configurable.

• The callback accepts two parameters

  • err : if error happens.

  • posts : array of matching posts.

General Information

• A single controller should be added for all code in this page.

• Each tab should pull it’s content only when it gets the focus, there are too much data to render from all tabs at once.

• Base route should be /science.

• Common code should be moved to helper method.

  • This includes the content of widgets of different sizes, you can create helper function that return posts based on an offset and size values.

• Provide test data for the new page. You are expected to update csfv_test_data_generator.

Documentation Provided

• UI Prototype provided in challenge forums.

• The deployemnt guide of the CSFV websites can be found in the github private repos, in README file. Ask questions in challenge forums. if you have troubles deploying the websites.

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

• csfv_cms_module

• csfv_test_data_generator

Final Submission Guidelines

Submission Deliverables

Below is an overview of the deliverables:

• Patch file of changes.

• Detailed document about structure of CMS posts and metadata, and configuration needed by the page.

• Deployment document with verification screens for reviewers.

• Updated csfv_test_data_generator module if needed.

• Updated nodejs_sitemap_generator module to include new route