eLearning Widget Skin - Drag and Drop Images.

Create a "Skin" in HTML JS and CSS" for a Drag and Drop Question widget where the drag and drop zones are images. A widget is a single learning object defined with our product Thinking Cap Create. Widgets can be as simple as single blocks of text or as complex as mini games. Widgets are defined as JSON Objects. The JSON object is then transformed to html using JavaScript/CSS. The JavaScript, CSS, and Images used to display the content are defined in Create as Skins. Widgets may have multiple Skins associated to them. A Skin can only be associated to a single Widget. Widgets are used inside a "Page" and may inherit many CSS settings from the Page. Requirements The JSON structure is already predefined by our Authoring System (Thinking Cap Create). Using the supplied JSON we require a reusable widget, produced using JavaScript and CSS. Create has its own JS Framework that is used for extending and initializing widgets. This library and syntax must be adhered to. You will also have the use of the JQuery and Bootstrap frameworks. 1. The widget must have the ability to be instantiated from a single JavaScript function. Example: [login to view URL]($(dom element)); 2. Use jQuery library, this is what we use in house and will keep code consistent. 3. All interaction must happen within single html page. (hide and show divs) 4. Use jQuery .attr() method to read custom div attributes to determine steps and choice destination. Ie (step="x" and goto="x") you will see these in the attached html document. 5. Code must be well commented and not minified. 6. Use the attached psd's as guidelines for look and feel. It is a Windows 8 Metro based theme. So all elements should fall within this style. 7. CSS or jQuery transitions should be used when going from one step to the next. 8. Target browsers IE8+, Chrome, FF, and Safari 9. Screen resolution of 1024 x 768 10. Image placeholders can be used from the accompanying screen shots. Needs to be responsive and cross browsers This is the first of many widgets we require.