From 4f6d756d9ea953e7ba3984cfd99ddd79ccf5902b Mon Sep 17 00:00:00 2001 From: Michael Oneppo Date: Wed, 1 Oct 2014 18:31:34 -0400 Subject: [PATCH 1/2] Guiding the user through god mode key entry --- README.md | 25 ++++++++----------- doom.jpg | Bin 0 -> 114904 bytes index.html | 12 +++++++-- key-d.jpg | Bin 0 -> 6974 bytes key-d.png | Bin 0 -> 6733 bytes key-i.jpg | Bin 0 -> 6805 bytes key-i.png | Bin 0 -> 6318 bytes key-q.jpg | Bin 0 -> 6996 bytes key-q.png | Bin 0 -> 6584 bytes main.css | 33 +++++++++++++++++++++++++ package.json | 2 +- scripts/iconomation.js | 51 +++++++++++++++++++++++++++++++++++++++ scripts/jquery-ui.min.js | 6 +++++ 13 files changed, 111 insertions(+), 18 deletions(-) create mode 100644 doom.jpg create mode 100644 key-d.jpg create mode 100644 key-d.png create mode 100644 key-i.jpg create mode 100644 key-i.png create mode 100644 key-q.jpg create mode 100644 key-q.png create mode 100644 main.css create mode 100644 scripts/iconomation.js create mode 100755 scripts/jquery-ui.min.js diff --git a/README.md b/README.md index d40eb2f..6ccf4b0 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,13 @@ -# "React" Assignment +# Iconomation Assignment -Create a learning resource that gives the user feedback – in other words, responds to the user's input/actions. Actions could include: +Create an animation that walks the viewer through some process, using only icons/emoticons/emoji. See http://bfl-itp.github.io/iconomation/ for a demo. Even without knowing *any* JavaScript, the code in [`index.html`](index.html) and [`scripts/iconomation.js`](scripts/iconomation.js) should be enough to get you started. What's included on the page: -* Clicking -* Typing -* Scrolling +* [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout) +* [jQuery](http://jquery.com/) – see these docs in particular: + * [`.animate()`](http://api.jquery.com/animate/) + * [`.css()`](http://api.jquery.com/css/) + * [Easing functions](http://jqueryui.com/easing/) +* [Font Awesome](http://fortawesome.github.io/Font-Awesome/) +* [Emoji CSS](http://afeld.github.io/emoji-css/) -or lack of any of those things. Feel free to pick a new subject, or dive deeper with one you've already used. - -## Examples - -1. [Operation](http://en.wikipedia.org/wiki/Operation_(game)), which uses sound to inform the player they are doing something wrong. - - [![Operation](http://img.youtube.com/vi/_6MAkLJ79LE/0.jpg)](http://www.youtube.com/watch?v=_6MAkLJ79LE) - -1. An essay helper, where the user needs the their entry in a [`