ChildWin Elab

ChildWin Elab

LaravelVue.JsMySQL
View Website
The Winchester child and family psychology lab aims to research children’s and adolescents’ social, emotional, and cognitive development with the aim of improving psychological wellbeing. They needed a site to collect this research more easily and connect them with potential research participants.

The Winchester Child and Family Psychology Lab

The Winchester Child and Family Psychology Lab

This research site was a chance to practice using Bulma CSS and an alternative method of content management. The founder of the organisation Dr Ana Anzar wanted an easy way to collect contact details for research participants and to gain more survey results. To make the process as easy as possible, I first wrote the site as a pure front end project with placeholder text and images before building out means of updating the content.

Editable Text

I made editable content blocks with Vue components that would take server rendered content and become editable text when clicked on. Each component is passed a key which relates to a row in an elements data table and can be used to update that element using an axios API request.

Edit process

Edit process

Rich text formatting

Rich text formatting

In addition to just editing text, I also wanted to add the option to be able to add links, bullet points and format text with bold and italic settings. I used the JavaScript package tiptap to implement this which is a renderless text formatting component that allows you to build custom formatting tools as well alongside the elements that are provided with their extensions package.

Edit bubble

As shown, this configuration makes use of multiple classes to build out options in the editor button as well as a history module to allow for undo and redo with CTRL Z and CTRL Y.

This editor config also enables you to process HTML data pulled from the component before sending it to a database. Once the data has been saved, it can be rendered as HTML into a Vue component and styled using CSS selectors rooting from the container.

Creating Studies

Creating Studies

The study building process also uses the on page approach the other fields use. I build the study page as a form with a switch to archive the study should administrators want to take it off the site without loosing results.