Presentation of 2. Prototype

Hey guys,

here is our presentation of our 2.prototype.

Feel free to comment!


Developing in the cloud

In our last blog article Vivien pointed out how Web 2.0 / Social Media changes learning. In addition to that I will write some lines about how web 2.0 affects software development (or just to add a new buzz word: “developing in the cloud”). Vivien said “The main feature of Web 2.0 applications is, that so far conventional applications for PCs are shifted into the world wide web.” This is true for software development, too.

Within the last year Cloud9ide has raisen a lot of attention because it shifted the development environment from the desktop into the browser. Thus collaborating with other developers had become easier then ever before. Together with cloud based databases, deployment servers and online repositories, the developer has everything he needs within his browser. The main reason for this paradigm shift is, that browsers (and their javascript engines) had become faster and more responsive.

Within this project I’m going to find out, if it’s possible for me to develop and deploy a web app only with the help of a browser. This means:

  • no local Editor or IDE, just my browser
  • no usage of own servers, repositories or infrastructure
  • no usage of services with costs

Below I will introduce all services I’m going to use for this project to fulfill the above requirements:

jsfiddle for the visual prototypes of the mini-games
  • online edtior for snippets build from html, css and Javascript
  • supporting all actively developed frameworks (jQuery, bootstrap, ExtJs,..)
  • code can be shared
  • good for isolating bugs and testing compatibility (e.g. css3 browser-support)

cloud9ide as a replacement for a desktop-ide/editor

  • online web-based Cloud Integrated Development Environment for Javascript and Node.js development  (It is written almost entirely in Javascript, and uses Node.js on the back-end)
  • code is accessible from anywhere on the web
  • teams can collaborate on projects and run/debug them within the browser
  • easy deployment on different servers (e.g. heroku)
  • free for open source projects

github as a public repository

  • web-based hosting service for software development projects that use the Git revision control system.
  • Includes source-code browser, in-line editing, wikis, and ticketing.
  • free for open source projects

heroku for hosting our app

  • cloud platform as a service (PaaS) supporting several programming languages.
  • Agile deployment for Ruby, Node.js, Clojure, Java, Python, and Scala.
  • Run and scale any web or background process with any web framework or worker type in minutes
  • first Node and a small Database is free
  • one-click-deployment-button in cloud9ide

Have a look:

How Web 2.0 / Social Media changes learning

This article explains how Web 2.0 changes the way of perception and usage of the internet. Typical E-Learning 1.0 platforms will be displaced by personal configurable learning- and working environments. The with Web 2.0 combined applications contain much less technology-driven Innovations, but could be understood as a consequent application of already existing internet technologies. The main feature of Web 2.0 applications is, that so far conventional applications for PCs are shifted into the world wide web. Like publishing my personal photo collection on platforms like Flickr and tagging them with keywords, so foreign people can see them. This is how communities arise step by step. An another important change is, that we use the internet more often from different electronic devices and different locations like at home, en route or at work. It becomes more and more a part of the everyday life.

The changes of perception and usage of the internet associated with the Web 2.0 can be transcribed through the shift of three borders:

  1. User versus Author: Users can become Authors.
  2. Local versus Distant: The border between local and distant data management- and handling become indistinct.
  3. Private versus Public: private content become more and more public.

This three border can also be transferred into the learning context:

  1. Learner vs. Teacher: learner can generate content.
  2. At Home vs. School: learning becomes ubiquitous.
  3. Learning vs. Testing: learning turn into a performance.

What does this mean for the future of E-Learning? Till now the development of E-Learning offerings often only provides contents for learners on servers in the internet without any social tools for the users. Like an island in the world wide web with its own contens and tools separated from other platforms. And this is where the big difference between E-Learning 1.0 and E-Learning 2.0 is. Instead of using the E-Learning platform as a gate which leads the user through the internet and also containing its own contents and tools the teacher only transfers all resources onto the island. Besides the learner isn´t able to configure his own personal learning and working environment.

In the following an overview over the most important differences between E-Learning 1.0 and E-Learning 2.0:

E-Learning 1.0 E-Learning 2.0
Learning environment: an island in the internet with contents and tools Learning environment: a portal which guides through the internet with contents and tools
Teacher transfers all resources onto the island Teacher provides guideposts and aggregates resources
Learner uses the given contents and tools Learner configures his personal learning and working environment

The Institute for prospective Technological Studies (IPTS) have done a techno-economic research and prospective analyses on the use of ICT for creativity, innovation and lifelong learning for all. The research on learning in informal learning networks and communities concludes that social media applications provide easy, fast and efficient ways to access a great diversity of information and situated knowledge. They also provide learners with opportunities to develop their competences in collaboration with other learners, practitioners and stakeholders.

There a four dimensions the so called four C´s of Learning 2.0 in the IPTS research (content, creation, connecting and collaboration):

  1. content: social media allow learners to access a vast variety of learning content.
  2. creation: social media allow users to create digital content themselves and publish it online, giving rise to a huge resource of user-generated content.
  3. connecting: social media connect learners with one another, and to experts and teachers.
  4. collaboration: social media support collaboration between learners and teachers on a given project or a joint topic of interest.

As you can see there a huge potentials for learners in web 2.0 learning applications, but the question of the media didactic approach in those E-Learning platforms is given. Those portals surly supporting mostly the approach of learning activities in social contexts which we can find in groups of people. But the big advantage of E-Learning platforms is that there are as far as possible open to the different didactic approaches. That means these platforms are flexible to concentrate on certain education problems of the didactic field. The future will show how these opportunities will be used by learners and teaches as well.


Text sources:

Competitor Analysis

First of all: there are so many Apps (about 300 only for Android) which focus on flags  – because of this, we selected five apps for Android, three apps for iOS and one browser game.

Apps for Android:

National flags quiz


  • This app has tow game modes: “From Flag to Name” and “From Name to Flag” – every mode have three difficulty levels:  easy, normal and hard
  • The game can be played with or without time limit, if you play with time limit, you have 60 seconds to earn as much points as you can
  • If you want to play without a time limit, you can choose between the modus “All Flags” or “no fault”
  • After the game ends, you can see in a review each flag with the name of the country, so you can check which questions you answered wrong
  • In the settings you can choose the order of questions, the range of questions, the language and if you want to play with sound or not
  • This app supports 25 different languages


  • Also small or unknown countries take place
  • A list with all used flags
  • Review at the end of the game
  • free download
  • many supported languages


  • Just two different game modes
  • No way to compare online with your friends – no highscore list
  • Just collecting points, but there is no use for this collected points

World Flags


  • You have 50 seconds to touch the correct flag and earn points
  • This app contains 193 flags


  • The large number of used flags
  • Also small or unknown countries
  • free download


  • Just one game mode
  • No way to compare online with your friends – no highscore list
  • Just collecting points, but there is no use for this collected points
  • No possibility to change the difficulty
  • it’s a really dull game
  • bad design

World Flags: Quiz and learn


  • You start this game with 50 questions and you get a new one each day
  • You get one flag and 4 possible answers, if you choose the wrong answer,  it gets red and the app shows you the right one
  • After every question you have two options: you can click the Wikipedia logo to get more informations about the country or you can order the next flag
  • If you choose the right answer the yellow bar at the left corner changes and shows your improvement


  • The linking to Wikipedia
  • The improvement bar
  • Also smaller and/or unknown countries
  • free download


  • Just one game mode
  • No way to compare online with your friends – no highscore list
  • No different difficulties
  • No possibility to restart
  • The user can’t see which questions he had answered correctly since he started the game
  • It’s more for learning and not for gaming

Word Flags Memory Lite


  • two different game types:
  • Memory: Time yourself on how fast you can discover all the pairs of flags
  • Quiz: quiz yourself the name of a then compare your time against other players around the world in the World Top 100
  • also multiplayer available


  • gallery of all flags (good for learning)
  • multiplayer with top 100 list
  • free (full version for 0,99€)


  • no different difficulty levels
  • bad design
  • advertisements in free version
  • no active players for multiplayer online (so not testable)

Flag Quiz


  • knowledge about worldwide Countries and Capitals
  • if you give a wrong answer the game is over and you are back on the dashboard
  • the goal is to give the most correct answers in a line
  • many possible game modes:
    • Country flag and four possible answers are given: select the correct name/capital city/emblem
    • Country name and four possible answers are given: select the correct flag/capital city/eblem
    • Country emblem and four possible answers are given: select the correct flag/capital city/name
    • Country flag and emblem are given: you have to enter the correct name and capital city of the country


  • many different game modes
  • also including the emblems of a country
  • many flags (191 countries and emblems)
  • next versions will support sharing your maximum score through Facebook, Twitter, Whatsapp, SMS, email and other options provided  by our Android terminal.
  • many languages supported: spanish, english, greek, russian, portuguese, italian, french, deutsch
  • free


  • bad design and bad structured navigation
  • advertisements
  • no different difficulty levels
  • no multiplayer
  • only local toplist
  • every wrong answer brings you back to the dashboard


World Flags Game


  • This app helps the user to learn and recognize the flags of 200 countries
  • The user has to collect points by correctly identifying the flags
  • If the user collects more than 15 points, than he will get  a level-up, but if he got less than five points he will move down a level


  • The large number of flags
  • Using the collected points for level-up or level-down
  • different levels and difficulties


  • no free download

World Mania

  • World Mania is a Quizgame
  • 6 different quiz modes: capitals, currencies, continents, flags, independence and random
  • the user can choose the number of questions he wants to answer
  • at the end of the game the user get a report about his results
  • the countries can be viewed in an interactive map
  • can also be used to just get some informations about the countries


  • detailed report at the end of the game
  • different quiz modes
  • background informations to the countries
  • flexibility in choosing the number of questions
  • interactive map
  • design is suitable for children


  • No way to compare online with your friends – no highscore list
  • no free download
  • no different levels/difficulties


  • Flags! is a multiple choice game
  • the app tracks your progress
  • uses sophisticated learning algorithms
  • the browse mode lets you look at all the flags



  • Also small or unknown countries
  • A list with all flags
  • progress tracking
  • nice and clear design – no dispensable stuff
  • large number of flags


  • Just one game mode
  • No way to compare online with your friends – no highscore list
  • no different levels/difficulties
  • no free download


Flags of the World

  • online flash game (targeted to desktop browsers)
  • you have to pick up the right name of a country
  • multiple game rounds
    • round 1 (warm-up): 60 seconds, 8 country names with 2 corresponding flags are shown, you have to pick the right one four times to qualify for round 2
    • round 2 (marathon): 60 seconds, 12 country names are shwon, you can choose the number of possible answers (2 or 4), you have to pick the right one six times to qualify for round 3
    • round 3 (hill climb): 8 country names with 4 corresponding flags, you have 7 seconds per question, you have to pick the right one four times to qualify for round 4
    • round 4 ?
    • if you don’t qualify fo the next round you have to begin from scratch


  • nice design
  • online highscore
  • displaying user comments
  • difficulty increased by each level, so it’s interesting for a longer time
  • besides the levels you earn points for:
    • your speed
    • selecting 4 answers in level 2
    • linking together correct answers in level 3
    • ..?


  • it’s flash!
  • not for mobile devices
  • only one game (but in different leves/modes)
  • many advertisments
  • only in english


As shown, there are many different apps which focus on flags. But basically, they are all very similar: you get a flag and your task is to name the flag correctly. Some of the games have different levels and/or different difficulties, some of them have different game modes.

All games uses flags from all over the world – our App just concentrates on Europe – but this is expendable

None of the presented games uses the GPS – our App does, this is a very nice feature and a large USP.

So, let’s face it: our App is really the best choice 😉

The Technology Stack

In this blog entry we will give you a summary of the technical side of our flag app: “What technologies are we going to use and why do we choose them.”

First of all we had to make a decision: “Are we going to make a native app, or a web app”.

We already summarized the differences between this approaches in an older blog post [1]. Due to the big workload (because of the many mini-games) and my lacking experience with native app developing we decided to do it the web-app-way. Common web technologies (html/css3/js) paired with a mobile-web-framework will cover all our requirements and thus our app can even be used with desktop browsers.

The Client Side
For best user experiences on mobile browsers we will use the web-app-framework jQuery mobile [2]. This way the mobile user gets a native feeling whereby there are also optimization possibilities for desktop users (with css3 media queries). We favour jQueryMobile over Sencha Touch because of the wider device support of jQueryMobile and the fact, that everything can be done in Html and css3 (JavaScript will mainly be used for the game logic). Furthermore we have the option to make our app native as well later (phonegap [3] for example, transforms any web app into a native iOS or Android App).

The Server Side
On the server side we primary need user handling/authentication, a database for storing informations like the user’s score. There are many ways to implement user handling, one is oAuth [4]. This way the user can login with his twitter/facebook/whatever-account and we don’t have to struggle with the registration part.
Besides, the majority of the game logic should be computed on the server. The advantage of this approach is that there is no way for the users to cheat (like looking up the sourcecode of the memory game to get informations about a card’s backside). Since we have to split the game logic into server and client parts it would be fine if we can use the same programming language on both sides.

Based on this requirements we are going to use node.js [5], a server-side javascript environment in combination with express [6], a web framework for Node.js. The authentication with oAuth (twitter) will be handled by everyauth [7]. The persistance layer can be filled with a nosql databse like couchDB [8] for data storage, but for the prototype we will use dirtyDB [9], a tiny & fast key value store with append-only disk log.

Communication between client and server
There are several informations that have to communicate between the clients and the server (e.g. user moves or highscores).
To archive a asynchronous real-time communication between the server and the clients we will use [10], which works perfectly together with nodejs. is compatible with a wide range of browsers and in combination with json [11], a data interchange based on javascript, it’s a fast websocket solution  (with fallbacks for older browsers) with a minimal data overhead.


  • Node.js (JavaScript Server)
  • DirtyDB (file-based DB)
  • Express (Web-Framework)
  • Jade (Template-Engine)
  • Less (dynamic Stylesheets)
  • Everyauth (Twitter oAuth)
  • (real-time Communication)

  • jQueryMobile (Mobile-Framework)
  • HTML5 (generated by Jade)
  • CSS3 (generated by Less)
  • jQuery (for game logic)
  • (real-time Communication)

[2] (jQuery mobile example:

Flagmania Mockup

Hi everybody,

We are happy to present to you, after long hours of work, our Flagmania mockup.
You can watch it at this link:
The mockup contains all 5 games at all game levels (opening and login screens, game menu, level selection, games and high scores screens).

Working Process:

At the beginning we planned on building the mockup with axure that we familiar with from other courses. But, when we realized that due to really tight schedule of both of us, we won’t be able to meet, we decided to look for another environment that will allow us to works collaboratively from different locations (and this is also a very important aspect of social learning), and that’s how we found that allows trial account.

During the build, we were using the Berlin girls design from earlier steps of the project as the base to the build, that and the fact that lucidchart provides iphone ui components, were really helpful for us.

There were some difficulties during the build, part of it is the fact that the “Flagmania” idea contains a lot of games and levels and we wanted to make the mockup as detailed as we can, The biggest difficulty however, was the relatively small resolution of the iphone that made us make some changes to the games (for example, changing the size of board at the memory games to a bit smaller boards) but we believe we handled it pretty well.

a bit about the Mockup:

** at each step on the mockup, you can press the “Show Hotspots” button in the upper right corner in order to view the available interactions on the current page.

  • Home Screen:
    • this screen will open after login to the app or at every click on the button on the top left corner.
    • in this screen we can see the user name and the flag of the user country, log-out option and links to all 5 games.

  • Games Screens:
    • after selection a game from the list, in 5 out of 5 cases the user will be directed to select the game difficulty or watch the high scores page.
    • after selecting the difficulty the user will be directed to the selected game and difficulty.
    • when selecting the 5th game – GPS Questioning, the user will first be directed to locating screen where he will be asked to approve his location and from there the user will be directed to select the game difficulty
  • High Scores:
    • the high-scores screen will display the top 5 users and their scores for each game level
      (Memory-Starter, Memory-Advanced etc.).
Hope you’ll find the mockup nice and helpful,

Please let us know what you think,

Shiran and Na’ama.

First presentation of our idea

Here is our first presentation of the “flag”-idea.

You will find the slides of this presentation here: 1st Presentation

Please give us feedback, so we can develop our idea…

–> The provisional “User reqiurements” are directly under this blog-post. So feel free to give us feedback for this, too.