For this project we were asked to build a website for a new (fictitious) cinema in Rotterdam. One particular point of interest was these pricing-model we were asked to implement. Ticket-prices were based on the position of the seat in the theater: seats in the middle of the theater were the most expensive, but there was also a growing premium towards the back of the theater. However, there were 3 sizes of theaters. And not every show would use the same prices and distribution of prices. For instance, the middle of the theater isn’t as valuable for a romantic comedy, as it is for a special effects driven blockbuster.
Using JavaScript I built a model that would map out the different prices into a table, dividing the prices in color-coded ranks. In the prototype I used input fields for all relevant variables, so that the client would be able to set up different profiles for different types of shows. Those profiles were then entered into a database, to be used on the final website.
On the website, the client wanted to give visitors the opportunity to get pricing-information about their favorite seats. To accomplish this, I added a slider set that would grey-out the seats that are of no interest to the visitor.
Here’s a link to the final version of the Bioscoop Filmpje website. The assignment also called for a mobile version and a version that could be used on a touchscreen terminal. These versions all rely on the same basic code, with browser detection doing the initial switch for mobile browsers.
For this project students were also asked to make “Making of” video. Here’s what we came up with: