Vital Signs 2.0 (VS) is an educational citizen science project consisting of an extensive Drupal website created by Image Works in Portland, Maine for the Gulf of Maine Research Institute (GMRI) and funded by the Hewlett Foundation and a generous in-kind donation of services by Image Works.

The VS project provides students, teachers, scientists, and citizen scientists with the tools to monitor environmental conditions throughout Maine. The project includes a structured central data repository, tools and protocols for identifying, mapping, tracking and analyzing the occurrence and spread of invasive species into and around the state. Beginning in fall 2009, these resources and supporting programs are being utilized on the laptop computers provided to all Maine middle school students and will be made available to all interested parties starting early 2010.

The project's site is composed of 13 original custom Drupal modules, approximately 2 dozen Drupal core modules, more than 40 contributed modules, Google Maps and other web services. In order to give back to the community that made this project possible, we are releasing the full source code for the website under the GPL license and adding it to the Drupal.org project repository.

Participation

Vital Signs targets and encourages participation from three primary groups of users: 7th & 8th Grade students in Maine, individuals with an interest in studying, monitoring and preventing the spread of invasive species, and research scientists studying invasive species.

User generated content


Vital Signs provides its community with a number of avenues for contributing content to the site. These include:

  • Species Observations
  • Projects such as presentations, videos, and podcasts
  • Curriculum Resources
  • Peer Review and comments
  • Expert Review and comments
  • Community Policing
  • Forums
  • Commenting

Development Process

The development team consisted of 2 Drupal developers, an Adobe AIR/Flex prototype developer, 2 graphic designers, an information architect/project manager, and of course, the client. We followed an agile process where we tried to do releases for the client review every 1-2 weeks. This allowed us to have continuous feedback and adjust the path that the website was taking. We used the open source MantisBT bug tracker for all of the issue tracking and change requests.

Each developer/themer worked on a local copy of the website that was checked out from Subversion using periodic database snapshots from the live site that the client was entering content on.

Early in development when radical changes were expected, we set up an installation profile that would allow us to modify core settings in the system (such as content type structures) and quickly wipe/recreate the site. We only used and maintained the install profile until the site reached a stable state and the client was ready to populate it with real content.

When doing releases, we had two websites setup on our server at Rackspace: a test site for reviewing and testing new functionality, and a staging site on which the client was entering the actual site content that would eventually become the production site. During our 1-2 week release cycle, we would update the test site by simply logging in via SSH and issuing an “svn update” command on the test website. This would sync the site with the latest version of the source code. Any database modifications required by the new release were built into the update scripts for the Vital Signs module.

When we hit each major milestone in the project, we would do a brief code freeze and deploy the current version of the site in the test environment to the staging environment using “svn update”.

Performance and Hosting

The site is hosted on a single server at Rackspace. The primary things we did to optimize performance were to write clean, efficient, and solid code and take advantage of the performance boost provided by APC.

Amazingly, even though we have a large number of modules installed and enabled, the per-request memory footprint of the site is relatively low at 25-40MB, depending on the page.

Challenges and solutions

We faced a number of challenges in the development of Vital Signs. Some of the significant ones include:

Non-admin users managing user accounts with the same e-mail address
One of the primary requirements of the Vital Signs site was that teachers could create user accounts for their students without using any email address belonging to the students. For example, teacher John Smith may decide to break his class up into 4 teams. He would create 4 student user accounts that all have his email address. Additionally, he may want to re-use these 4 team user accounts across multiple classes, so there needed to be a way for him to manage all user accounts that he created.

Our solution to this challenge was a mixture of contributed modules and custom administration screens. We use the SharedEmail module to allow creating multiple user accounts with the same email address. We then added a hidden profile field to link the student user accounts to the teacher user account so that we can reliably determine which users the teacher had permission to manage. Finally, we created a custom user account management screen that the teacher uses during the setup of their field trips. This custom administration screen gives the teacher the ability to either add previously created user accounts to the new trip or to create completely new user accounts.

Role-specific user profile fields
Related to the above challenge, we also needed the ability to define different tabs of information on the user profile screen based on the role of the user. For example, teachers have a tab asking information about their teaching background that does not display for students.

We addressed this challenge relatively easily using the ProfileRole module allowing us to define which roles had access to each of the tabs on the user profile screen.

Preventing some users from editing their profile while allowing others
In the case of student user accounts, since there was the possibility of them being shared between multiple students of a single teacher we had to find a way to disable and hide certain fields on the student's profile page. For example, we didn't want the students to be able to see or change the teacher's email or the account password.

We solved this problem by using a combination of the UserProtect module and some custom theming. The UserProtect module allowed us to define additional permissions to allow editing of individual profile fields on a per user role basis. We then took it a step further, removing the locked out profile fields from the page display for those user accounts.

Specialized custom e-mail notifications
There were several specialized e-mail notification requirements of the site that required some custom development. For example, when a visitor submits a species observation the site needed to be able to inspect the values entered in the CCK fields of the content to determine which species was looked for and then search through the profile fields of all of the user accounts in the Expert Review role to determine which users are the reviewer of that species.

We solved this challenge by extending the Notifications and Messaging modules to provide custom notification hooks and custom message templates. When an observation is published, the site triggers the notification hook which inspects the observation for the species and then searches the list of expert reviewers for the appropriate user accounts. It then passes control back to the built-in notifications module to queue notification emails to those select user accounts.

Conditionally changing some text on the site based on the age of the visitor
In order to comply with the COPPA laws and current best practices for users under the age of 13, we needed a process for conditionally changing some of the text on the site for registered users. For example, on the user registration page we conditionally change the labels on the e-mail field to say “Your parent's e-mail address” rather than “Your e-mail address”. We also make a similar change to the Terms of Service acceptance checkbox label.

The solution to this was using hook_form_alter to dynamically modify the text of page elements based on the birthdate of the visitor.

Allowing a save & continue capability on incomplete content
Some of the data entry forms can be quite long so we needed a way for users to be able to save their data in an unpublished state even if some required fields had not been completed.

The solution to this was to add a custom “Save & Continue” button to the data entry forms that took advantage of the SkipValidation module to conditionally disable Drupal’s form validation routines and allow us to save incomplete nodes to the database.

Disabling anonymous user page caching on select paths
There are three pages in the Explore Data section of the site that allow visitors to search for and visualize observations in a variety of ways. Since this was a dynamic search, we couldn't allow the pages to be cached by Drupal but we also didn't want to disable caching altogether for the entire site.

The solution was to install the CacheExclude module which allowed us to define a set of site paths that would always be excluded from the Drupal page caching.

Modules used

Obviously a site of this complexity uses many contributed and custom modules. Below is the full list of modules used on the site.

Core Modules:
Block, Blog, Color, Comment, Contact, Database logging, Filter, Forum, Help, Menu, Node, Path, Profile, Search, Statistics, Syslog, System, Taxonomy, Tracker, Trigger, Update status, User

Contributed Modules:

Custom Modules

  • Vital Signs : General utility module
  • VS Calendar: Handles the Calendar of Events
  • VS Data Entry: Handles everything related to the student and teacher data entry process
  • VS Explore Data: Handles the display and functionality of the Explore Data section of the site
  • VS Export: Allows users to export the site observation data as a CSV file
  • VS Flags: Create custom flags for site visitors to notify the administrator of inappropriate photos or potentially invalid data such as GPS locations in the middle of the ocean.
  • VS My Vital Signs: All of the custom blocks used on the My Vital Signs dashboard page
  • VSORE: All of the customizations related to the Shared Curriculum Resources area of the site
  • VS Project Bank: All of the customizations related to the Shared Projects area of the site
  • VS Review: Custom Sidebar blocks and notification hooks related to peer and expert review
  • VS Science Notebook: Customizations related to creating Science Notebook content
  • VS User: Handles all user customization and permissions

Base Theme: Zen

Credits

This web design and development work was done by the following team at Image Works:

Misty Mallar – Information Architect, Interaction Designer & Project Manager
Shawn Smiley – Senior Software Engineer
Liem Khuu – Software Developer
Dana Hutchins – Creative Director & User Experience Designer
Larry Needle – Prototype Designer
Jake Frederick – Adobe AIR Prototype Developer
Heather Peters – Usability Testing
Clare Potter – Usability Testing

For more information on Image Works, please visit us at www.imagewks.com.

Additional contributions to the website design and development were made by GMRI staff including:

Sarah Morrisseau – VS Coordinator
Sarah Kirn – VS Manager
Petri Tuohimaa – VS Graphic Designer
Alan Lishness – GMRI Chief Innovation Officer
Alexa Dayton – VS Community Specialist

For more information on the Vital Signs project, please contact the Gulf of Maine Research Institute at http://vitalsignsme.org/contact.

Conclusion

We researched a number of open source CMS offerings before starting this project and without a doubt we can say that Drupal was and is the best platform for building this site. It easily supported our needs early in the project for rapid prototyping and radical system changes as we refined the project. The flexibility and customizability of the Drupal platform is one of its strongest features and a critical factor in the success of this website.

Finally, we’d like to thank everyone in the Drupal community. It's an obvious statement, but worth making again; without your support, initiative, ingenuity and hard work creating the exceptional web development resource that is Drupal, this project would never have been possible.

Comments

lennart’s picture

As a science journalist I am *very* impressed with your site. And its potential.

Best regards,
Lennart

PepeMty’s picture

...and I have to say that impressive is an understatement.. ;-)

Warm regards from sunny México!
Pepe
:-)

yeeloon’s picture

Subscribing...

rsantoni’s picture

You have a small navigational problem on the site.

For example, on this page http://www.vitalsignsme.org/blog/drupal-home-run

The breadcrumb "About Us" link points the visitor to http://www.vitalsignsme.org/what-vs-signs, which renders a page not found.

Based on the link in other pages of the site, it should be linking here: http://www.vitalsignsme.org/what-vital-signs

I have not looked any deeper for errors. Right now, I am very happy and impressed with the bulk of the site in terms of technologies used, etc.

I am working on a complex project right now, but if I have a chance later on, I will check the site again and send more feedback.

Congrats on a great site.

Rafael

shawn_smiley’s picture

Thanks for your feedback and pointing out the broken link. The breadcrumb now points to the correct page.

Thanks,

Shawn

lefnire’s picture

Can't wait to get my hands on the source code, wanna see your code solution to gmap with a view column! Going to be at install profiles?

Thomasr976’s picture

In my previous life I was a Biologist and have to say this is a terrific resource. Have you shared it with the US Fish and Wildlife Service at http://www.fws.gov/invasives/ and the Canadian FWS at http://www.cws-scf.ec.gc.ca/index_e.cfm.

You have created a terrific template and this could be replicated in all 50 States and in Canada as well. Besides the government, what university or Biology Department wouldn't be interested in what you have done.

Would recommend that you consider using the SEO Reports and SEO Friend module to help get the word out.

Also, liked the theme which shows how Zen can be used to create a pleasant design. Thanks for showing this to us.

dirkca’s picture

I fully agree. I am wondering how one would go about to find out what it would take to build and your project? Would your theme be available? Could this be a install profile? I am not necessarily asking for free handouts, just looking for a starting point as we are about to work on a science project site too.

shawn_smiley’s picture

I'm still waiting on the Drupal site moderators to complete their review and enable the project in CVS. Once that is done the full source code for all of the modules and the Theme will be available under the GPL license.

We did have an install profile early on in the project, but abandoned that about half way through. So it will not be included in the source code since it's horribly out of date and doesn't work with the current version of the modules.

Most of the work we were originally doing in an install profile have been moved into the actual install routines for each module.

Thanks,

Shawn

dirkca’s picture

This is great news. It enables groups like ours to build on first class projects. Thank you for making this available to the community.

PepeMty’s picture

...and I don't intend to offend anybody in any way.

As I said before, I'm a biologist by academic background, and knowing that your modules will be accessible is a Darwin's sent...

This project has given me some ideas that I think I might replicate here in México, as most biologists/conservationists/interested people know, is a global power.

Thank you Shawn, really, dearly...

Warm regards from sunny México!
Pepe
:-)

Misura’s picture

Please, please, please put a slogan under "Site Information" so that when you go to the site you don't see an ugly title of " Vital Signs | ".. Maybe even "Science. Education. Community" as I see in the footer ;) Also, a favicon change would probably be a good idea!

shawn_smiley’s picture

Thanks for the feedback and pointing out that we forgot to change the favicon. I've changed the page title on the home page and uploaded a favicon.

Thanks,

Shawn

johnhanley’s picture

Given the number of contributed modules in use the site is pleasantly responsive.

Who's the web host and are you doing any special in the form of optimization?

shawn_smiley’s picture

We didn't need to do much in the way of performance optimizations. The site does run on a dedicated server. Other than that, the only optimizations we have in place are APC and the built-in Drupal caching capabilities.

Thanks,

Shawn

maxichka’s picture

Hello Shawn,

Very impressive site.

Did you leave the Drupal favicon on site on purpose?

Why not replace it with the logo from Vital Signs?

Maxim

shawn_smiley’s picture

We missed uploading a favicon to the site. It's there now. Thanks for pointing that out.

Thanks,

Shawn

adrianmak’s picture

Could you write more about how to display a form for asking visitor's dob before process to actual user registration form

malexandria’s picture

This is a great right up and I'm always impressed by what Drupal can do but the shear number of modules and tables they generate turns me off all the time. How do you plan on maintaining upgrades with this many modules and won't this eventually make your site sluggish once you start getting decent traffic?

_gramur’s picture

I would like to know about the module management as well it just seems like quite a few modules are being used for that site and I am wondering what steps you might you go about taking in upgrading (if there are plans to upgrade to Drupal 7 for example). Other than that, I find the site quite fast and very responsive and I personally like the design overview of the site.

_
Founder
Sivius.ca

shawn_smiley’s picture

Now that the site is live, we only plan on deploying critical security updates to Drupal core or any of the contributed modules. We have no plans at the moment for upgrading to Drupal 7.

Our module update process goes something like this:

  • We get notified by the site of a critical update
  • We download the update and test it out in our development environment
  • If the update tests out successfully then we add the update to our Subversion repository
  • Finally, we schedule some downtime to ssh to the server and run an "svn update" on the website followed by hitting update.php

Of course, this is just our maintenance procedure. New features go through a similar process though.

Thanks,

Shawn

kumbi’s picture

great mix of modules. really interested in the originals :|

Ashford’s picture

about updates
I like your thought on doing only the security updates. I see where that could save a lot of maintenance time.

about performance
Performance has been a problem on our Drupal web site, the Texas Master Naturalist Heartwood Chapter. Quite often the site bogs down where the page load resembles a dial up connection even though you are using a DSL connection. We do collect and store data to track each volunteer's hours of service and continuing education. I've never totally understood when and what to cache nor how to automatically clear the cache. I just now looked at your performance solution, the APC module. Even the module's descrption text went past my knowledge level.

about modules
Thank you for writing up what you used and why you used it. I'm a 3-year Drupal user, but I still pore through these articles to improve my understanding of how best to implement Drupal for our organization.

Congratulations on your technological accomplishment. It's a major success story.

Ashford

Sree’s picture

Nice work!

-- Sree --
IRC Nick: sreeveturi

themegarden.org’s picture

Great job, congratulations.

Also, thanks for excellent article.

parsiya’s picture

Just Wanted to congratulate you on your beautiful site :)

shawn_smiley’s picture

I'm still waiting for the CVS Account to be approved(http://drupal.org/node/693440), so in the mean time I've added a page to the live site that contains links to download the source code for our custom modules and theme.

You can get the source code at http://vitalsignsme.org/source-code

Thanks,

Shawn

adrianmak’s picture

Thank you for releasing custom modules and theme. That's great for other drupaler to learn.

How to create a multiple step form in user registration ?

shawn_smiley’s picture

Take a look at the file /vitalsigns/modules/vsuser/includes/page_handlers/user_register.inc

That file handles the multi-step user registration.

Basically it's done almost exactly the same way as any other multistep form. The only real difference is that you need to unset the default form submit handlers in each step until you get to the last step of the registration (see lines 72-85 of the above source code)

Here is a partial extract of the code:

function vsuser_user_register_alter(&$form, &$form_state) {
  if ($is_step_2) {
    $form['submit']['#value'] = t('Create new account');
    $form['#validate'][] = 'user_register_validate';
    $form['legal']['legal_accept']['#element_validate'][] = 'checkbox_validate_validation';
    _vsuser_set_registration_settings($form_step);
  }
  else {
    unset($form['#submit']);
    unset($form['#validate']);
    unset($form['legal']['legal_accept']['#element_validate']);
    $form['submit']['#value'] = t('continue');
    $form['submit']['#skip_validation'] = TRUE;
    $form['#submit'][] = 'vsuser_user_register_submit';
  }
}

Thanks,

Shawn

targoo’s picture

Thank you for sharing your custom modules but they dont seem do be working properly (install) on a clean drupal installation.
Have you got any news for your CVS Account ?
Thanks !!

shawn_smiley’s picture

Make sure you have all of the modules listed in the case study installed and enabled. The info files may not have every required module listed as a dependency. What problems are you seeing when you install the modules in a clean site?

Unfortunately our request to post the module code on drupal.org was declined due to our licensing the modules under the GPL v3 rather than GPL v2.

The source code will continue to be available on the Vital Signs website though.

Thanks,

Shawn

targoo’s picture

Thanks for you first reply !

All the modules required are installed and the VS core seem to be completly installed if I check the log :

'Starting installation of Vital Signs module "Core"...', 'a:0:{}', 6, '', 'http://localhost:7777/drupal-vitalsign-6.16/admin/build/modules/list/con...', 'http://localhost:7777/drupal-vitalsign-6.16/admin/build/modules', '::1', 1268663653);
'Starting import of content types for module @module from path @path', 'a:2:{s:7:"@module";s:10:"vitalsigns";s:5:"@path";s:24:"content_type_definitions";}', 7, '', 'http://localhost:7777/drupal-vitalsign-6.16/admin/build/modules/list/con...', 'http://localhost:7777/drupal-vitalsign-6.16/admin/build/modules', '::1', 1268663653);
...
...
'Completed installation of Vital Signs module "Core".', 'a:0:{}', 6, '', 'http://localhost:7777/drupal-vitalsign-6.16/admin/build/modules/list/con...', 'http://localhost:7777/drupal-vitalsign-6.16/admin/build/modules', '::1', 1268663677);

But after the core installation I get a blank page for all my request as an authenticated user with the following error in my php log file :

[15-Mar-2010 14:57:49] PHP Fatal error: Class 'VSPermissionConstants' not found in /Applications/MAMP/htdocs/drupal-vitalsign-6.16/sites/all/modules/custom/vitalsigns/vitalsigns.module on line 43

$items['get_popup_help'] = array(
'title' => 'Get popup help',
'access arguments' => array(VSPermissionConstants::AccessContent),
'page callback' => 'vitalsigns_get_popup_help',
'type' => MENU_CALLBACK,
);

Any ideas will be welcome ;-)

l0me’s picture

First of all,

a heartful thanks for sharing the source code of such a feature-rich and well thought through website. I have taking notes on a few hurdles I have encountered in my attempt of making use of the source code, customizing it to fit a research project I have volunteered for. Looking forward sharing these when project is concluded.

I am fairly new to Drupal and would like to ask for some guidence as I have trouble enabling the block feature that guides a user in submitting observations for review.

The block is called "block-vsdataentry-so_tab" and serves as the step-by-step wizard for user submissions of observations for review and I cannot get it to appear and I may be overlooking something really simple, but I am blind as to what the reason could be.

Grateful for any assistance on this matter