Miscellaneous Other exciting work

Hogwarts Survivor

I individually designed and implemented a game that simulates how people struggle in an environment that does not align with their goal in the context of Harry Potter's magical world.

The simulation in this game's context is to be assigned into a house in Hogwarts (Slytherin) that contain cunning students while being righteous and brave (like Harry Potter). The player needs to go through several senarios and make choices on each step to complete the game. The variables they need to consider are: Integrity, Safety, Magic Skills and Friendship. See the diagram of the game below.

Game diagram for Hogwarts Survivor

When designing the system, I made sure that the game has five complex endings so that it rewards players' replays. I also constrained the scenarios to make the main conflict (Integrity and Safety) clear and left out irrelevant details. After generating feedbacks and updating the prototype, I implemented the system using HTML/CSS/Javascript and Bootstrap.

Demo of Hogwarts Survivor




.   .   .   .   .   .


WikiCompare

I individually designed and developed a platform that compares English and Chinese versions of Wikipedia. People interested in culture and encyclopedic resources could use this system to search and compare definitions of a subject in different cultural contexts.

An explanatory screenshot of WikiCompare's core part

The problem. Wikipedia is a free-access Internet encyclopedia that almost anyone could edit. Although it is a global website, Wikipedia has different versions of encyclopedias for different languages. Sometimes the definitions of the same subject differ from language to language, reflecting cultural differences among people who speak different languages.

The system. WikiCompare is a system that facilitates communication between English and Chinese versions of Wikipedia. Users of this system could go to the "Comparison" session and search for the English and Chinese definitions of a subject in Wikipedia. Both definitions will show up simultaneously and the user could choose to translate them to English or Chinese. After the comparison, the user could directly go to the actual Wikipedia site to edit the definition.

Demo of WikiCompare

I first designed the prototype in Axure and generated feedbacks from the professor and classmates. After updating the protype based on the feedbacks, I used HTML/CSS/Javascript, Bootstrap and PHP to implement the system.