Tools UtilizedOn developing this application, I used FileMaker Pro Advanced 14 as the main platform, since it provided an easy way to construct database and organize table relations. Furthermore, it provided easy ways to build a user interface and powerful script tools to control the actions. I started this project 4 years ago, when I know nothing about coding, script languages or databases at all. I started from scratch and learned the basic knowledge of databases and scripts through FileMaker's comprehensive references. It got me through the toughest times. This is where I first learned the basics of coding, such as "if" conditions and "for" loops. Trying to make sense of something completely new can be really difficult, but once I made it through, going forward became a lot easier. In the following couple of years, I gradually learned HTML, CSS, Javascript, jQuery, and a little AppleScript. I further used these languages to add new features to the application. It started as a pet project through which I simply manage all the test questions available. Now it's a full functional application where not only I can conduct research on test articles and use scripts to perform automated tasks that greatly increases my productivity, but also the students can take advantage the carefully-designed Step-by-Step exercises to practice test questions and test-taking rhythms. This project witnessed my personal growth throughout the years, and showed me a new world where learning to code can be so powerful and transformative. You can go through the main features of the application from below, and download a demo file to try out most of the functions.
|
|
Functions for Teachers
Manage and Categorize Test ArticlesAs I mentions before, the initial purpose for developing such an application is to manage the existing test articles and questions for myself. Managing all GMAT test articles and questions from multiple sources can be challenging. Of course, I can use the old fashioned Excel Spreadsheet, but the lack of correlating tables and intuitive user interface encouraged me to challenge myself a little bit more for better results. And I have not been disappointed! Through this well-designed user interface on the left, teachers can add, delete or manage existing entries with ease. Furthermore, every article and question can be labeled easily and clearly. Some labels, including Paragraph Count, Sentence Count, Word Count and Time limit are auto-calculated through predefined functions. All these properties and variables made possible further calculations and script actions. With every article broken up into sentences through scripts, for instance, even an html code that defines every sentence in a passage as a <span> can also be auto-generated for the passage, making it much easier for further development (see Functions for Students).
|
Create Visual AidsIt could be a challenge for teachers to explain the reason why a particular choice in a questions over the phone, let alone over instant messages. Sometimes an image is worth a thousand word. Teachers can use this platform to easily create visual aids that help them explain clearly to students what's wrong with each incorrect choices
|
Functions for Students
|
Choose the Source from which You PracticePracticing GMAT Reading Comprehension is not easy for students, as most of the test prep materials are paper-based, and do not simulate the screen-based test taking environment. Students often find reading on a screen more difficult than on paper, and a transition between the two can be even harder. With a well-organized and clean database at hand, it was not too hard for me to turn my project into an exercising app for the students once I saw their struggle. Since all the articles and question are already labeled and categorized, students can easily find the article he/she wishes to practice and enjoy the side-by-side user interface, which is also adopted in real test taking environment.
|
Look for Real GMAT Sentence Examples for Unfamiliar VocabularySince all articles are already broken into sentences (see how in Developing Process), it is possible to utilize this resource to help students with their vocabulary building. From my experience as an English teacher, a majority of students seek to build a larger vocabulary by stuffing their brains with all the Chinese meanings of a given English word. This out-of-context understanding of such a word could lead to consequences such as future misinterpretation and inability to accurately use that word in real-life situations. By constructing a list of most frequently used words in GMAT and extending the list with their lemmas (also see how in Developing Process), students could simply click their mouse and see real GMAT sentence examples for these words, with the word already highlighted. And sentences can be further placed into the context of the article to enhance the understanding of the word.
|
|
|
Step-by-Step ExercisingEver since I developed the step-by-step exercises with Kaomanfen developers (see my other project All in One for more details), I had always wanted to bring this function into my project as well. And I did. Students now can enjoy step-by-step exercises offline on their own laptops in a wider range of articles (constructing a step-by-step exercise on Kaomanfen.com for each article needs up to 3 hours, much longer compared with 10 minutes on my own platform). Furthermore, all of their practice history will be stored in the same table as regular exercise data, which made further analysis easier and more accurate. Since FileMaker is fundamentally a database application and do not allow mouse interactions inside a data field, I have to use a Web View that is provided in FileMaker, and write HTML, CSS and Javascript code in Web Viewer to allow mouseClick interactions with each individual sentences in a passage (see how in Developing Process).
|
Developing Process
Data ConstructionThis project started simple, with only 2 tables and 20 fields altogether. Yet with four years of development and extension, it now consists of 26 inter-related tables, 316 fields and 28,000+ records of all sorts of data. Through the process, I learned the fundamental knowledge of database and its tables and fields.
|
Creating and Managing Table RelationsWith so many tables in one database, it was a bit challenging for me - a rookie in database - to manage their relationships. I even had to take courses online (lynda.com) to learn about the concept of primary keys, one-to-many relationships, many-to-many relationships, etc. I am really glad, and a little amazed that all things worked out eventually.
|
|
Learning to Write ScriptsNow that I look back, I realized that learning a scripting language on FileMaker is probably not the smartest choice for someone who is completely new to coding like me. The structure of it's for loop is not the easiest thing to understand in this world. However, I am also very grateful for choosing FileMaker, as it provides a very powerful debugging tool for developers, and it's functions' and scripts' references are amazing. Trying out Processing (Java) and javascript later in life made me realized how lucky I was to encounter such great support at the very beginning.
|
FileMaker scripts can also help me complete simple but repeating tasks with great efficiency. When combined with AppleScript, it can perform even more complicated tasks such as creating screenprints of multiple records automatically, or copying contents from other non-FileMaker files into the fields following the same logic. Scripting makes work easy, and even sometimes fun.
|
|
Constructing Vocabulary ListAs mentioned above, I made a vocabulary list based solely on GMAT Reading Comprehension articles. I first exported a text document containing all the GMAT articles from the database, and fed it to the corpus software Wordsmith. The original result indicated that there are 6,897 "distinct" words in all 186 GMAT articles. However, a close examine of the list revealed that a lot of the words were simply different form of the same word, like "word" and "words". I then used a lemma list from the Wordsmith website to automatically combine these words together into one entry. I further removed high frequency daily words from the list by using the "Match" function to remove all the words in the daily words' list from the website. I finished the list by hand-removing all the words that occurred in GMAT articles for only once. The remaining list consists of only 819 distinct words.
|
Breaking up Articles into SentencesAs I majored in English Language and Literature in college, I had the chance to do some research in corpuses, and form an understanding that the only way to do thorough research on a language is to break a corpus into sentences, phrases, or even words. I was very excited to learn that FileMaker provides a bunch of built-in functions that allows me to play with the texts. I tried really hard to write a script to automatically break articles into sentences and in the meantime maintain the sequences of the sentences in the passage. This is where I learned to use the functions such as Left(), Middle(), Position(), and PatternCount(). They proved to be very useful not only for this particular script, but also for many of my later-developed features. And what I got from this little development is a complete sentence database for all GMAT articles. It proved to be very useful for my research and, most importantly, made possible the feature through which students can click on individual sentences to indication where they located the relevant information, as now I can construct each sentence into a separate <span></span> in html.
|
|
|
Debugging the Code in Web ViewerSince I was using the Web Viewer feature in the FileMaker, which does not provide great customization and debugging experience, integrating HTML into FileMaker can be challenging. The major challenges I faced at the time were the following:
With all the challenges in mind, I decided to code in Sublime Text and paste the code into the Web Viewer for testing after all code works out in the browser first. As I only needed to code a certain part of the interface, only part of the code on the left was need in the Web Viewer for FileMaker. But for testing purposes, I have to make it look like the real thing to see whether everything is functional, so I constructed the entire user interface from scratch in html and css anyway. Useless as it may be right now, it will one day become very handy, as I plan to learn PHP in the coming year and reconstruct my application into a web-based platform. This can be the foundation of a new era. On the left is a segment of code that I wrote to capture and display which sentence/s were selected by the user and report back to Filemaker. |
Try it out!
I have constructed a special version of what I've developed so far. For testing purposes, I translated most of the user interface into English. However, there are still a few elements that either were too hard to translate, or would cause script errors if translated. Therefore, some of it may still be in Chinese. I apologize in advance for your inconvenience.
Note: This application is developed and intended to be used under Mac OS X environment. Interface under Windows environment might be weird and buggy. |
Other Projects
Curriculum PagesA redesign of existing curriculum pages to encourage daily uses by solving the UX and data structural issues. Responsibility in the team: UX designer.
|
Senior ProjectA web app design to improve the workflow between mentors and students on Senior Projects at Ross School. Responsibility in the team: UX designer.
|
Other RLS ComponentsA bird eye view of other RLS components I had worked on in 2018 as the UX designer.
|
Professional DevelopmentA custom designed online learning platform to accommodate special need of Ross School for its Professional Development and Certificate program. Responsibility in the team: lead instructional designer, UX designer.
|
Evolution of ConsciousnessAn example course produced under Professional Development project that consists interactive and innovative activities that facilitates learning. Responsibility in the team: lead instructional designer, UX designer.
|
Interactive GlossaryAn interactive glossary that facilitates the learning in Professional Courses and highlights the connections between related concepts in the same contest. Responsibility in the team: UX designer.
|
GMAT All in OneGMAT courses completely redesigned for E-learning environment and online community. A complete commercial project with full and successful implementation. More than 5,000 students enrolled up to Dec, 2018. Responsibility in the team: instructor, instructional designer, content developer, UX designer.
|
|