Wrap it all together!

After conducting research into app prototyping and business conferences, I found the application KioskPro. KioskPro is designed for displaying html web files locally. Basically, exactly what I need and a lot less hassle then trying to host my resource as a webpage.

It took me a while to understand and adapt to the KioskPro setup, but I have mastered it now. I feel prototyping it on my iPad for the class presentation would be really good practice for major project.

Accelerometer COMPLETE!!!

I have finally managed to get Rhizo moving smoothly accross the y axis smoothly! Now all I need to do is research the best way to wrap all these pages together, and create a working prototype on my iPad.

Accelerometer progress

More progress! I've managed to get Rhizo moving backwards now, however it is quite a stiff transition.. He moves in response to the orientation of the ipad, rather than the degree of angle it is being held. My next step is to get him moving more smoothly and accurately!

Accelerometer development

I have managed to tap into the iPad sensors and have Rhizo move in response to the tablet tilting, however he only moves forwards... I will continue to work on it, so that he can move backwards too, otherwise it won't be a very entertaining or fun page.

Accelerometer experimentation

Been playing around with some accelerometer tests. It seems that displaying my pages landscape is going to make this more difficult, as majority of accelerometer examples work for portrait orientation and not landscape...

Photosynthesis decision...

I had to make a tricky decision regarding my photosynthesis page. I managed to export the sunflower videos to a high quality, however the loading time for the webpage once converted to webm skyrocketed. In the end, I feel that having a nice design and smooth transition is more important than over emphasizing the change in the flower. The focus is on the cells anyway, so I altered their fading slightly during the transition so they would appear first. Overall it is a shame, but I am confident that using the css animations rather than a large video is fine.

Click and drag fully complete!

I managed to get the click and drag fully functioning on mobile devices! Now I can focus the next couple off weeks on tapping into the iPads accelerometer and wrapping it all together to display on my tablet.

Click and drag almost complete

I managed to get all the reactions working regardless of the previous reaction. Now this page is almost completed, as I have to code it slightly differently to for it to work on a mobile tablet device. Getting closer though! Once this is complete, I can begin the accelerometer page then focus on adding sound and wrap it together for class presentation.

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.

Animation skill achieved!

I have managed to develop a successful working progress for creating and implementing animated elements throughout my pages. Through trial and error with css tweening and after effects experimentation, I have found the best way for me to create a nice looking and working animation is by creating it in after effects, then exporting it as a webm or gif file for web.

This page is an example of a contents page for a topic (in this case the physics topic of motion), where not much interaction is needed as its purpose is to outline what will be taught. Subtle animation is good to incorporate into pages like these, as it still provides dynamism engaging the viewer. 

Animation hotspots progress

I have begun my third page, and thus far have coded the elements of the page in place and created the animations for it. Now I need to create an on click hotspot for it using css mapping and javascript.

Swipe animation - embedded videos

I created the sunflower animations into webm videos to play on swipe, instead of my original css animations. I feel it's almost there, I'm unsure if the video output quality can be improved and if I can make the black rectangle to stop appearing on swipe. Overall, it does make the animation a lot smoother and a more pleasing experience for the viewer.

Show and hide complete!

I managed to finish my first page, implementing show and hide through javascript. In the end, I found the most successful and reliable method was through assigning mapped hotspots to a flattened image, and using javascript to make the labels appear and disappear when other maps are clicked. 

Desired skills I want to learn

I decided to take a step back, and just review the skills I want to learn for this paper and prioritise them. Some will be more difficult than others, so I have listed which techniques will be hard, medium or easy for me to learn. This way I can plan more time for the harder techniques.

I also prioritized my pages. In my brief I stated that my desired outcome would be 3-6 pages completed, so it makes sense that I order them based on skills id like to learn/ would benefit me most for major project.

Swipe animation progress

Managed to get the swipe animation working for my photosynthesis page, however I feel the animation just isn't very fluid... So I think I will experiment with creating a video, and embedding that rather than using basic css animations as they are quite limiting.

Experimenting with swipe animation

Although you cant see the mouse in this video, I have started creating animation reactions through the user swiping accross the screen. Thus far I have the setting and cells changing on swipe, but now I have decided to animate the flower seperately as I think it would have a nicer flow and create a more engaging experience for the user.

More illustrations

A couple pages I designed for the chemical reactions paper-

And the interactive aspects they will hold-

Chemistry

I decided to create a page for the subject chemistry, as I feel chemistry focuses on equations and chemical reactions which can't be implemented in a classroom environment. So why not make it possible to mix and experiment on a tablet.

Again, I followed my established design process of choosing a paper, taking notes, having them checked, and designing pages noting the interactive features and colours.

I also feel this is a good opportunity to learn how to code a reaction change action which causes an image to change if a certain action is completed.

Time to de-stress

Every now and then I take on other tasks and hobbies to de-stress myself from university. One thing I love to do is make toys, and I decided to challenge myself by making toys out of socks. I made a couple this week, that resemble Dr Bean and Rhizo to rekindle my excitement about this project :)

Show and hide testing

I managed to get my show and hide javascript working to display the labels of the parts of the cells as desired. However, at the moment (as it is a testing phase) I have used basic circle hotspots on each element, which i'll need to change as most the parts of the cell aren't perfect cirlcles. 

Also after completing this, I decided it would be nicer if only one label was visible at a time, so I will use javascript to display just one label and hide any others that are currently visible.

Interactions for each page

As part of my planning, I quickly noted exactly what techniques I will be implementing with each page. This will give me a clear guideline to follow, and prevent me from getting carried away with adding too many interactive elements to each page.

More pages

These are the my illustrations for the Physics and Earth and Space science papers.

And the storyboard roughs to indicate the interactive elements of each page.

List of interactive features

I have put together a list of the typical interactions I want to have on pages throughout my interactive textbook. After doing research, I found that simple and more subtle interactive features would best suit my book, which serve a particular purpose/support what's being explained. It seems there have been a lot of issues and problems where people using educational apps or ebooks aren't learning as much as they should or the right things in fact, because the image or interaction provided is just there for the sake of something being there regardless of whether its relevant to whats being explained. Therefore, I want to put careful thought in the way I include interactive elements to each page to ensure its relevant and helps them remember crucial information as much as possible.

On another note, I also have decided to start looking into using phonegap alongside my javascript and jquery, to assist my interactive features. I know that phonegap will offer me features such as tilting and shaking that the other listed programs cant.

Here is a list of interactions that html 5, JavaScript, jquery and phonegap will offer me:

• Show and hide (press an image and detailed information/ names appear)
• Animation (when page is opened or when prompted by click)
• Swiping (swiping across the screen to change an image)
• Click and drag (move an image by dragging it across the screen)
• Videos (embed a video which opens when prompted)
• Tilting and shaking (images move with the tablet when the tablet is tilted or a reaction occurs when shaken)
• Sound (embed controlled sound that automatically plays when a page is opened)

Other science subjects

I have decided to create pages for other science subjects NCEA offers in levels 1, 2 and 3 in order to showcase how malleable my solution is. I went through all the science papers NCEA offers, and picked out Physics (AS91171) and Earth and Space science (AS91192) to do a couple of pages for.

Again, I invited my sister Emma around who is a scientist, and we deconstructed the criteria and she re-interpreted it in a way I would understand. From there as usual, I planned out the interactions, layouts and character positions for each page.

A bit of research

I decided to do some research into the digital technologies used in throughout  New Zealand education, and whether images are more memorable than written words.

• Every New Zealand classroom will soon have access to digital devices - opening up huge learning opportunities, but also a risk of another "digital divide".
• Government investment in ultrafast broadband and technology, combined with the falling prices of devices, has already transformed many classrooms. But those involved in education warn a similar investment is needed to ensure such technology is used properly.
• Professor Stuart McNaughton, of the School of Curriculum and Pedagogy at the University of Auckland, said increased access was positive, but came with risks. "Just providing laptops or digital devices, in and of themselves, will not necessarily produce more effective learning."A laptop, a digital device, can be used like an abacus or a piece of paper - it's just a tool. And if it's not used in a way that capitalises on what it offers, then it's sort of irrelevant, almost."
• NZ Principals' Federation president Phil Harding said the challenge was how to teach a kind of "new literacy" to children.
  "We have got to look beyond simple things that any kid could do at home without any support from an adult, and find ways to channel and challenge children's problem-solving, thinking skills.
  
  http://www.nzherald.co.nz/nz/news/article.cfm?c_id=1&objectid=11147201
  
• Recent research by Paul W. Foos and Paula Goolkasian is beginning to shed light on the difference between memory for pictures and words. They had previously found that while short-term memory for simple line drawings was superior to memory for printed words, the advantage disappeared when the word was spoken.
• One second after the task was displayed on a computer screen, the word they were required to remember was presented. After viewers saw six problems together with the corresponding words — either pictures, spoken, or printed — they were asked to recall as many of the words as possible. The experiment was repeated until the list of 54 words (simple nouns like “baby,” “whale,” and “handcuffs”) had each been used in picture, spoken, and print form. Here are the results:
• 
• As expected, pictures and spoken words were recalled more accurately than printed words, and the more difficult distractor task impaired memory in every case. Pictures were correctly recalled about 1.5 times as often as printed words.
  
  http://scienceblogs.com/cognitivedaily/2006/10/25/actually-a-picture-is-worth-15-1/ 

Page tests

Here are a couple of pages I have illustrated about cells.

These are some storyboard roughs I did to indicate the interactive elements of each page: