Cooperative Game

The rapid growing range of devices that use for viewing webpages has given us a totally new way of viewing a webpage.  In this project, we demonstrate how responsive web design can be an interactive and cooperative game by adopting six individual riddles on each device. One of the advantages is that it only requires a web browser; an app or other installation is not required (e.x. Flash plugin).  Although it seems to be an immature cooperative game at the moment, the concept of how responsive web page can be made into a cooperative game is formed.

In this short essay, I would like to address the importance of playing cooperative game and how playing it can be a benefit for social changes.

 

Finite and infinite Game­s

According to LeFevre (2002), there are two main kind of games, finite or infinite .The purpose of a finite game is played to win; it has a definite starting and finish. A finite game usually resolved within the context of its rules, with a winner of the contest being declared and receiving a victory (Carse, 2011). As shown in Figure 1, the riddle hunt game can be considers as a finite game, it is played for answering 6 riddles correctly with the shortest time spent to solved all the riddles.

 

Figure 1 – Riddle Hunt Game

On the other hand, an infinite game has the idea of keep playing. There isn’t a definite starting and ending in an infinite game. It is sometimes played with the goal of inviting more players into the game. Unlike the rules in a finite game, rules need to be changed when there appears to be an ending for infinite game.

In addition, no matter what kind of game theory is adopted, finite and infinite game, depends on the rules, all have the possibility to be a cooperative game. According to Carse (2011), it is an unchanging principle of all play, finite and infinite, that no matter what kind of games a participant is playing, always can play freely.

 

Cooperative and Initiative Game­

Cooperative games stress participation, challenge and entertaining rather than beating other player. It focuses on enjoyment and communication rather than fight and isolation. The concept of such games is not innovative.  However, Some of the traditional games that people play when they were in their childhood.  There may be competition involved, but the consequence of the competition is not to lose. In its place, it may contain swapping sides so that everybody will be on the winning side.

Initiative games are exciting, cooperative, and challenging games in which the group is confronted with a specific problem to solve. There are several reasons to support initiative games. It offers the opportunity to show and educate management skills to its participants, which enhance the development of trust and problem-solving skills in groups.  Games can be use as a tool to explain a method of thinking about experiences that helps people to learn and practice.

 

Good Reason to play cooperative game

If there is a group of individuals willing to join in social change, breaking down of embarrassments is the first step before they become group mates. Some good essential qualities such as trust and communication are needed to be able to build a team that can solve the problems (Counts, 1963).

Cooperative games also help set the tone of an action.  Social change work is often hard-driven and energy-consuming.  Many groups discover that cooperative games offer kindly method to connect passionate task-oriented aims with ambitious, group-minded teambuilding.  Additionally, entertaining and games help boost social change.

Another benefit of such games is to get its participants to think together, so that individuals in the group have contributions. It is believe that when each group member has inputs they also have ownerships, and usually when more individual has ownership there tend to be more success (Counts, 1963).

It is believe that games can actually emphasize the goal of group’s purpose or even individuals daily work. Through a technique called “framing,” games become relevant and powerful tools to break down barriers, build up focus, and make your group’s process more effective and inclusive of all involved (Rohnke & Project Adventure, 2009).

It is essential to include a sense of purpose, opportunity and passion when creating a cooperative game. Without those pieces as goals, games become pacifiers for the grown, as their potential to stave off the appetite of a group that hungers for power is immense.

 

Conclusion

It can be seen that a responsive web design can be made into a cooperative game, with the benefits from playing such game, the purpose or goal of the game become a very important factor. The goal of the game is usually decided during the start of the activity. Players probably given a deep message, or the game introduced as a metaphor (Rohnke & Project Adventure, 2009). In addition, the group reflection aids participants to see how they met the goal, and to envision the broader social change implications.

 

References

Carse, J. (2011). Finite and Infinite Games: Free Press.

Counts, G.S. (1963). Education and the foundations of human freedom: University of Pittsburgh Press.

LeFevre, D.N. (2002). Best new games: Human Kinetics.

Rohnke, K., & Project Adventure, Inc. (2009). Silver Bullets: A Revised Guide to Initiative Problems, Adventure Games, Stunts, and Trust Activities: 25th Anniversary Edition: Kendall Hunt Publishing Company.

 

 

Is RWD really perfect?

In this semester, I study Responsive Web Design (RWD) and I have managed to use media query to control different styles for multi-device support. However, I began to think about two questions since the first time I knew RWD.

  1. Is RWD suitable for any types of websites? (or every website should be designed responsive?)
  2. Are there any problems brought by RWD?

 

For the question “a”, I found that RWD is not suitable for any types of websites. I classify the websites into eight types (some with examples) as followings:

All of them have different characteristics. Any companies and websites have different target user needs. So I will discuss how to choose the appropriate design solution from two aspects.

Firstly, I think if we want to make them responsive from the aspect of design complication, we just need to consider the amount of information.

We can see from the examples, web portal, company/industry information websites are all portal websites and E-commerce websites that gather information together in one site. These kinds of websites have complex navigation and layout to help users to reach the information they want. The more content we should take into account, the more error will occur when we do responsive web design. This means that websites with complex structures are not easy to design.

Second, as user-friendly is the key to the success of responsive website I will discuss from the aspect of user experience. If we want to design the website to be responsive, we should redesign it for mobile users. For example, hide unnecessary design, change the display style for the navigation bar, and change the layout of the content. These changes will cause the change of users’ operation. The responsive design has no meaning for us if these changes are designed bad and bring users a negative impact. So whether the website should be made responsive, we must evaluate our team first. We must make sure whether we have ability to understand our users and know their habit accurately.

 

For the question “b”, I found many problems brought by RWD when I wrote the code for our group work.

Problem 1. Data redundancy

It is obvious that we need to write more codes than before because we should redesign the website for different devices. I found this problem when I wrote media query for iPhone5 below the media query for iPhone4. When I tested, I found that the code in media query for iPhone4 still have impact on the display of iPhone5. That means iPhone5 need to download all the code until it read the media query for itself (see Appendix). The data size of the code is not big enough to cause my attention to consider this problem. But for images, it is a big problem. When we make the website responsive, we always set the images non-viewable for mobile devices. However, the mobile devices still download the images. The traditional design (apply another css style for mobile devices) will not have this problem.

Problem 2. Testing

Opera Mobile (www.opera.com/) is a good browser for testing the code but it still cannot truly simulate a mobile phone. Because it can only read width and height in media query but cannot know the accurate devices that the media query refers to.  There is no browser supported to test the code so I must borrow many kinds of devices from my friends and then test and debug the code on them. The time I spend on the debugging may equal to the time I write another style for each device.

Solution:

There are a few online sites available on the Internet which provide facilities to check the various functionality of the sites with RWD. Designers can make use of these sites to view the appearance and other aspects of their sites. It is worth mentioning that there are a few companies available these days which help the designers to have a look at their sites on rental basis. The designers are only required to visit the outlets of these companies and avail the facilities just by paying for it. (Themes4CMS, 2013)

 

Problem 3. Code order.

I found that media query is not so smart as I imagined. In this project, I spend a lot of time on the order of media queries. At the beginning, I did not know that we should to write media query according to the order from narrow to wide width. After Amy told us this rule, it can mostly work well. But it still have little problem. I must put the media query for iPad mini below that for the new iPad or it cannot display well. I still don’t know why.

 

I also research online about the problems of RWD and find that there are more that are really worth to consider although I did not occur in my project (WebDesignShock, 2012). Responsive web design is not perfect due to two reasons I have discussed above.

 

 

References:

Theme4CMS (2013), Common Responsive Web Design Problems

www.themes4cms.com/blog/common-responsive-web-design-problems/ [Accessed on 22 April, 2013]

 

WebDesignShock (2012), 11 Reasons Why Responsive Design Isn’t That Cool! www.webdesignshock.com/responsive-design-problems/ [Accessed on 22 April, 2013]

 

 

 

 

 

 

Appendix

/*show block1 for iphone 4 and iphone 4s*/

@media only screen and (device-width: 320px) and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

#block1 {

display: block;

background-color: #f7edd4;

height: 600px; width: 100%;

margin-top: -70px; }

}

/*show block1 for iphone 5 */ /*hide the block1 because we have let it display in the media query for iphone 4 above*/

@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {

#block1 { display: none; } /*important*/

}

 

Submission 2

Initial Planning, Conception and Justification of Decisions

We began our second submission with the mark from submission one clearly in our memories. Due to the fact that feedback stated “the deepest understanding…can only really come from experimenting with code,” we made sure our second submission was code intensive.

We decided that the best way to show device specific nature of responsive design would be a device-specific interactive game. We envisioned a puzzle-like riddle that allows a community of mobile gadgets to solve it. We wanted to create a non-linear set of problems that could only be solved from start to finish with a multitude of devices.

We met and developed a plan for the project. We decided that 6 different media queries/device ranges would be optimal, due to the fact that users’ attention and ability may vary. We aimed to keep them interested.

 

The Design Process including Early User Testing

From the beginning, a six-block web page structure was developed. Each block represents a different media queries’ range of devices based on the device-height or device-width property.

We began with a list of potential devices ranges in which to focus. We chose some of the most readily available and most used devices on the market. Various iOS and Android devices and common laptop and desktop sizes were used to allow for the highest number of participants.

From here, each group member chose a particular device range for riddle development. Due to our specific ranges and potential devices, specific riddles and mini games were developed using CSS and JavaScript. Each of us were required to research the individual capabilities.

A very simple example would be: large image-based riddles would not be used as riddles on smaller screened devices & and touch-based games would not be developed for a laptop.

From there, the page was developed in block form. Six blocks were created on top of each other via HTML/CSS. Each block was connected to a media query with a specific range of device sizes.

When a device from a specific range opens our website (located at www.riddlehunt.com), a specific block and riddle is displayed. Upon successful completion of the riddle by entering the team number, answer and clicking ‘submit’, the user continues on to another device until all six riddles have been completed.

LAUNCH AND PRESENTATION

The presentation of the project was an event open to all students and friends to join a friendly ‘Riddle Hunt’. As it took place just after Easter we decided to give out chocolate Easter eggs to the first ten successful hunters. People that joined the event could participate as a group or individuals, and sharing their devices was something we were hoping for, as we initially thought that this hunt could be used in a social manner of bringing people together. People that came to the launch were very enthusiastic and happy to participate, and their encouragement was enhanced by the chocolate threats as rewards. While playing students from different majors worked in groups or exchanged answers and hints with other participants, which we thought of as a great success.

Since only the first ten participants were rewarded, we decided to place a results page on a big screen that would automatically update the current position of each player/s. This also served as a way for the ‘hunters’ to see if they have answered correctly a question and how many they have left till the hunt is over and they can claim their reward. This brought up the competitive side of the game when players could see not only their own progress, but also the one of other participants. While launching ‘Riddle Hunt’ and looking at the results page in action we discovered an interesting component of the game, which we haven’t thought of before. While participants would need to enter the same team name each time they answered a question in order for the system to recognize them and add their correct answers, they could also quickly change the answer of a particular question of another participant, in order to surpass them and be successful. We thought that is a great way to bring out the competitiveness in players and decided not to change the results system after the initial presentation.

Overall we consider the presentation as a successful one, with more that 4 participants winning a price and indicating that they have enjoyed themselves. Players not only played a game as individuals, but they also socialized between teams, and at the end even shared the rewards they won.

Post-presentation work

After the presentation we had an immediate meeting as group to discuss its outcomes, reflect on the responses we had and the technology issues we’ve encountered during the launch.

We decided to adjust and fix some of the problem that participants in the presentation brought to our attention.

The work was divided as follows:

One of our biggest focus points was the results page. Although the alpha form that was projected on a screen during the presentation was designed to match the Easter theme of the rewards, it proved to be less efficient in effectively showing to participant their progress. Therefore we decided that it needed to be the first improvement and change the way that players view their answers (a correct answer lights up in green, rather than the incorrect’s red). Another problem was that the results page design was not linked to that of the ‘Riddle Hunt’ posters, flyers and overall was lacking as part of the brand. By the time of the second submission the entire mentioned problem was fixed, and design was adjusted to the one of the posters.

While presenting the game we discovered that after an answer is submitted the answer box isn’t cleared, which could give an opportunity for players sharing devices to use one another’s answers. The beta submission of the web page would have the problem fixed, alongside with two of the riddles, which proved to be difficult for the players and/or being presented in an unclear manner.

Testing Procedures and Outcomes

There have been multiple iterations of our project due to development issues with our code. Procedurally, each time our code was changed we tested the functionality on as many applicable devices as possible. Our initial outcome was a lack of exclusions on our media query leading to the entirety of our blocks being displayed on devices outside of our queries.

We remedied this by a more comprehensive approach of restructuring our media queries. Making sure that our device ranges were listed in ascending order and that there were no gaps between devices was the key to our further development. By the time of our presentation, much of our desired functionality was working. Feedback was taken and used to do some major revisions to our project.

 

Clear Description of Who Did What

Will

  • Initial concept including general design and structuring
  • Individual riddle creation and coding
  • Code troubleshooting (with Amy’s assistance)
  • Group organization
  • Group assessment outline

Kristin

  • Individual riddle creation and coding
  • Recording of the presentation
  • Writing of the second submission group write-up
  • Role as a presenter and guide to participants during the presentation

Serena

  • Individual riddle creation
  • Design and coding of the entire alpha page and fitting together the individual riddles and media queries
  • Post-presentation adjust of the main page to refresh and clean answers after submission
  • Code troubleshooting

Jacky

  • Individual riddle creation and coding
  • Group organization
  • Revision and help with coding during the alpha stage
  • Post-presentation improvement of the ‘Spot the difference’ riddle
  • Purchase and move of  the page to a unique .com domain

Findo

  • Individual riddle creation
  • Organization of the presentation event – rewards
  • Group organization
  • Creating of custom flyers and posters for the presentation events
  • Post-presentation adjustment and coding of the results page to show colours according to correctness of answers

Ming

  • Individual riddle creation
  • Creation and coding of the alpha results page
  • Post-presentation further development of the results page
  • Organization of the presentation event – awards
  • Printing posters and decoration of Atrium on the presentation day

Appendix

Additional photos from the presentation

 

Parallax Scrolling

Parallax Scrolling

 

Introduction  

In recent years, the word “Parallax Scrolling” becomes increasingly more popular in the web design, and has gradually become a trend of web design. (King D., 2013) This amazing visual effect first appeared in Nike Better World in 2011, and since then widely in use.  (Joe, 2011) It is usually a long web page, in a storytelling way, to show a complex process to users and allowing users to feel as if they are in it, rather than the monotonously dull design. It uses some stunning illustrations and graphics, and use parallax scrolling effect by moving multi-layer at different speeds, to form a 3D motion effects, bring pretty good visual experience.

In this essay, I will discuss the concepts and features of parallax scrolling effect firstly, and then talk about the long page website, which is related closely to the parallax scrolling effect. After that, there will be several examples of gorgeous parallax scrolling websites. At last but not least, it will state some tips about building a parallax-scrolling web.

Concepts and Features

There are no exactly definitions of Parallax Scrolling. So, according to experience of several parallax scrolling website, the concept and features can be summarized as following.

The “parallax scrolling” effect about refers to a multilayer background moving at different speeds, forming the 3D motion effect, in order to bring a great visual experience.

Based on personal experience, I think it has several distinctive features.

First of all, it usually applies to a single web page. Secondly, to form a parallax scrolling effect, it needs that setting those elements on the page hierarchically to make them scroll independently. Besides, parallax-scrolling web contains both vertical scrolling and horizontal scrolling. In addition, parallax-scrolling web always has long webpage.

Parallax Scrolling and Scrolling Long Page

In submission 2, our entire webpage was designed into such a parallax scrolling effect, but in my opinion, to be honest and strict, I personally think that our website cannot be regarded as parallax scrolling page – although it was designed in accordance with the principle of parallax scrolling, but it did not show a parallax scrolling effect as setting different scrolling speed for different layers. However, it did achieve the effect and principles of scrolling long page, which is still classified as parallax scrolling website technically.

Take Kentisbury Grange and The World’s Highest Website for example:

Source: www.kentisburygrange.co.uk/

 

Source: worlds-highest-website.com/

About the reason why use long page, Tunde Corkshott (2012) explained that it is related to “aspects of user psychology and behavioral economics”. Users need automotive site, with the constraint of retaining the existing visual design and the reuse of existing content. (Corkshott T., 2012) Human’s foraging and anchoring behaviors can explain it. Website designers and users always have different perspectives when they acquire information from the website. Designers do know available information in it, while unfortunately users often get information from illogical way in designers’ sight, and they easily miss sections or cannot find helpful tools and functions to guide them. The reason is that they do not explore more, but only get information within few areas they are familiar with; even other aspects have better sources or more available tools. This behavior is similar to “hunter-gatherer tribes or foraging animals” – regarding information as nourishment they need. Users require to know “where they are, what they can achieve, and there are other options available on the site that will meet their needs”. (Corkshott T., 2012)

Furthermore, parallax-scrolling page mixes emotional and rational content together, rather than traditional way – set emotional content, images, or video galleries and then give access to the details. It simplifies the navigation and provides a more interactive user interface. (Corkshott T., 2012)

10 Examples

Here I would like to show some excellent examples of parallax-scrolling web.

1. iutopi

Source: www.iutopi.com/

2. Bowtie

Source: bowtieperiod.com/

 

3. These are things

Source: www.thesearethings.com/

4. Parallax Scrolling Tutorial – Smashing Magazine

Source: richardshepherd.com/smashing/parallax/background.html

 

5. Lost World’s Fairs

Source: lostworldsfairs.com/atlantis/

6. Ben the bodyguard

Source: benthebodyguard.com/index.php

 

7. Paramount Farms

Source: paramountfarms.com/#processing

 

8.Kinetic V5

Source: www.kinetic.com.sg/main.html

9. Like There is no Tomorrow

Source: www.like-there-is-no-tomorrow.com/

10. Hexaedro

Source: www.hexaedro.eu/#index.php?locale=pt_PT

 

Tips for Building Parallax Scrolling Website

As long page website becoming a fad, digital specialists give up some tips for designers.

Firstly, Make it responsive or at least mobile friendly. Parallax scrolling web design becomes more and more mature, but it still cannot be used widely on mobile devices. People use mobile to connect the Internet very often currently, mobile web usage also became a trend, so that it should be considered to broad the utilization of parallax scrolling on mobile devices. Secondly, make it fun. Thanks to the storytelling style, parallax scrolling often brings users some entertainments by take users on a journey through a timeline or story.  Thirdly, add layering and depth. It is important to clarify the different layers, which need different speeds. “The art of parallax is about creating an illusion of depth. Remember to experiment and not to give up” (Chan J, 2013). Fourthly, do not forget pre-loading assets. Parallax scrolling websites tend to involve pretty heavy utilization of imagery and multimedia assets. (Chan J, 2013)

Conclusion

I started to get engaged in web design since this school year. During the Christmas holiday, I learned and discussed web design together with my friends and got to know about this kind of website formwork. I am attracted by its unique design of the UI experience and fresh style. This creative web design effect gives a smooth and gorgeous animation shock to large extent, making users indulge in the wonderful operation design and impress by the designer’s inspiration of construction.

Parallax scrolling web design becomes more and more popular. Its design and implementation both needs to be deeply researched and practiced a lot for me.

 

Reference

Joe (2011), Experiments with Scrolling Effects since Nike “Better World”, Design. Available at www.publicreative.com/blog/design-2/2011/07/experiments-with-scrolling-effects-since-nike-better-world/

Cockshott T. (2012), Why the Long Page? Tech-the week in technology.net Available at: www.netmagazine.com/opinions/why-long-page

King D. (2013) 15 Web Design Trends for 2013. Slideshare.  Available at: www.slideshare.net/davidleeking/15-web-design-trends-for-2013

Chan J. (2013) Build a Parallax Scrolling Website: 10 Pro Tips. Available at: www.creativebloq.com/web-design/parallax-4132336

How does our project affect Social Communication

There is no standardized definition of Social Communication online but as far as my understanding, Social Communication is about talking to the people around you no matter who they are or what they do. However, there are natural barriers in terms of Social Communication in many aspects. They are physical barriers, psychological barriers and linguistic barriers, etc. (Michael K. Swan, 2009). Moreover, with the development of Internet Technology some people are getting more and more independent and isolated since they can see the whole world by just simply viewing news pages on a tiny laptop. “It has been suggested that shy and socially isolated individuals communicate more on the Internet because it provides some protection from social anxiety.” (Sarah A. Birnie, 2006) Thus, to some extent, letting people become familiar with each other via Internet is no longer an easy task.

 

At first stage our group was only focusing on the technologies used on Responsive Web Design since the term RWD was originally brought out by Ethan Marcotte for more convenient use of web pages when displaying on different devices. (Ethan Marcotte, 2011) However his intention was all about removing a wall between laptop and mobile when users view a website on them. The navigation panel may appear differently according to the size of the browser, which can be recognized as the size of the device as well. The video shows on the website may shows at a different position when viewing this page on another device. Users are typing in a same URL but the whole pages shows differently on assorted devices.

In order to dig something new from RWD and challenge the original intention when inventing this term, after our team’s brain storm a creative idea came out. Other than showing the whole page on various devices which is a way that traditional RWD would do, we focused on one aspect which is media-query to build our website. Moreover, we designed a game related to our site for people to play. Our responsive web consists of six different parts of puzzles and each puzzle could only be showed on one specific device such as iphone, ipad or mac, etc. People who play this game need to guess what device she/he may need to find the puzzle and answer it. However, if we do it this way, there would be a problem for people to find devices since there are so many kinds of devices and it is impossible for one person to hold them all. So teamwork is all needed. “Teamwork is the coming together of an alliance or group of minds to collaborate, co-operatively work on a project, solve problems, negotiate, resolve conflict etc.” (Lovemyaj, 2008) Just like we do this project by six people of different races, colors and we are from four countries in the world. Teamwork is essential to us and besides teamwork, nothing can be more important than communication. “One key element to successful teamwork is communication and communication is what bridges teams together”. (Lovemyaj, 2008) Due to media-query, we are able to control the display of every puzzle by defining which puzzle could appear under a certain resolution and other puzzles would display none. If they open our website on a device that is not on our design list, they would see hints for them to try other devices. Our big prize goes to the person or team who find all the puzzles and answer them correctly.

 

On the day we presented our project, teachers came and some of our friends came as well. They formed teams by themselves and competed with each other.  As far as I know, two of my friends formed a team but they didn’t know each other before that day. Even though their team didn’t win the big prize, they got to know each other through playing this game. To find the right device for displaying the puzzles, they cooperated with each other and communicated in order to exchange thoughts together. One of them is my classmate and the other is from Sound Design. Although we attend courses in the same building and even have a same course this semester the two lovely guys don’t know each other. I am satisfied to see one of my friends becomes friend of another friend of mine through this project. The friend from Sound Design is talented in Music and instruments while the other is an excellent guy who is capable of writing any codes and a man of creativeness. There is a high possibility that these two people work together in other area to create something new and exciting since they are friends now. No one can deny the potential power of social communication resulted from our project. There is another way to expand the value of social communication from our project according to Prof. Martin’s suggestion. We could present this project in a way that people gather here with the purpose of finding a date. Moreover, this game could be brought as a game for icebreaking at the beginning of each academic year.

There is another aspect I would like to mention here about the communication between website and people. It would be a disaster when a puzzle is explained in a vague way. When designing my puzzle I made a mistake that I forgot to put “”diagonal“ after “horizontal” and “vertical” for people to guess how many words there are in total. This critical mistake had made people entered wrong answers.

So, the importance of communication both among people who play our games and between website and people who viewing it cannot be more obvious.  “Only with communication will the project beneficiaries become the principal actors to make development programmes successful.” (Jacques Diouf, 2000) It is a big breakthrough for us to change the traditional routine of designing a responsive web and challenge media-query to make our presentation to be a way of enhancing the social communication among people.

 

References:

Michael K. Swan. (2009). Barriers to Communication. FACTSHEET.

Sarah A. Birnie. (2006). Psychological Predictors of Internet Social Communication. Journal of Computer-Mediated Communication. 7 (1), 0.

Ethan Marcotte (2011). RESPONSIVE WEB DESIGN. New York: Jeffrey Zeldman. 1,74, 128.

Jacques Diouf. (2000). COMMUNICATION a key to human development.Available: www.fao.org/docrep/t1815e/t1815e01.htm. Last accessed 24th Apr 2013.

Lovemyaj. (2008). How Does Communication Affect Teamwork.Available: www.studymode.com/essays/Does-Communication-Affect-Teamwork-160300.html. Last accessed 24th Apr 2013.

Cooperation vs. Competition

Cooperation is a tenet of our society. It is the underpinning of civilization and the difference between the modern world and antiquity. Grouping of individuals holds cultures together. It is this instinct that enables the populous to thrive, keep food on the table and survive. It is human nature. We want to be on a team.

Conversely, human kind is also fiercely competitive. A basic desire to be the best – and a need for the less capable or skilled individuals to fail is even present subliminally; natural selection is a striking example. It is also human nature. We want to win.

It is the point of intersection between these two evolutionary necessities that I find most interesting.

I believe the best way to highlight these traits is through a cooperative game or puzzle. It is this idea that served as the platform for the responsive web design project.

A combination of human nature and digital technology enabled the development of a skills-based game that showcased the power of media queries’ device-specific content and cooperative-competition (if such a thing exists).

From the very beginning, the development hinged on the fact that most, if not all, of the users would not own every device needed to complete the puzzle from start to finish. The observation of how a game requiring the use of multiple devices was played by a group of participants was an experiment not only in technology, but also of psychology.

It was difficult to predict how participants would behave prior to the game.

In an article from the Quarterly Journal of Economics in 1999 discusses the balance between cooperation and competition in not just an economic sense.

“Some pieces of evidence suggest that many people are driven by fairness considerations, other pieces indicate that virtually all people behave as if completely selfish, and still other types of evidence suggest that cooperation motives are crucial.” (Fehr, E. & Schmidt, K. The Quarterly Journal of Economics (1999) 114 (3): 818.)

This statement rang true was in our project, as some participants chose to compete, others to cheat, some to cooperate and many chose to be fair and share. The amount of competition was especially interesting to note, given the fact that the only prize winnings were chocolate eggs.

Since the point was to complete the game in the shortest time possible, participants hurriedly solved the first puzzle. This is when it got interesting. The first puzzle completed by most people was on an iPhone or iPad; two devices that many brought with them.

This meant that sharing was not required. There was a competitive, urgent rush onward – until it was made clear that the use of some uncommon devices was also needed. Some groups were unaware that a communal effort was required while still maintaining the rivalry of individuals. This provided a point of contention for some players. If devices were shared – others would have the ability to catch up. If they weren’t shared – others would be stuck, but there would be the very distinct possibility that no one would be able to complete the entire game.

In addition, devices were snatched and teams ran off to complete a particular puzzle away from the rest of the participants (as to prevent overhearing the correct answer). This tactic was quickly derailed when it was discovered that some devices did not clear the answers after the ‘submit’ button was pressed; thus leaving a hint (or sometimes more) for the next group to use the device. Frustration was a common denominator for many.

An aspect of the sharing/competition quandary found in this experimental project that was not anticipated was the prevalence of cheating (or ‘alternative completion methods’ – for lack of a better term). Some players late in the evening found that the Opera browser’s device emulator allowed for a one-device solution for most of the puzzles. Through desktop-based emulation of many of the devices used for the game, the need for sharing was removed altogether. This was not only a quick way to solve the puzzles, but a sly one – and not something that was thought to be a problem during the development stage of the project. The Opera emulator’s functionality on our site has since been removed.

Another important point of contention for many players has to do with score security. Solutions to puzzles are entered through ‘team name’ and ‘solution’ input boxes. The ‘team name/number’, if entered exactly the same way on every puzzle, shows up on the results page as a single entry with each puzzle completed, an indication of the correct or incorrect answer and the time elapsed. It was quickly determined that any team on any device could re-enter a name/number with an incorrect answer to remove a previous team’s correct answer. This form of sabotage was quietly executed throughout the game and resulted in some upset teams. Also, if a team did not pay attention to exactly how their name/number were entered in the input field, a duplicate entry was created on the results page and a new timer was started.

Overall, the human interaction with our project showed that a fine line between competition and cooperation exists. People tended to not share unless absolutely necessary and many will go to great lengths to win, even if that includes bending the rules. I, for one, did not think that a small group’s studio project would allow for such a psychological observation or elicit such a competitive response from participants.

Revisions

By 18 April 00:00 GMT

1. Empty answer box when page is refreshed – Serena

2. Re-style results page (make pretty, colour indication) – Findo, Ming

3. Improve riddles
-Spot the Difference – Will and Jacky
-Words/Letters (Better instructions) – Findo

4. Write Up
-Until Now – Will (+Serena for Code)
-Finish – Christin

Project Overview

Our group was determined to use responsive techniques and media queries to produce an entertaining, engaging project. The Alpha Submission showcased our understanding of the techniques involved – but lacked an outside of the box approach. We decided to create a riddle-based problem-solving project that requires media queries and device-specific problem solving to complete a riddle. This system allows users to connect mind and device together; through a plethora of devices and the use of logic. Our project provides an understanding of the differing device specific code that is used around the web and how content is displayed differently of various devices.

Our concept was first defined during a brainstorming meeting. We knew that an interactive presentation would be best – as it would involve members of our group, our program, and the public. We find that responsive and device-specific design and web pages are best understood through first-hand usage.

We began with a chalkboard sketch of the general format for the page. A decision was made that through the use of a beginning riddle – users will make their way to the end of the task by coming up with solutions for puzzles that lead from one device to another. Through this inter-device navigation – only some devices will display particular steps in the task. Therefore, users will find out the similarities and differences between browser types, screen resolutions and what particular technologies are displayed by individual devices.

For instance, a clue within the riddle may be viewable on an iOS device, but only those with a screen resolution less than an iPad Mini. These devices include the iPhone 5, 4S, 4 and 3GS. A different clue may be accounted for by the use of a full-size iPad, for instance. Some clues may only be visible on Android tablets – as many of them share screen resolution. In addition, some clues may be found through the use of browsers that support webkit, but not through others. A sample resolution chart was constructed.

Since many devices share resolutions and browser capabilities, there will be some overlap on devices that display the clues. One common denominator in the entire puzzle is the database integration that will require users to enter the correct answer to the riddle in order to move on. A running scoreboard will be on display during the puzzle to see which groups are in the lead.

We hope that this project will aid in the understanding of media queries, how they are constructed, and how different content may appear on different screens – or perhaps not at all. This project has been very much a group effort. Each of us took on our own task, or two – and many aspects of the project including coding were undertaken by us all individually and combined for the final site.

Meeting minutes 13th March

Minutes from the lst meeting :

Serena did an amazing job on the web page. We decided each to take a group of devices based on a pixel graphic. So here is the list :

Chris- Iphone 4 and 4S

Will -iphone 5

Jacky – Nexus 7

Findo – New ipad

Serena- iMac

Ming – ipad 2 & mini ipad

When everyone is finished with their riddles and coding for their section they should paste it here.