UNI Direct Dynamic Placement Positioning Code Challenge

Project Overview:

Welcome to the UNI Direct Dynamic Placement Positioning Code Challenge! The goal of this challenge is to create a HTML5 application using jQuery. 

Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.

Competition Task Overview:

The main task of this competition is to develop a HTML5 Application based on the provided documentation with screenshots. Winner is expected to work on updates to their submission after the challenge for any small fixes/updates to the following required items:

Create a web application that will position a placement code on an image given the following: image, image dimensions, placement codes with their relative coordinates and color.

• - Given a product image and size and list of placement locations, show each placement in the correct position on the product image.
• - Product Image is a line drawing which is already displayed on the web page.
• - Number of Placement Codes is variable.
• - Position of each Placement Code within the Product Image is variable.
• - Placement codes will be shown as a solid colored circle with the placement code in white text. The color of the circle is variable and will be input for each placement code.
• - Arrow pointer will be shown for some of the circles, so arrow pointer is optional field in input data for each circle.
• - Optional Challenge Requirements:
  • (a) Handle variable product Image size - to plan for responsive design, if the input image is scaled from its original size when displayed, the points rendered should be scaled as well so their relative position on the image remains correct. (You may use CSS3 media queries or Bootstrap or Foundation frameworks to handle responsive design.)
  • (b) Demonstration Page:
    • (i) Look up and load an image from the file system, dynamically display image size.
    • (ii) Input sample data on the image loaded (point location, color, code) from the webpage and display it on an image. Ability to add one or more data points.
    • (iii) On mouse over of the image, display the X, Y coordinates. On mouse-click, save the coordinates to an editable field in the browser.

Note: The "Optional Challenge Requirements" will give advantage on scores on "Question-1.1.7" of review scorecard, if you can complete as many as possible from these optional requirements.

Technology Requirements:

• - HTML5/CSS3/JavaScript

JavaScript Requirements:

All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. We would like to use following JavaScript libraries:

• - jQuery

Browsers Requirements:

• - IE8+ Browsers (use HTML5shiv to support older versions)
• - Latest Chrome Browsers
• - Latest Firefox Browsers
• - Latest Safari Browsers

Documentation Provided:

Requirement document and screenshots.

Final Submission Guidelines

• - Upload all your source code as a zip and provide any setup documentation that are needed.
• - Instruction documentation containing step by step of testing your application for all implemented features with screenshots or a video of your application using Jing.