Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Introduction to the widgeds project - Live demos, source code -

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this


  1. 1. Widgeds An introduction Select a widged Add your Content Publish it anywhere(widget for education)
  2. 2. 2 WidgedsWidgeds? Widgets for EducationSmall sized interactive activities with an instructionalpurpose that can run on a range of devices (desktopor mobile).
  3. 3. 3 Why? Teachers are subject Developers and designersexperts but often have know how to design limited knowledge highly engaging activities about interactivity but dont always know design. about instructional design.
  4. 4. 4 How?Make it easy for developers to contribute LearningActivities that implement Rich Media andInteractivity.Make these templates easy to edit by non-technicalpersons. Better, make it easy to swap contentbetween activities.
  5. 5. 5 Easy to Edit By default, widgeds are written as jQuery plugins*. Content is declared as html. Simple html but still html. A software is also made available to edit and manage widgeds without any technical intrusion.(*) The best way to introduce jQuery plugins is show what they can do - 40+ StunningjQuery Plugins and Tutorials, 37 More Shocking jQuery Plugins
  6. 6. 6 Widged ExamplesInteractive Editor HTML put these words in <div id="a-0" the right order. class="wg-magnet"> put these words in the right order. </ div>
  7. 7. 7 ClassicsMCQ Gap FillFlash Card Categorisation
  8. 8. 8 Any interactiveRacing Game Timed Reading Pick the labelsNotes
  9. 9. 9 Why jQuery plugins?So that widgeds can be embedded in any webenvironment that can execute javascript code.Learning Activities written as jQuery plugins run onmultiple screens and devices: desktop, netbook,OLPC, iPad, NexusOne (Android smartphone).*For instance, they can be embedded in any part of awikispaces page using the "Widget > Other HTML"option. Widged demos at widgeds.wikispaces.
  10. 10. 10 Content Re-use The content is saved alongside the html, making it easier to share content or re-use it between different activities. Imagine you want to use the same exercise content to target acquisition early on (cues), consolidation mid- course (drill) and assessment at the end (no cues). With other solutions, you would have to find two learning objects covering the same content. Here, you can simply assign different interactives to the exact same content.
  11. 11. 11 Implementation Part I. widgeds • metadata • template • content example(s) ➡ html page with embedded jQuery plugin(s) Alpha release: Examples: Forking: Source:
  12. 12. 12 Implementation Part II. Exercist Web application for widged editing / management. Modular architecture. New editable widgeds can be added any time. Reached Alpha.
  13. 13. 13 Implementation Part III. Educards In the Webapp, add just in time guidance on the aspects of instructional design and interactivity design. These guidelines will be in the format of short cards. Something in between the UX trading cards, the Game Design Lenses, the Educational Practices booklets. Tentative content has been collected on a private wiki. Access available on request.
  14. 14. 14 Deliverables • 10 widgeds + exercist AIR app + data saving • Specifications on how to write widgeds so that widgeds can be contributed by the community. • All widgeds posted on for forking. • Centralized widgeds repository.
  15. 15. 15 Easily extensibleA given activity Extensions on demand Scoreboard Timer Live Chat 2/6 Rate activity Hints Share Save scores Save scores Future Req. google sheet Moodle Flickr Import Parse Items Item-Options
  16. 16. 16 Editor Roadmap Adaptive System Allow users to define a flow between activity that is function of performance on each activity. If student reached mastery on Activity 1, then present activity 2, otherwise present activity 3. This will be done with a wiring solution like wireIt or pipescape.
  17. 17. 17 Who? Lead - Marielle Lange First career as educator (PhD): grabbed an award for best educational website in 2000 - LinkedIn. Second career as Software Developer (specializing in Flex) - Portfolio.
  18. 18. 18 Credits Icons on first page: Tango Icons - http:// - GPL license. Others: Fugue icons - http:// - Creative Commons Attribution 3.0 license.