Gamification | Coursera | Assignment 3

Posted on June 15, 2013 by progzer

[15 June 2013] In continuation of the second assignment, here’s the third and final written assignment which was part of the class on Gamification on Coursera offered by University of Pennsylvania‘s (The Wharton School) Prof Kevin Werbach.

You earned 93.5%

You earned 93.5%

Post 1 – Definition. Cereals Incorporated.
Post 2 – Motivation. Medium-sized city in the Midwest.
Post 3 – Design Document. ShareAll. This post

Project Part III: Design Document

Now that you know the essential concepts about gamification and game design, it’s time to use them. For this final task, we ask you to bring together creativity, technical feasibility, and business realities.

You are approached by Rashmi Horenstein, the CEO of ShareAll, a prominent company in the hot collaborative consumption space. (If you aren’t familiar with the concept, some good resources are CollaborativeConsumption.com and the March 9, 2013 cover story in the Economist.) She knows you are one of the top experts on gamification, which she has heard can revolutionize business.  She asks you to present a proposal for a gamified system to take her business to the next level.

ShareAll’s mission is to make shared use of products and services as common as individual purchases.  It follows the path of companies such as AirBnB, Buzzcar, and Uber, which allow sharing of particular products (cars, housing, etc).  ShareAll’s patented technology makes it easy for consumers and business to share any product or service.  ShareAll has also developed a global virtual currency, called Shares, which can be used to purchase access to any asset in the system. Shares can be exchanged for real money, and users can generate more Shares by sharing items or volunteering their time to complete tasks for others.

ShareAll charges a small transaction fee whenever Shares are generated, traded, or spent. Therefore, the more activity, the more money ShareAll makes. Horenstein tells you that she cares about the social benefits of sustainability.  However, ShareAll is a for-profit company, with investments and partnerships from some of the world’s largest corporations, so profits matter. Horenstein believes gamification could significantly help ShareAll’s business. She is eager to read your ideas.
Provide a detailed description of your proposal, organized according to the design framework described in the lectures in Unit 7:

1.     Define business objectives
2.     Delineate target behaviors
3.     Describe your players
4.     Devise activity loops
5.     Don’t forget the fun!
6.     Deploy the appropriate tools

A summary of each concept is provided on the Gamification Design Framework page.

Format: Maximum of 1500 words.  A normal answer will have descriptive text, and/or a set of bullet points, for each of the six sections of the design framework.  This is your final project. It is the most complex and worth the most points toward your overall score, so you have two weeks to complete it.

Please remember that you have agreed to the Coursera Honor Code as part of your enrollment for this course.  Your submission must be your own work, and not copied from another student or an online resource such as Wikipedia.  Graders will be instructed to assign a score of “0” to plagiarized work.

Write your answer in the text box below (1500 word maximum).

Gamified framework for ShareAll

1. Define business objective

Our business objective is to take ShareAll to the next level. Since ShareAll is a for profit company, the implemented system should generate returns higher than those without the implementation. This may be measured in growth of market size, i.e. more people engaging in using shared products (primarily durables) and services; and if there are many competitors or players in this market, the goal may be measured as the growth of market share as well. Another strategic objective could be to become a platform for exchange and not just a portal – I will elaborate on this in the tools section. Another metric that we will use is similar to DAU/MAU where we will also condier the ratio of actual Shares transacted (daily/monthly).

2 Delineate target behaviors

The primary target behavior that we want players and potentials is to accept shared usage of products and services to be as common as or more preferred than individual purchases. As a more specific or direct (measurable) behavior, we want players to use more shared services. On the other side of the transaction, we want product owners to share more products and services on the platform.

We also want players to increase their levels of trust (and reliability) in peer to peer exchanges – which is currently believed to be a big factor in for people engaging with such services. It can be compared with the times when e-commerce was starting out. It felt like a risky proposition for customers to purchase or offer consideration in exchange for a product that they have not seen or felt in their own hands. Once people had tried or experienced making a purchase on a large (and slightly more trusted) “shop” like eBay, they slowly transitioned to making purchases online from many other retailers. Many customers no longer think twice before making online purchases. Similarly, when trust and acceptance of shared ownership increases, the market for ShareAll increases.

Another related behavior which may already exist/overlap with the psychometrics of the players is to care about sustainability. We want our players to feel good in making a shared usage rather than an individual purchase. We want the same feeling for owners of products (or those that offer services) to feel good about about being a part of shared system.

3. Describe your players

At a very high level, ShareAll is designed for everyone. It’s seen as an implementor of disruptive innovation (the sharing economy) which has the potential to become very pervasive. Though being a relatively new business with resource limitations and trying to get first time users and spread the word, it needs to concentrate on a specific target segment otherwise it’s message will be too diluted and will not get beneficial results.

We begin by describing our player demographic as 18 to 35 year olds as one group and 30 to 45 year olds another. The urban and sub-urban people live in larger and less-closely-knit societies than those in more rural areas. It may be easier to build trust in the more closely knit socieities though the pervasiveness of technology may be lower. The younger demographic is accustomed to e-commerce and and easy mobile applications. They are also likely to have smaller incomes than older players. This group will be the one which wishes to make use of shared products which might not be affordable to own in their current income (eg: nice cars, designer clothing, etc). Though they will also consume products that they can afford for the psychological benefit of helping sustainability by consuming products with shared ownership. The youngest of this group is also likely to be the provider of time/services (eg: picking up someone’s groceries in exchange for the virtual currency of Shares).

The older group is likely to have higher incomes and is likely to be the owner of products that are made available on the platform for shared usage.

The psychographics of the players will include people who like the fact that they helping sustainability and reducing their environmental footprint. People who like meeting new people would also form a large portion of our players.

4. Devise activity loops

The system would always give feedback to players about their environmental footprint. With increased usage of shared products, they will receive badges for certain types of product usage and be presented with a progression. As an example, players may receive a differnt badge for renting a bicycle 5 times as compared to a car 5 times. There will be levels to showcase their progression as well; by the previous example, a new class of badge will be available when their usage of shares reaches 50 for a particular type of product (this is similar to the way Foursquare gives badges). Since part of the message of ShareAll is social good, to mitigate the negative effects that some users may perceive of “showing off” badges, the profile would offer an easy opt-out during onboarding and players could choose only to share badges with a selected set of other players. An overall trust-level score will always be shared.

Along with leveling up, players will also receive points which may be used for increased levels of access on the platform. They may receive points for getting a good review from the user or their product or service. This will help ecourage good behavior as players who have earned higher points will be more trusted goods or service providers (premium players) – which ties in to helping with a target behavior or increased trust.

To increase traction (or system liquidity), players will receive extra points for inviting new users. Additionally, new players and the referer to the portal will both receive a small amount of Shares (Note the distinction that points are just for system actions and Shares are the virtual currency that can be redeemed for goods and services) – these Shares may be used for a certain set of products – these could be funded by the promotional budgets of the corporations (“sponsors”) which have partnerships with ShareAll. This help in more players signing up to the system. Goods/service providers who engage with new or first time buyers will also receive slightly higher than the set Share price. This ties in to the goal of increasing the market size.

5. Don’t forget the fun!

To make use of the value associated with “chance wins”, players will be able to spend points to buy into a Share lottery. The winner of the lottery may receive free usage of products from sponsors and players will be free to gift these “prizes” on to others for Shares that they can use on a product they or service they want more.

Another fun element would be a photo-sharing section where the buyer and the seller may voluntarily put up a photo at the time of taking delivery of a good or service. This will help showcase or bring visibility to the more friendlier players and make the entire system appear so. The system will provide fun an unexpected badges for certain usage combinations; as an example: Use car+bicycle+lawnmower = I love wheels! badge or post 10 pictures with other players = socialite level 1.

Finally, there will be a view random (public) profile and an extra points bounty or challenge if you buy or sell to that person within a week.

6. Deploy the appropriate tools

ShareAll will be accessible on the web and as mobile apps – this is something that the target players expect and also allows for easier geographic expansion. It will also make use of location awareness (GPS) which will be opt-in to share location to handle privacy issues. At the same sharing of location will be encouraged to find quicker and better matches.

Our goal is to become a platform and not just one of the product/service portals. Our current differentiator is that we use Shares. As part of the tools, ShareAll will build a secure transaction system which will allow third-party potals (eg: AirBnB, Uber etc which may be specialized in certain products or services) to accept Shares as a form of payment. This has the potential of turning potential competitors into industry-partners and grow together while the industry is nascent. At this stage everyone grows together better than to fight over a smaller pie. This system implemented well, ties in with the goal of increasing market share.

On the whole, the elements mentioned above sections tie in with the goal of increasing market size and share.

—

References:
Take a Seat with Rising Stars of the Sharing Economy, Katie Kramer, CNBC, April 2013
The rise of the sharing economy, The Economist, March 2013
Why It’s So Hard to Build a Peer to Peer Marketplace, OuiShare, Connor McEwen, March 2013
(1468 words)

Evaluation/feedback on the above work

RUBRIC (points scaled x4)

There is only one component to the score for this assignment. You may optionally also provide free-form feedback to the student.

The submission should be the student’s own work. If you conclude that a substantial portion has been copied without attribution from another student or an online resource, assign a score of “0” to both components.

0    No answer or completely irrelevant answer.
1    Addresses three or fewer of the six sections of the design framework.
2    Addresses four or more of six sections of the design framework, but fails to describe a gamified system that the grader can envision.
3    Describes a gamified system and addresses four or more of the six sections of the design framework, but does so in a way that is obvious or vague.  For example, “The players are people who use ShareAll.”
4    Describes a gamified system and addresses all six sections of the design framework, but fails to adequately explain how the proposed system would address ShareAll’s goals.
5    Describes a specific, realistic gamified system and addresses all six sections of the design framework in a manner that is generally thoughtful, consistent, and insightful.

Score from your peers: 5

Overall evaluation/feedback

What I liked was…
peer 2 → All
peer 3 → The pro side of your essay. Congrats
peer 4 → Excellent and very detailed. It’s clear that you’ve thought carefully about user behavior in regard to ShareAll in general and to your gamified system.
peer 5 → Specifics of the system and its functionality have been described in great detail.

What could have made this submission better was…
peer 2 → Probably the game itself could be explained better
peer 3 → I believe there could be more “fun” in the chapter 5.
peer 4 → None. Especially in light of the limited time frame we had for this assignment, you’ve handled it well–looks like professional quality work.
peer 5 → This is good, no changes!

 

Posted in Uncategorized | Tagged , , , , , , , , | 2 Comments

Gamification | Coursera | Assignment 2

Posted on June 9, 2013 by progzer

[9 June 2013] In continuation of the first assignment, here’s the second written assignment which was part of the class on Gamification on Coursera offered by University of Pennsylvania‘s (The Wharton School) Prof Kevin Werbach.

Post 1 – Definition. Cereals Incorporated.
Post 2 – Motivation. Medium-sized city in the Midwest. This post.
Post 3 – Design Document. ShareAll.

Project Part II: Motivation

You are approached by Ryan Morrison, the mayor of a medium-sized city in the Midwest of the United States.  He has heard that you know a lot about gamification and believes that gamification techniques can transform city government.

He would like to start with the health of city employees.  The city has 50,000 employees and they happen to have exactly the same rates of obesity as the U.S. average: 34.4% overweight (but not obese) and 33.9% of them are obese.  53.1% of the city’s employees do not meet the U.S. Physical Activity Guidelines for aerobic physical activity and 76% of them fail to meet the Guidelines for muscle-strengthening activity.  The city pays for health benefits for its employees and this cost is a huge part of the city budget.  Economists in Mayor Morrison’s office have estimated that a 3% improvement in the average physical fitness of city employees would amount to a US$94 million reduction in annual city health costs; a 5% improvement would save US$188 million. 

Describe in general terms a gamified system that could effectively motivate behavior change to address the challenge presented above. Specifically, explain how the system would effectively incorporate intrinsic motivation, extrinsic motivation, or both. Your answer should address the fact that this is an internal gamification project, targeted at the institutional goals of the city government.  The system can use any technology (or no technology!), so long as the resources required seem justified by the scope of the opportunity.


Format: Maximum of 500 words.  A normal answer will be 2-3 paragraphs of text, and/or a set of bullet points.  Your submission should be self-contained (not requiring the grader to view any outside materials) and should provide sufficient details for the grader to understand the basis for your statements.

Please remember that you have agreed to the Coursera Honor Code as part of your enrollment for this course.  Your submission must be your own work, and not copied from another student or an online resource such as Wikipedia.  Graders will be instructed to assign a score of “0” to plagiarized work.

Write your answer in the text box below (500 word maximum).

The system would begin with looking for volunteers to be “fitness champions” in each department. Inviting volunteers initially, will quickly bring out players (city employees) who have intrinsic motivation (thinking it’s fun, belief in fitness etc). At this stage, they will spread the word about benefits of being fitter, savings to the city translating to the whole society, competition between departments, fun elements including funny badges assigned to the each department on a common website etc.

The program website will allow each employee to pick from a list of many goals. Picking from listed goals, as opposed to players having to come up with their own ones at the early stage, will make it easier (Onboarding ) for the players to begin things they find enjoyable (giving them a sense of autonomy and control) – this too would appeal to the intrinsic motivation of players. Once this process has begun, intrinsically motivated players will continue in their momentum and continue to perform combinations of “healthy actions” and make their own goals.

Each “healthy action” is a mesurable activity which leads to the accumulation of points in the player’s profile (eg: using stairs instead of the elevator). Achieving each goal leads to receiving a badge. Players get to choose whether or not their points and badges are visible to other employees and/or departments on their profile. Their points will still count towards a total department score. Department scores will be ranked on a dynamic leaderboard. This will lead to a some competition between them and also a sense of teamwork within departments – both of which will motivate participation. Each department will get to choose a mascot/avatar and their movement (up or down) on the leaderboard may be represented by fun animations involving their avatars – eg: Avatar of one department climbing a peak and hositing a flag when they top the leader board. Or one department’s avatar crushing that of another after moving past them.

Further, the system would have extrinsic motivators such as rewards:
– the top department each month gets to keep a rolling trophy (tangible).
– Players may become MVP/MFE (Most Valuable Player/Most Fit Employee) of their department or city-wide which gives recognition.
– winning departments each quarter could be taken for a picnic/retreat and are given T-Shirts etc.

From a technical perspective, the system described will track “health actions” on a web site and include a trash talk board, accessible to the players. Installing cameras in staircases can be used to track their usage (accumulates points). Just using staircases (instead of elevators) is one simple lifestyle change which give many health benefits. Cameras to track elevator-vs-staircase usage ratios of departments could give another fun achievement or comparison datapoint. The system would also allow plugging in scores from other existing systems like Nike+/Fitocracy. If the city “owns” or can adopt community gyms; (depending on the costs), systems may be installed allowing tracking of player’s exercise activity. (490 words)

Evaluation/feedback on the above work
RUBRIC (points will be multiplied x2)

There are two components to the score for this assignment.  The first is a quantitative measure and the second is a qualitative assessment of the submission. Give a score for each component according to the rubric below.  Note that the qualitative component focuses on the motivation aspects of the assignment; you do not need to evaluate the overall quality of the gamified system description. You may optionally also provide free-form feedback to the student.The submission should be the student’s own work. If you conclude that a substantial portion has been copied without attribution from another student or an online resource, assign a score of “0” to both components.Quantitative Measure
Did the student effectively answer both portions of the question:

0    No answer or completely irrelevant answer.
1    Either describes a gamified system or explained the relationship to motivation, but not both.
2    Describes a gamified system and explains its relationship to motivation.

Score from your peers: 2

Qualitative Measure
Did the student effectively address the question about motivation:

0    No answer or completely irrelevant answer.
1    Discusses motivation but does not coherently apply the concepts of intrinsic (activities desirable in and of themselves) and extrinsic (activities desirable to achieve some external factors such as rewards, status, or power) motivation.
2    Explains how the proposed system would involve intrinsic or extrinsic motivation, but does not address the context of an internal gamification system for an institution such as city government.
3    Explains how the proposed system would involve intrinsic or extrinsic motivation within the context of an internal gamification system.

Score from your peers: 3

Overall evaluation/feedback

What I liked was…
peer 2 → everything, clear and undertandable
peer 3 → This was a really good submission.. there were some excellent ideas presented and it tied back nicely to the task at hand. It incorporated many elements that were illustrated in the lectures. great stuff!!
peer 4 → the sense of autonomy and freedom to choose the goal to start with
peer 5 → Clearly explained, well-constructed answer.

What could have made this submission better was…
peer 1 → Excellent use of course concepts. Well structured.
peer 2 → a bit more structurated text
peer 3 → not much
peer 4 → The whole Gamification system intrinsic/extrinsic motivation focused too much only to individuals that would be interested from the beginning but not to those whom are not that can be further improve on.
peer 5 → I agreed with mostly everything in your submission, except for the (over) dependence on cameras and other recording equipment as part of the solution – it may be construed as a violation of privacy, especially if the footage is being used for purposes that are not related to security. Just a minor nit.

Posted in Uncategorized | Tagged , , , , , , , , | 2 Comments

Gamification | Coursera | Assignment 1

Posted on June 1, 2013 by progzer

[1 June 2013] This post is still mostly a draft. I’ve been postponing it for a while, but since there’s no better time than NOW – but then I have to get back to this prototype I’m working on (the weekend) for increasing our chances on a project bid.

Post 1 – Definition. Cereals Incorporated. This post.
Post 2 – Motivation. Medium-sized city in the Midwest.
Post 3 – Design Document. ShareAll.

I recently took Prof Kevin Werbach‘s (The Wharton School) class on Gamification on Coursera offered by University of Pennsylvania. The content was excellent and I gained more perspective.
During the course, I took 4 Quizes (4.75 / 5.00, 8.25 / 10.00, 8.00 / 10.00, 9.75 / 10.00) and 3 written assignments (9, 10, 10) which may be verified at coursera.org/verify/2HJGS3MZU8

I’m posting my answer for the first assignment below. I’m sure it can be improved but this was done within the time and word limit deadline. The assignments were graded by 5+ anonymous peers. I’d love to hear your thoughts.

Project Part I: Definition

You are an employee of Cereals Incorporated, a large manufacturer of breakfast food products.  Your supervisor, Madison County, approaches you because she knows you recently took a course on gamification, which she has heard will revolutionize marketing.

She tells you that Cereals Inc. is about to release a new line of ready-to-eat breakfast pastries, and she wants to know whether to use gamification as part of the marketing strategy.  The breakfast pastries will be aimed at the 18-35 age bracket. Surveys show members of this demographic often skip breakfast because they don’t want to eat the typical cereals of their youth, and they are too active to cook their own breakfasts.  Market research indicates that the pastries are likely to appeal more to women than men by a 65%-35% ratio. Cereals Inc. has a 35% share of the overall breakfast food market, but only a 10% share of the fragmented ready-to-eat segment.

Provide as many reasons as you can why gamification could be a useful technique to apply to the situation your manager has presented to you.  Explain why these reasons address the specific scenario provided.  At this stage, focus on the problem rather than the solution.  In other words, describe the goals of the project, not the particular game elements or other techniques you plan to use.  We strongly encourage you to watch this week’s lecture segments before attempting this assignment.

Format: Maximum of 300 words.  A normal answer will be 1-2 paragraphs of text, and/or a set of bullet points.  Your submission should be self-contained (not requiring the grader to view any outside materials) and should provide sufficient details for the grader to understand the basis for your statements.

Write your answer in the text box below (300 word maximum).

A majority of the age group being aimed at are busy (active) individuals – they’re likely to be rushing to college or starting new careers, or perhaps even starting new careers (switching lines after a few years of work). Only the older end of that spectrum may have more stable careers etc. They value the “extra 10 minutes of sleep” over eating breakfast, because the activity itself doesn’t give enough of a reward/value. There is no immediate feedback of making the healthier choice of eating breakfast. Being young, they probably don’t see much of an energy loss yet but aren’t thinking about the long term heath effects of such a lifestyle.

Gamification can be used to offer mental rewards and immediate feedback – a score or progression of how they may have hit their daily target of “health points” and also a long term target (eg: bonus points for not skipping breakfast on even a single day for a week/month; “your monthly calcium intake has reduced your risk of getting weak bones by X%”). Making the activity of having Cereal Inc’s specific cereal more fun (using gamification techniques) would lead to increased demand for our product as opposed to just health benefits which might apply to competitors too.

Another factor that gamification can help with is making the activity co-operative. It could work out a scheme where girlfriends and wives, get their boyfriends and husbands to participate in the shared activity. Since the cereal is more likely to appeal to women (65%), gamification techniques may be used to get them to convert more men into “players”. Players will look forward to the gamified breakfast as against a few more minutes of sleep.
(282 words)

RUBRIC
There are two components to the score for this assignment.  The first is a quantitative measure and the second is a qualitative assessment of the submission.  Give a score for each component according to the rubric below.  You may optionally also provide free-form feedback to the student.The submission should be the student’s own work. If you conclude that a substantial portion has been copied without attribution from another student or an online resource, assign a score of “0” to both components.

Quantitative Measure
Did the student provide a list of reasons to use gamification, and an explanation for each one?

0    No answer or completely irrelevant answer.
1    1 reason.
2    2 or more reasons.

Score from your peers: 2

Qualitative Measure
Were the reasons explained convincingly? Grade this criterion independently of the number of reasons.  In other words, if only one reason is provided but it is explained in a clear, convincing, and thoughtful manner, award 3 points for this portion.

0    No answer or completely irrelevant answer.
1    Reasons with no explanations.
2    Explanations that were obvious or vague (such as “gamification would be good for Cereals Inc. because it would sell more breakfast pastries”).
3    Explanations that were clear, convincing, and thoughtful.  These could be (but need not be) tied to examples or frameworks in the lectures, such as the Foursquare factors identified in Lecture 3.1: engagement gap, choice, progression, social, and habit formation.

Score from your peers: 2.5

Overall evaluation/feedback

What I liked was…
peer 1 → Very well conceptualized. Strategic and rather visionary whoever wrote this. Kudos to you sire.
peer 3 → The explanation about how using the Immediate Feedback between breakfast and health can be obtain it applying elements of Gamification

What could have made this submission better was…
peer 1 → Unfair question in this particular scenario =)
peer 3 → Develop in a different way or deeper the second reason, because it seems more like the cereal is used as a tools to make people play, instead of use Gamification as a way to make people consume or enjoy the breakfast

Posted in Uncategorized | Tagged , , , , , , , , | 2 Comments

Visual User Training and Feedback

Posted on December 19, 2012 by progzer

Just put up two new posts on Coderwall

“If you’re instructing the user with text, you’re probably doing it wrong”
Visual User Training
Which illustrates using images/animation instead of lots of text to explain train a user to use a new (software) system and
Visual Cues/Feedback
Which talks about adding visual feedback in (software) systems to let the user know that you system is still working as expected and as polish in general.

Head over to the links if it sounds of interest to you. Feel free to upvote if you like the posts 😉

Posted in Computers and Internet | Tagged , , | Leave a comment

Passport Seva Kendra Appointment System

Posted on October 13, 2012 by progzer

[Posted in Oct 2012: Screenshots and information might be out of date.]
…or what their website/video doesn’t tell you about booking an appointment.

For the impatient not looking for a story – sync your clock with the server’s clock (open this clock in a separate tab) and add your appointment request at exactly the time appointments open. 3 minutes late and you lose. You may benefit by looking at the screenshots below to get an idea of what to expect. Also, use IE for this. Update: To know what to expect on the select appointment screen, scroll to the end.

[Now that the “executive summary” folks are gone] I recently wrote about appreciating the increased use of technology by government departments, while criticizing the look and feel. I finally got a chance to enjoy using one of these web services. My passport will require renewal (the correct term is re-issue) soon, so I went over to the nearest Passport Seva Kendra (PSK). Upon trying to ask the usual questions I might have – what documents are needed, any specifics to keep in mind etc – I got the response, “online, online”.
“But…(you haven’t even heard my questions!)”
“online, all online”, he waved and pointed at a printed notice pasted on the window. Not having an urgent need, I left. I figured I’ll look it up online and if I have any specific questions, I’ll return; I need to get to work.

Over the next few days, I browsed the site and figured out what all was needed
– fill up the application form
– look up the documents required based on the procedures (change in details, Non-ECR status, etc) needed on the passport
– upload documents
– and make an appointment.
Following this I spent the next few days/weeks chasing up documentation that would be required. Once I had all the documents (that I interpret to be needed – I’m yet to see!), I scanned and uploaded them. Following that I went to the manage appointments section. The page had a dropdown with the nearest PSK and captcha. I filled in the captcha and submit. Something didn’t work; maybe I got the captcha wrong? I tried again – same thing. Then I noticed the error message “Currently no appointment slots are available for the selected Passport Seva Kendra (PSK). Please try scheduling an appointment from 10/10/2012, 4:00 PM onwards.” This was in the evening on the 9th. (Side: Who writes their copy?)
Wait, what? Is my concept of taking an appointment wrong? I was expecting a calendar with slots, you choose a date/time if it’s free in their schedule and lock it in – even if the next free slot was a week or a month away!

Okay, maybe they designed it this way because a lot of people might (or they’ve tried this already and it’s based on sampling actual behavior) fill up the slots and never show up.  Just like we’re great at standing in lines, we’re great at keeping times and appointments too. [Side note: There may be a lot of individuals in this country (or world) who are intelligent, considerate, law abiding, decent and other qualities which might be considered for an “evolved civilization”. But when it comes to thinking about the group, the opposite qualities take over.] Missed appointments would lead to wasted time and resources (Tax sucker payer’s money) on part of the state employees. This limitation of the system could certainly have been built around – but that’s another discussion (allow a limited number of people who would like to wait – limit to a specific lot – take a chance on someone not showing up after taking an appointment. Also, fine the people who don’t re-schedule or cancel their appointment at least a day before.).

PSK site at 3:42pm

PSK site at 3:42pm

The next day I tried once in the morning – same message. Then again around 3:42pm – this time I took a screenshot. I thought to myself, “Okay, If this is how the system works – it unlocks at 4, I’ll log in then and get an appointment”. When I tried, this was a 4:03pm – just 3 minutes past the time the system would’ve been “opened”, I got a new message “Currently no appointment slots are available for the selected Passport Seva Kendra (PSK). Please try scheduling an appointment from 13/10/2012, 4:00 PM onwards”. What?! Two days worth of slots are gone in 3 minutes?

PSK site at 4:03pm

PSK site at 4:03pm

Side Note: The next day I went to the PSK, while walking towards it I heard a person sitting in the back of a Black Scorpio (SUV, seems dodgy…) speak out loud – “Passport?” I thought it was to someone else and I kept walking. Along a wall I saw a bunch of people with documents in their hands hanging around this guy in dark glasses (now I’ve got touts and agents in my thought process; the “good old” system).
Is the appointment a separate number – not linked to the Appointment Reference Number (ARN) – which can be traded by touts?
If the appointment system is rigged by touts – I haven’t figured out their play yet. Have they written a bot? (Some of the guys I’ve worked it might remember P-R-A…[end cryptic-inside-joke].)

[Next day] I went into the PSK and met “Mr. Online” again. He gave me the usual response at first, but then I told him that I already tried – even at 4:03 two days worth of appointments were gone.
“Is it like a lottery/rally/contest…? You have to get in at exactly 4:00 to win the appointment?”
He just nod his head and shrugged “heh heh heh” (So he does utter sounds other than – online). I asked if there was someone I could speak with – file a grievance. “Yahan toh kuch nahi hai (There’s nothing here)”.
“Fine, I’ve got to get to work, I’ll probably return later with the screenshots that I took”, I thought and left. [Seriously there isn’t a good free tool to take a screenshot on Windows with a hot-key yet? (Ctrl/Alt+PrintScreen) It only goes to the clipboard and then you have to paste it in an image editor. That’s too many steps if you want quick captures. I recommend Fraps (not free) if you have Vista or higher, it can capture DWM.]

Also, there’s a toll free support/grievance number. On the 10th, when I called it in the evening (16:27 in my phone’s log), the number was busy – it’s supposed to be a 24 hour call center. I guess it’s too much to expect to be in a wait queue (which can tell you the queue length/expected time to answer). Then I tried late in the evening (23:38 in my phone’s log) – this time I got through to an IVR. I navigated through it and choose the option to speak to a representative to file a grievance.
“This service is only available between 8:00am and 6:00(or was it 10?)pm”
Oh, okay, so it’s on the “official” 24 hour clock.
The next morning I tried again (10:55 am in my call logs) – guess what? Busy. I’m starting to see a pattern here.

I mentioned the online queue which is gone in minutes at work and another person mentioned that he’s been trying for months but has finally given up. He mentioned there was a protest a while back and it was revealed that all appointments for a particular day were from the same IP. I’ll take that with a grain of salt since that’s just anecdotal “evidence” that I’ve heard. The system has the benefit of doubt till I come across any conclusive proof.

Suggestion
I propose a few steps as a way to make the system more transparent.
Since I don’t want the PSK workers to waste their time in creating reports etc, these systems are to be automated (More project work and payments for you, TCS!). Knowing a thing-or-two about programming, I know these suggestions can be implemented.
If they don’t want to implement a system where it gives you an appointment at an arbitrary (free) date in future, the suggestions below can be implemented instead. [I’ve mentioned the system to friends and they have responded that they would have expected a similar system. I say – these fancy trip date selector websites selling travel tickets have spoilt this lot!]

The manage appointments page should show a (paginated) report of all the appointment slots given out. The fields should include ARN, User ID (blanked out for privacy – like on Google Groups), IP Address (blank out one digit from second and third set of numbers), time slot. These are the appointments still to happen. The manage (request) appointment screen should show the number of available slots, the number of filled slots and also the number of appointments (unique ARNs) requested. The requested appointments number will give people a clearer picture on how hard other people are trying to make an appointment, but it should be backed with a report on all the attempts – otherwise the “riggers” will just use a bot (breaking that captcha shouldn’t be too hard) to drive up the number by filing a lot of applications and requesting an appointment on it.

There should be an additional report showing the appointments that have happened. This would include all the earlier fields and whether the appointment was made and whether or not the appointment result was success (application have moved into the next stage – police verification or accepted for renewal etc) or failure (person was turned back for not enough documentation etc). The system is known to have this data, since one can track status of an application online. This post appointment report will also help to catch bogus appointments; unless the department employees themselves rig it – but I trust (at least hope) that everyone in the department wouldn’t be crooked.

Time for a win
Anyway, I logged in on the 13th and synced my clock to the server’s time then took into account the lag a little and managed to win an appointment. I’d like to think I keep most of-less-use junk disabled, but for the duration of this competition, I added the clock gadget to time my clicks better.
Perhaps someone from the department took a course on gamification since it’s quite a popular term lately. Or they’re preparing the country for an Electronic Sports Olympics.
Game Time!

PSK site at 3:59:06pm

T minus 54 seconds – Logged in and ready to “Manage Appointment”

PSK site at 3:59:50pm

[Old Image: Use the atomic clock in another browser tab instead.] 10 seconds remain (Unreal Tounament anyone?)
The gadget seems to be off sync from the server by 6 seconds, I’ll keep that in mind.

[Update: Rather than adjusting your computer’s clock, you could keep a clock website open in another tab and keep an eye on the title bar of it. See image below.]

You can open the passport site in one tab and keep a time site open in another tab as shown.

You can open the passport site in one tab and keep a time site open in another tab as shown.

PSK site at 4:00:03pm

T plus 3 seconds; captcha time.
PSK site at 4:00:26pm

T plus 26 seconds.
Hurry! I’ve clicked on the first slot I could lay the mouse pointer on. Another captcha.
Unfortunately this was the first time slot link, a lot more people might’ve chosen it. After this I saw a page telling me that the slot was already full.
Did I lose?!
Not so fast.

I was a little tense on the select an appointment screen focusing on trying to score one that I forgot to take a screenshot. In the coming days, I will play the game again and try and change my appointment to sooner (yes, there’s an option). Next time I will be calmer and get the screenshot.

PSK site at 4:01:30pm

T plus 90 seconds.
In the excitement I’ve missed pressing the hot-key for the slot screen’s shot again.
Did the shot clock run out? I seem to have caught the rebound and have another shot!
(For the uninitiated, that’s a Basketball reference.)

So I blazed through the process of View Applications > Manage Appointment… and chose another slot at the bottom of the page. Once again, I was in game-mode and couldn’t take a screenshot. But to describe it, the left coloumn had dates. The columns on the right were links with time on them – each slot being a 15 minute slot.
What was odd though was the first (row) appointment was the 16th as seen in the screenshot above, but below that there were almost 15 or so rows with something in capital letters, I couldn’t register it (my head was filtering out noise) as I scrolled to the bottom of the page (last row) and noticed a few open appointments – for almost a month away.

PSK site at 4:01:41pm

T plus 101 seconds.
He shoots, he scores. It’s good!

I hope this set of screenshots helps others know what to expect and therefore shave off some time in trying to get an appointment.
“But doesn’t that decrease your chances? You’re giving your edge away” Meh, had I been desperate enough, I’d write a bot.

PSK site at 9:41am

Begging *2* be *ha(c)k*-e(z)-*d* ?

Edit: A little searching turned up these links that may be helpful for those who want to know more
http://passportsevakendra.blogspot.in/ (What to expect when you go for your appointment)
http://mujiburrehman.com/indian-passport/how-to-book-appointment-passport-seva-kendra-psk-india

Update: As promised, here’s a screenshot of the appointment selection screen. This should help you know exactly what to expect when you come across and plan where you want to click.
PSK at 16:00:01

Update (2013-01-17): Here’s the rest of the story. I visited the passport office on the day of my appointment, went through the various steps and left. After that you can check the status of your application online.

The first status was on the lines of “You file has been sent to police station XYZ for verification”. I received a phone call from the station a few days (week?) after noticing that status online. I had to meet two departments – and they asked me to bring copies of some documents (when they called). My verification completed on 2012-11-26.

After that, the status changed to something on the lines of “Police verification completed. File has been set to SP, Police station PQR, District N (for approval?).”

On 2013-01-12, the status read “Your Passport has been printed and You should receive an sms/email once the passport is dispatched.”

Finally, on 2013-01-15, it read “Passport X1110000 has been dispatched on 15/01/2013 via Speed Post Tracking Number EM000111222IN.”
On the same day, the postman called my mobile number at 12:56PM and asked me to collect it from post office X at 4:00pm. I went and did the same.
Later in the evening, at 22:39, I received an SMS from LM-MEASP – “Dear XYZ, You Passport X1110000 has been dispatched on 15/01/2013 through speed post. Speed post tracking number is EM000111222IN.” At the same time, I also received an email from passport.admin(@)passportindia.gov.in with the details.

Status Tracker

Status Tracker

Posted in Uncategorized | Tagged , , , , | 73 Comments

Comparing Positions

Posted on October 2, 2012 by progzer

…or even just floats.
[Also on coderwall: https://coderwall.com/p/v3priq]
This one’s got nothing to do with the Derivatives sessions from last weekend.

This may be obvious to some, but I seem to have shared with different people on multiple occasions to, so here goes.

If you’ve got two position vectors you wish to “compare”, you should use distance (in fact, squared distance), instead of a component-wise equality check. As an example – a game character (position) and a specific position in space – “Has the character reached the origin (0, 0, 0) of the world?“.

I often see the naive implementation when someone complains about certain game-play code not working.
Pseudo (Class Vector3 skeleton towards end of article if needed):

  Vector3 position; // player position
  Vector3 destination; // target/destination position
  // ...
  // Naive check
  if(position==destination) {
    onTargetReached();
  }

This is likely to “not work”, since your position is updating based on a speed or velocity vector and taking into account deltaTime (all of them being float or double). The quotes around not work are placed because the computer does exactly what you program it to and nothing else. A reason to use distance is because of the (discrete) time step, position may never actually reach destination (you may skip over it in one frame(or calculation/simulation step) to another). Another reason is that floating point numbers may have accuracy issues.

The distance to use would depend on your scale – if you ever studied mathematics, physics, statistics etc, you may have come across the term standard error or epsilon. Think of the distance as an acceptable measurement error or “close enough”. So if your system scale or the units are 1 float unit = 1 meter and the problem you’re solving (code you’re writing) isn’t affected by anything smaller than a centimeter, you could use 0.01 as your epsilon value.

  // Check using distance
  const float kEpsilon = 0.01f;
  if( (position-destination).magnitude() < kEpsilon ) {
    onTargetReached();
  }

This changes your question to “Has the character reached close enough to the origin (0, 0, 0) of the world?“. Make sure this change is appropriate to your code base – if you’re at NASA or CERN where the accuracy may be more important than speed, walk away from here.

To make this even better, you could use squared distance. “What?! Add more instructions to square both sides of the condition/inequality?”

SIDE
For comparing just two floats (rather than vectors), it may be appropriate for you to do so in your application (probably not for you if you code for a bank! But then you should’ve read up about floating point accuracy):

  float a, b;
  // ... (system specific operations assigning values to a and b)
  // Replace:
  // if(a==b)
  // with
  if( (a-b)*(a-b) < kEpsilon*kEpsilon )

This one uses a squares to avoid having to check twice depending on whether the difference is negative or not. The marginally slower operation instead might be to use absolute – fabs((a-b)). Another rule of thumb to use: “Math is faster than using a conditional.“
END SIDE

The answer to that is – a multiplication requires fewer instructions as compared to a square root which is required in finding the magnitude of a vector. So your check should be:

  // Check using squared distance (helper defined below)
  const float kEpsilonSq = 0.01f*0.01f;
  if( (position-destination).sqMagnitude() < kEpsilonSq ) {
    onTargetReached();
  }

Plus, most Vector classes that you come across probably already have a lenSquared or sqMagnitude equivalent (look for them if you start working with on an existing code base or a project with a new engine etc); if you’re writing your own, you now know what it’s good for. Note that if you do come across some code which doesn’t have a magnitude squared method built in, you should add one. If you can’t (no access to source), just use length if that’s all that’s available – there’s no point squaring the magnitude if you’ve already calculated it.

Finally when it comes to optimization, only optimize something which would benefit the overall performance. Don’t go around changing all places in your (existing) code base to do this unless it’s in a function that gets called a lot – such as an update/step function called every frame. Otherwise it may not be worth the time you spend replacing all usages. Optimization should be balanced with readability. For new code you could use squared distance everywhere from a “good practice” standpoint.

  // Skeleton for Vector3 for those that may need it for better understanding
  class Vector3 {
    float x, y, z;

    // Magnitude (or length) of the vector.
    float magnitude() {
      return sqrtf( this.sqMagnitude() );
    }
    // For more details, see http://en.wikipedia.org/wiki/Magnitude_%28mathematics%29
    float sqMagnitude() {
      return (x*x+y*y+z*z);
    }
    Vector3 operator-(const Vector &other) {
      return Vector3(x-other.x, y-other.y, z-other.z);
    }

    bool operator==(const Vector &other) {
      return (x==other.x && y==other.y && z==other.z);
    }

    // More class details omitted
    // ...
  };
Posted in Computers and Internet | Tagged , , , | Leave a comment

CSS Custom Filters

Posted on September 30, 2012 by progzer

A month or two ago, a few of us went to watch a movie at a local theater. Before the movie begins, apart from showing trailers, they play the national anthem as well. While it plays, the screen shows an animated flag. After it was over, a friend and I started chatting, “Man! They must’ve used super computers back in the 80s to do that cloth simulation and rendering… and (polygon) edges are almost noticeable!”

Well, just yesterday, I came across a link talking about CSS custom filters while trying to read about and get an evaluation copy of Adobe Edge Animate. That led me to think back to the other day day and continue “…and now, something similar can be done on the web!”

So I went about trying to implement something based on the article with a waving flag in mind. Shaders are written in GLSL. The part that makes it flutter continuously is using the filters in a CSS animation. The rest is almost entirely the same as the original article described.

  /* Looping animation */
  @-webkit-keyframes flutter {
    from{
      -webkit-filter: custom(url('wobble.vs')                     /* wobble effect */ /* "filter:" if it makes it to spec */
      mix(url('color-swipe.fs') normal source-atop),  /* swipe effect */
      40 40,                                          /* mesh lines/cols */
      amplitude 60,                                   /* wobble strength */
      amount 0.0);                                    /* effect amount */
    }
    to{
      -webkit-filter: custom(url('wobble.vs')
      mix(url('color-swipe.fs') normal source-atop),
      40 40,
      amplitude 60,
      amount 1.0);
    }
  }

  .shaded:hover {
    /* name, duration, timing-function, delay, iteration-count, direction, fill-mode */
    -webkit-animation: flutter 2s ease-in-out 0s infinite alternate;
  }

I’ve hosted it here: http://pranav.tekchand.net/flag/flag.html
To see it in action, you need to get yourself a copy of Chrome Canary – the nightly build with experimental features. You also need to Enable CSS shaders in the chrome flags.

CSS Custom filters are currently a draft and not a standard, so things might change. As an example, Microsoft is [Aug 2012] proposing allowing other shading languages, the others seem to be on board with specifying GLSL in the standard.

Note: You seem to need to use/set Unix style line endings in your shader (vs/fs) files for it to work. In other words, use LF (\n) (Linux) as your EOL character, not CR LF (\r\n) (Windows) [nor just CR (\r) (Mac)]. It took me a while to guess this, since the Console in the Developer tools window didn’t show any messages and neither did the shader work while I was using Windows style line endings.

After this little experiment, I went on to research more, and came across the CSS Filter Lab. Check it out. Here’s another post which is more detailed.
PS: I also came across this text editor – Sublime Text 2 – for which there is a GLSL Shader Validator plugin (offers syntax highlighting and it’ll also try and compile the shader to let you know if you’ve got syntax errors!). The editor has many nice features – check out the website or get a free evaluation version.

Posted in Computers and Internet | 1 Comment

NIC or Gov dot in sites

Posted on September 15, 2012 by progzer

Or the title should be “desperately needed – UI, UX, Graphics and web designers – contact E-GOV and TCS.”

Disclaimer: This one may come off “ranty”. At the same time, I do appreciate the increased usage of technology being by many departments.
I had the pleasure of going through one of the many e-gov websites yesterday.
http://passportindia.gov.in/AppOnlineProject/welcomeLink
The first impression in my mind was the flashing of a few other sites built for the government – “Oh, another one of these”. Is there a specification which states that the delivered website must conform to some well defined “ugliness standard alpha”? Most of them seem to have a common theme of marquees, blinking text and just unclean looking interfaces/color combinations/gradients. Is there a pointy haired (or is it the more traditional “topi wearing” in this case) boss who says, “Okay team, build this website. Designers, your reference word is – ‘vomit’. Good luck.”

Looking  at the passport seva website, is our friend the marquee there? Check. Do we have blinking text? Check. Can we make it “colorful“? Certainly.

Passport Seva website screenshot

Passport Seva website
Ministry of External Affairs, Government of India

On this particular website, look at the logos at the bottom – left: Facebook, Twitter, YouTube, Flickr and right: National e-Governance Plan. Those and the “Expanding Passport Services” images all have some really bad compression artifacts. That’s just tardy. Upon previously sharing this screenshot, one comment I received was, “they probably scaled them up from a 10×10 pixel source image”. My guess is that they took a mobile phone, pointed it at a newspaper ad (and not the glossy kind) which had the logos on them, clicked a photo and then uploaded that to the production website. One thing that I’m slightly impressed with is that they’re using a css sprite for the logos! This screenshot was taken in IE 9 as the “best viewed in” text asks. In Firefox 15.0.1, the menu items on top occlude part of the “Ministry of …” text.

I used to think they might be giving out these projects to school kids (the one’s who’s parents pushed them to take “computer subjects” in school without any interest of their own). Must be a program by the education department to give students some practical experience. Oh well, that’s how they’ll learn and then improve. Wait! what’s that written in the footer of the website – “Maintained By TATA CONSULTANCY SERVICES“.

I’m going to make a mental leap from that and assume it was also developed by the same company. TCS is supposed to be quite a reputed firm. I find it hard to believe they shipped this. A team of professionals released this?! Where’s the pride that professionals are expected to have? “I cannot let something like this be credited to me. This is not a showcase of what I can do. I’m expected to do better. I will fix it and deploy, even if I work a few hours extra this week.”

I doubt there was a shortage of funds to get the team to deliver higher quality. I assume the government pays well for these projects. This is TCS (Rs.1411.95 on BSE as I write this), not a one person development shop (who learnt “HTML at NIIT(if you’re a fan, insert other generic school)” and was forced into taking this project) that’s low on funds to work harder to deliver higher quality.

This is just plain sad. I’m going to be optimistic and think that they will improve soon. At least the passport offices have the concept of giving an appointment rather than a bunch up at the entry point (another skill that we are great at) as was the case a few years ago. That’s an improvement.

Know of any similar “works of art”? Post away with links in the comments.

Posted in Computers and Internet | 4 Comments

Wizard of code [response]

Posted on September 5, 2012 by progzer

Recently, Hindustan Times got in touch with me for input on an article in their Education section related to a career in game development (programming). This was published today (September 05, 2012) on page 2 of the Education insert, titled Wizard of code (in their New Delhi edition). Although I’m glad to have my photograph printed in an article with that title, I don’t fully agree with the content of the article. I think it leaves out quite a bit of information which would be useful for people looking to learn or get a career in programming games. In fact, some content of the article might mislead or confuse students. The article seems to include information more specific to a career in game art which was posted in an earlier issue.

I’m attaching a copy of the article below with highlighted portions to elaborate. A link to the original article is: http://paper.hindustantimes.com/epaper/showlink.aspx?bookmarkid=ITFJOPDZ2205&amp;preview=article&amp;linkid=1705b0af-cfff-40c2-bec9-50354a6f2b54&amp;pdaffid=5ncoZjso4AlFtIgb4L6Vlg%3d%3d

Game development article highlighted

My views
“creates art” – A programmer does not create art. An artist does. There may be exceptions of one man teams or programmers that also happen to have learnt and practiced creating production quality digital art but those are exceptions, not the rule.

“all aspects of game development where visual art is required” – A programmer might work on (procedural) visual effects or tools to support them but writing “all aspects” is misleading. The latter part of statement about writing code to enforce rules of the game world (or system) in more accurate to what a programmer does.

“Meeting with art director” – Once again, a programmer might meet the art director on occasion but not every morning. S/he is more likely to meet the technical director, a lead programmer or other developers in her team every morning. This meeting would let the team know how development of the current feature they’re working on is going. Whether they’re stuck on something and need ideas or solutions. They’d discuss concerns related to one feature integrating or working correctly when brought together with components/features that others on the team are working on.

“6:30pm to 8:30pm” After committing code into version control in the evening (which would ordinarily take under 5 minutes), the person is either going to work on a personal research project or the team would get together to play some multi-player games! (This is not frowned upon). That should cover the two hour window mentioned in the article.

The Payoff section talks about becoming a senior game artist or later an art director. Instead this would be senior game programmer, lead programmer or technical director.

The Skills/Traits section mentions “An artistic bent of mind” – while it doesn’t hurt to have an artistic bent of mind, it’s more of a requirement for an artist. The section should include:
* A strong sense of logic and the ability to do research for coming up with solutions
* The ability to break a large problem down into smaller components/steps.
* Team skills – your components must work cohesively with those of others. Using version control (under-taught!) is critical for collaboration.
* Good communication skills, your code should be written in a way that makes it easy for team members to understand in case they need to modify parts to implement other features.

Getting There talks about studying “visual communication in fine arts“, once again, this seems like something more important for an artist. It talks about a taking courses in “animation“. Animation may mean many things in games (such as the code which animates a character which a programmer would be involved in) but the term, when used by schools, usually refers to animating digital assets. These courses teach students the creation of sprite frames for 2D animation (in tools like Photoshop/Flash etc) or the animation of 3D models (in tools like Max/Maya etc). While a little knowledge about using these tools may be handy since artists are going to be team mates of programmers on projects; the knowledge would help them be on the same page or communicate better but knowing detailed usage of these tools is not necessary for programmers. For a person would be like to be a game programmer, taking a course in “animation” may not be the best use of her time. S/he should concentrate on getting better at programming. This section should have been something on these lines:
You should code. Learning programming itself may be simple – what’s required is to practice it over and over to become masterful at it. You may enroll in a programming school (NIIT, Aptech, M/BSc, M/BCA etc) or use books or online resources to learn the basics, but that’s as far as it goes. Programming a lot make you start “thinking in the language” which is required. You may not even need a degree to become a highly paid developer if you truly learn to code. Though a school (getting a degree) offers a starting point and organized setting to learn in – and many prefer to learn in a peer group situation.
[See http://abstrusegoose.com/249 ]
“Joining an open source programming project online may also be a great way to learn more and it can showcase your skill. Community sites like Codeplex, BitBucket, GitHub and SourceForge are a few examples.” echos my views in the article.
Further, a skill which I feel is grossly under-taught (or not taught at all) in schools is using version control tools. These are critical to work in a team and offer benefits even on single person projects. Using tools such as Mercurial or Git is critical.

I’m glad that the article included the link to the Mercurial tutorial Hg Init. If just/even one student takes note of that article and starts using mercurial, I’d say the article was worth it!

My older (2008) post Getting into (programming) Games still has a lot of information which is still valid. Perhaps instead of the information on NintendoDS/Homebrew, learners might want to try similar exercises on Android/iOS/WP etc considering the mobile/smartphone penetration rate and the growing requirement for skilled developers on those platforms.

For what it’s worth, here’s the link to the older article on game art which shares a lot in common with the current article:
http://www.hindustantimes.com/HTNext/Education/Game-artists-are-in-demand/Article1-763522.aspx

Similar article for game artists

The post was re-blogged at:
http://www.consultingnetwork.co.in/wizard-of-code-the-response-by-pranav-tekchand/2543/

Posted in Computers and Internet, Press | 2 Comments

NodeJS

Posted on September 4, 2012 by progzer

A team had been evaluating using NodeJS for a turn based multi player game’s server. For learning, they were using the built in net api component. They manged to get a basic two player messaging system going, first with an HTML (with XMLHttpRequest) test-client, then a Flash/SWF test-client. They still seemed to be having intermittent issues with the system’s reliability and trying to create a second game room (so that 4 players are connected in all) was also problematic with occasional crashes.

To help sort out the issues, I started learning a little NodeJS by looking at the docs and experimenting with samples. At first I didn’t quite understand the createServer functionality, I kept thinking back in terms of socket programming (in C) that I had learnt many years ago. I then looked at the code base the team had for the server – I had looked at it once earlier with another developer and I asked him whether he tried adding a few traces to better explain/understand what socket was in play at various points in time. He had said that using console.log with JSON.stringify was crashing the program. The developer had somehow got it working by using a few global variables as hacks. Another issue was the socket being closed and re-connected once again when the SWF was embedded in the browser (as opposed to running it directly from the IDE).

This time I tried tracing the net and socket object in the echo server sample and the game server code base. Upon doing so, I ran into the crash:

"TypeError: Converting circular structure to JSON"

A little reading showed that (as the error itself almost always states) a circular structure is an object which contains a reference to itself in its properties (or somewhere down the chain – property’s property). If this exception weren’t caught, the existing stringify implementation would be stuck in an infinite loop (creating an infinitely long string).

I felt getting some form of trace was the quickest way to better understand what was going on in this program. After a quick search to see if there was anything equivalent to a “shallow stringify”, I hacked one up [Gist]:

/**
* Hack to work around "TypeError: Converting circular structure to JSON"
* which is seen when using JSON.stringify
* Intended to inspection/debugging purposes.
* Note: Will not display an Array in square brackets.
* Shows extra trailing comma before closing brace.
* @param obj
* @param [onlyProps] - Show only property names
* @param {String[]} [skipTypes=['function']] - array of types to trace only the type instead of value.
* @return {String}
*/
function shallowStringify(obj, onlyProps, skipTypes) {
var objType = typeof(obj);
if(['function', 'undefined'].indexOf(objType)>=0) {
return objType;
} else if(['string', 'number', 'boolean'].indexOf(objType)>=0) {
return obj; // will toString
}
// objType == 'object'
var res = '{';
for (p in obj) { // property in object
if(typeof(onlyProps)!=='undefined' && onlyProps) {
// Only show property names as values may show too much noise.
// After this you can trace more specific properties to debug
res += p+', ';
} else {
var valType = typeof(obj[p]);
if(typeof(skipTypes)=='undefined') {
skipTypes = ['function'];
}
if(skipTypes.indexOf(valType)>=0) {
res += p+': '+valType+', ';
} else {
res += p+': '+obj[p]+', ';
}
}
}
res += '}';
return res;
}
// Tests:
function ssTests() {
console.log('shallowStringify string: '+shallowStringify('TestString'));
console.log('shallowStringify number: '+shallowStringify(42));
console.log('shallowStringify boolean: '+shallowStringify(true));
console.log('shallowStringify Array: '+shallowStringify(['TestString', 42, true]));
//console.log('net.createServer\'s socket: '+shallowStringify(socket));
//console.log('net.createServer\'s socket: '+shallowStringify(socket, false, []));
}
view raw shallowStringify.js hosted with ❤ by GitHub

At first shallowStringify traced too much – function bodies which were properties of the socket object were also traced. I tweaked the helper to skip these (just trace the function’s name). This traced enough information to help identify which object was active where at various times.

Turned out that createServer offers functionality in a simpler manner or at a higher level than what I was thinking. The issue turned out to be the global variables that the developer had used. He too perhaps had been thinking in another language when he wrote the code. This is Javascript – it’s got closures and function scope. The handlers that he wrote for the events did not know which socket they were for.

// socket object available here.
// The handler was set up similar to:
client.on('data', onData);
// ...
function onData(data) {
  // handle data
}

Thanks to closures, the socket could be passed in.

// socket object available here.
// The handler was changed to up similar to:
client.on('data', function(data) { 
  onData(data, socket);
});
// ...
function onData(data, socket) {
  // handle data
}

By changing the code to pass in the socket like this, he got rid of the global variables and the code also began working for multiple game rooms. Plus everyone finally understood why the previous hack worked intermittently and why the new code worked correctly. As far as the double connection when the SWF was embedded in the browser was concerned, it turned out that the first request was for the cross domain policy file.

Posted in Computers and Internet, NodeJS | Leave a comment