Timothy Tembo

Image-based Survey Website (Work-Study Individual Project)

Image-based-Survey-Website

I individually worked on a Web development project in the School of Engineering at Simon Fraser University, from September to December last year. I researched on how effective image-based survey websites are compared to text-based surveys, for the elderly. The project was done using HTML5, CSS3, and PHP.

Text-based Survey HTML5 Code

text_based_code

I first created a text-based survey using HTML5. The code was styled using CSS3 code, so that it could look good. The code used the dataset of the motion sensors from the Center for Advanced Studies in Adaptive Systems (CASAS) website, in order to see how long a participant spent on a specific task. This data was in the form of a text file.

Text-based Survey Visualization

text_based_visualization

I first created a text-based survey using HTML5. The code was styled using CSS3 code, so that it could look good. the code used the dataset of the motion sensors from the Center for Advanced Studies in Adaptive Systems (CASAS) website, in order to see how long a participant spent on a specific task. The data was in the form of a text file.

Image-based Survey HTML5 Code

image_based_code

Image-based Survey Visualization

survey_websiter

I created the image-based survey, and included the downloaded clip art images in it. It was tricky because it is difficult to represent a 90 year old person from a 70 year old person by using a clip art image. Radio buttons were added at the bottom of each picture in order to allow the user to make a selection.

PHP Code

python_code

I finally added PHP code so that an email would be sent to my supervisor with a user's selection.

Reflection

This project helped me improve my web development and design skills. I learnt how to be very careful with the images that I presented to elderly people because some made them feel too old. Overall, the project made me realize how effective images are compared to just ordinary text in surveys.