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, 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.


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


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


  • 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


  • 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


  • 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


  • 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


  • 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


Additional photos from the presentation


One thought on “Submission 2

  1. Source code for index.

    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

    ga(‘create’, ‘UA-39796148-1’, ‘’);
    ga(‘send’, ‘pageview’);

    var questionID = jQuery(this).parent().parent().attr(“questionID”);
    var answer = jQuery(this).parent().parent().find(“input[name=’answer’]”).val();
    var teamno = jQuery(this).parent().parent().find(“input[name=’teamno’]”).val();

    function checkAnswer(questionID,answer,teamno){
    var data = {};
    data.questionID = questionID;
    data.answer = answer;
    data.teamno = teamno;
    data : data,



    The Riddle

    Blog|About Us|Contact

    Where we first met siri⋯

    Alive without breath, As cold as death, Never thirsty, ever drinking, All in mail never clinking?

    Team No.



    How many differences in these two pictures?

    Team No.                        Answer.








    You can touch the letters
    Q: How many words can you find in total (5-letter,horizontal,virtical,diagonal)?
    Team No.                        Answer.



    Team No.



    Press new game to start.
    You can press each block to move it, and finnaly pattern an image.After you get the image, write down your answer when you login.

    Team No.                        Answer.



    <!– –>

    What starts
    with a “p”
    ends with an “e”

    has thousands
    of letters?




    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.

    You really laid an egg on this one! Try another device. This one doesn’t work.

Comments are closed.