Movie Picker Project Analysis, Part I

The Movie Picker project was originally done for a course I took. We had to create a dynamic JavaScript menu system that presents the user with a series of questions that change depending on the answers given. Once enough information is gathered, the result is displayed. I chose movies as the subject for my menu system. Given the specific requirements of the project, it's more of a demonstration rather than something that most people would find useful.

Nevertheless, I decided to revisit this project several years later with my more advanced JavaScript skills. It was completely rewritten and made more flexible / reusable. I decided to release this version under the MIT license in case anyone finds something useful. The following is an overview of how the code works.

Global Variables

All of the core code is contained in a closure, so as to not leak any variables into the global scope. There are, however, two global variables that are created: UTILS and MOVIEPICKERDATA.

Since the project does not rely on any JavaScript libraries, I decided to separate the basic "utility" functions (cookies, Ajax, animation, etc.) from the core logic of the program, essentially creating a mini JavaScript library. These functions are accessible as properties of the UTILS global variable.

Similarly, the data (selection choices and results) is separated from everything else and is stored in the MOVIEPICKERDATA global variable. This division allows updates to be applied selectively to different parts of the project.

Data

The data is formatted as JSON. Each question is an object with a question property that holds the question text and a choices property which is an array containing the text for each choice. In addition, this object also has a property for each choice. This property name matches the choice text from the choices array.

These properties are also question objects. However, if the choice should produce a result instead of another question, the property should be an object that describes the movie selection with title, studio, year and link properties. Note that an image is displayed from the img directory that matches the title (spaces are replaced with underscores).

Here is an example of a menu with a single question and two choices:

var MOVIEPICKERDATA = {
    "question": "Choose a genre",
    "choices": [
        "Action",
        "Comedy"
    ],
    "Action": {
        "title": "Action Movie",
        "studio": "Movie Studio 1",
        "year": 2011,
        "link": "http://www.imdb.com/title/ttxxxxxxx/"
    },
    "Comedy": {
        "title": "Comedy Movie",
        "studio": "Movie Studio 2",
        "year": 2010,
        "link": "http://www.imdb.com/title/ttxxxxxxx/"
    }
};

If the Comedy choice resulted in another question, it would look like this:

// ... code omitted ...
    "Comedy": {
        "question": "What year?",
        "choices": [
            "2010",
            "2011"
        ],
        "2010": {
            "title": "Comedy Movie 1",
            "studio": "Movie Studio 2",
            "year": 2010,
            "link": "http://www.imdb.com/title/ttxxxxxxx/"
        },
        "2011": {
            "title": "Comedy Movie 2",
            "studio": "Movie Studio 2",
            "year": 2011,
            "link": "http://www.imdb.com/title/ttxxxxxxx/"
        }
    }
};

Data Manipulation

Since the data is exposed through a global variable, it can be manipulated by other scripts on the page. In other words, the questions, choices and results can be changed on the fly. Similarly, you can create "expansion" scripts to build on and expand on the data already available. The only requirement is that this script is executed after the original data script. You may also want to supply an image for any newly created or modified choices.

Here are some examples of expansion scripts:

// add another question to the Action choice
MOVIEPICKERDATA.Action = {
    question: 'What format?',
    choices: [
        '35mm',
        'IMAX'
    ],
    '35mm': {
        title: 'Action Movie 1',
        studio: 'Movie Studio A',
        year: 2009,
        link: 'http://www.imdb.com/title/ttxxxxxxx/'
    },
    IMAX: {
        title: 'Action Movie 2',
        studio: 'Movie Studio B',
        year: 2008,
        link: 'http://www.imdb.com/title/ttxxxxxxx/'
    }
};
// modify the title of the first Action movie
MOVIEPICKERDATA.Action['35mm'].title = 'Awesome Movie Title!';
// add another choice to the Action - format question
MOVIEPICKERDATA.Action.choices.push('3D');
MOVIEPICKERDATA.Action['3D'] = {
    title: 'Cool 3D Movie',
    studio: 'Another Studio',
    year: 2011,
    link: 'http://www.imdb.com/title/ttxxxxxxx/'
};

Summary

This post covered the different parts of the Movie Picker project (main, utils, data), the data structure and data manipulation. Part II will discuss the selection logic and browser differences.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>