Click and drag reactions

I have managed to get the desired reaction for each ion dragged onto the flame (yay!!). It became quite difficult, as I had to specify the 'greedy' option so that the parent droppable would not receive the element. Now I can tidy it up a bit more, and have the reactions occur more than once a session.

Dragging elements

I have broken down the click and drag into three segments/ steps to help myself code it all together more easily:

1. Draggable objects
2. Reaction occurs when in contact with another object
3. Multiple reactions occur when in contact with various objects

Thus far, I have managed to get my metal ions draggable on click (yay!). I now am in the process of having reactions occur when an ion is placed on the flame... which is proving more difficult then expected. I have tried multiple methods, and none have worked thus far so I will keep working on this.

Click and drag progress

I have created the base of the colours of burning ions page, and am currently in the process of coding the click and drag technique. This alongside the accelerometer technique are the last but most complex of the techniques I set out to learn for this paper, so they may require more time. 

Animation hotspots complete!

I managed to get a successful transition between the bunsen flames through the use of the jquery animate function combined with hotspots, a click function, show and hide. I considered adding more animation within the flame, but when I tested this it ended up destroying the flow of the page as the user was distracted by too much going on (ie too many animations in different places at once). Overall the focus is the information, and that is what I will focus on maintaining.

Stars page complete! (show & hide)

Alongside the cells page, I designed a stars page for the Earth and Space science paper which exhibits the show and hide technique. Now that I have learnt how to implement show and hide, it was much easier implementing a similar method on this page.

Working out a system

I drafted a wireframe that displays the website demo I will create to showcase my resource. Keeping it simple for now, as the purpose of presentation is to showcase the skills I've learnt (ie the subject resource pages) which doesn't include the splash or homepage. Their purpose is to provide context for the sake of understanding how this resource would be implemented and source if developed further than a prototype.

 Splash page

Homepage

Animations hotspots progress

I have managed to implement the show and hide technique in conjunction with the hotspots css mapping (yay!). Now I just need to add an animation transition... In this case, with animation transitions I feel they're best implemented using jquery rather than trying to create an extra webm or gif, as that would be too large and therefore take too long to load making the overall transition less smooth.