Create complex surveys, obtain results and export data, all in one spot.

Male hand holding a phone with the BIONIC documentation visible on the screen.


BIObanks Netherlands Internet Collaboration (BIONIC) is an observational cohort study that aims to provide a platform to harmonize rapid phenotypic measures in Dutch biobank cohorts, and to link these phenotypic measures to existing biobank data.

A big part of the project is based on a digital questionnaire where focused questions are presented and gathered from the target audience.

My task was to develop a web application with which it is possible to design and build a fully functional questionnaire. After distribution, respondents can respond the answers through an interactive and dynamic interface and submit their responses through the platform.

The platform allows datamanagers and research assistants of cohorts to maintain an extensive system to build and distribute questionnaires with the following features:

  • Setting up new questionnaires and creating respondents accounts for administering the questionnaires
  • Setting up different cohort groups and data management accounts for the separation of collected data
  • Give statistical overviews and insight and export of collected data


This project needed a large and performant encrypted database where I chose to work with MariaDB and encrypt every response with a key. Since we had over 250.000 responses with a JSON structured response, every response was also gzipped to limit database size.

The survey creation, distribution and gathering interface was built from scratch in vanilla JavaScript and LESS. But a future iteration made me drop LESS for SCSS, because of its extensive featureset.

Overview of custom interaction elements for BIONIC
Since a varied target audience would be filling out the survey, design of the custom interaction elements were made with respondents of all age groups in mind.

Since the response data was really large, the database was queried in chunks at intervals so the system would still be responsive. When the whole dataset is retrieved, users are able to filter and export the data in multiple formats including CSV, XSL and SPSS.

Researches needed to create surveys from scratch, where answers could affect future questions (routing) and complex conditions could change the structure of the survey. So I came up with a custom solution: a custom survey structure syntax.

The custom BIONIC survey syntax structure hierarchy and code sample
The custom BIONIC survey syntax structure hierarchy and code sample.

The custom code syntax is based on XML and uses a document type definition (DTD) to declare the markup of the document. Opting for a custom code syntax instead of a conventional drag & drop interface came from two problems document structure and interactions are all in plain-text and can be easily edited, refactored and duplicated.

On the left you can see code written in the BIONIC syntax, and on the right the result: a fully functional survey presented on a phone
From code to survey. On the left you can see the code that generates the survey on the right, fully functional with custom conditions that evaluate when certain answers are given.


Projects with multiple challenges create opportunities for professional growth and require out-of-the-box thinking.

The web app was successfully deployed and multiple surveys has been filled out by over 176.000 respondents.

Did I spark your interest?

Let's work together! Drop me a line at: