Copyright (C) 2023 Michigan State University

This package is part of CIAS 3.0.

CIAS 3.0 is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

CIAS 3.0 is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with CIAS 3.0. If not, see https://www.gnu.org/licenses/gpl-3.0.html.

CIAS 3.0

CIAS 3.0 platform source code is divided into two separate repositories:

• Frontend package - current
• Backend package

Digital Behavioral Health Interventions Made Easy

CIAS stands for Computerized Intervention Authoring System. CIAS gives you the ability to create and manage multi-session interventions without writing a single line of code. With this robust platform, you can develop and deliver interventions, collect data, and collaborate with colleagues all in one place.

User-Friendly Features

The CIAS platform has a variety of features to support a broad range of interventions and approaches, including:

• Variety of question types to choose from
• An animated narrator to act as a guide
• The ability to speak out loud using high-quality text to speech
• Optional quick exit feature for participant safety
• Automatic translation into over 100 languages
• Tailored reports for participants and clinicians
• Custom and tailored SMS messaging
• Branching and Randomization
• Synchronous natural language reflections and summaries
• Scheduled session sending
• Custom charts for data visualisation
• HIPAA and WCAG 2.0 compliant
• Timeline Followback Method Assessment (TLFB)
• Secure Live chat connecting participants with a peer, CHW, BHC, etc.
• Integrations with 3rd party systems:
  • CAT-MH^TM
  • Epic on FIHR (forthcoming)

For more information about CIAS 3.0 features please see https://www.cias.app.

Full Version Available for Free*

Our goal is for cost to never be a barrier. This code is available to anyone at no cost. Further, Michigan State University currently provides an instance of CIAS 3.0 that is available at low or no cost for non-commercial use by researchers at universities or non-profit research institutions. Immediate access is always provided without charge and without paperwork, and CIAS remains free for unfunded projects. (edited)

*A small annual fee will be requested for funded projects.

For more information, or to request access to the MSU instance of CIAS, please see https://www.cias.app/ or contact CIAS@msu.edu

Install & Start

This is a frontend package only. For CIAS to work, you need the backend package too. You can find it on GitHub here. Follow the instructions there to set up the backend project first.

Requirements:

• Node.js (v14 or later)*
• compatible npm version (v6 or later)*

*we suggest using node.js version management utility, for instance nvm

Steps to install & start the project:

1. Clone or download the repository
2. Go into the root directory of the project
3. Copy the contents of .env.example to .env (create this file)
4. (Optional) Adjust environmental variables in that exists in .env
5. (Optional) Run npm install to install all required dependencies => run only the first time or when dependencies change
6. Run npm start to run the project. When you see a command "webpack built ..." the project is ready
7. Open http://localhost:4200 (by default) in the internet browser
8. If you have the backend project set up too, you can start using CIAS 3.0. If you seeded the database while setting up the backend project, you can now log in to one of the accounts that has been automatically created. Please see documentation of the backend project for more information

Cypress

• Open Cypress dashboard npm run cy:open
• Run Cypress tests npm run cy:test

Colors

COLOR NAME DETECTOR

To name colors in the source code, please do not use custom, made-up names and let's use some kind of color name detector. There are many detectors, so to have uniform results let's use that one: COLOR NAME DETECTOR as it shows not only the name, but also the group/hue of a color (useful when there are similar colors).

Inner HTML

To render HTML elements use interweave library. See DOCS. It safely renders HTML elements (tries to protect against XSS).

MJML

What is MJML?

A tool for creation of responsive html templates. It handles gotchas of most modern and known email clients.

Take a look at official documentation.

3 examples can be found in mjml/examples directory. Each of them introduce new features, so they should be checked in this order : MjBasicComponent, MjImageText, MjLayout.

For more complex examples, have a look at standard MJML components code such as mj-carousel.

Getting started

A step-by-step tutorial is available here .

• Go into mjml directory
• npm install inside
• Add your components inside components folder
• Components have to be added in .mjmlconfig
• Use your own component in templates/*.mjml
• npm run build to build, or npm start if you want to watch recompile on change you make (to your component or to templates/*.mjml)
• The result will be outputted in html/*.html

Information for backend developers

• Generated htmls are in mjml/html directory

Available Templates

1. no-button
   
2. with-button
   
3. with-button-and-other-information
   
4. with-button-and-description
   
5. with-button-and-other-information-and-description
   

Tags

For easier maintaining and searching for proper sections and variables, there are tags in .html files:

1. LOGO START and LOGO END
2. HEADER START and HEADER END
3. MAIN-TEXT START and MAIN-TEXT END
4. BUTTON START and BUTTON END
5. FOOTER START and FOOTER END
6. OTHER INFORMATION START and OTHER INFORMATION END
7. DESCRIPTION START and DESCRIPTION END

Variables:

• no-button: {HEADER_TEXT}, {MAIN_TEXT}, {FOOTER_TEXT},
• with-button: {HEADER_TEXT}, {MAIN_TEXT}, {BUTTON_TEXT}, {BUTTON_URL}, {FOOTER_TEXT},
• with-button-and-other-information: {HEADER_TEXT}, {MAIN_TEXT}, {BUTTON_TEXT}, **{BUTTON_URL} **, {FOOTER_TEXT}, {DESCRIPTION},
• with-button-and-description: {HEADER_TEXT}, {MAIN_TEXT}, {BUTTON_TEXT}, {BUTTON_URL}, * *{FOOTER_TEXT}**, {OTHER_INFORMATION},
• with-button-and-other-information-and-description: {HEADER_TEXT}, {MAIN_TEXT}, {BUTTON_TEXT}, * *{BUTTON_URL}**, {FOOTER_TEXT}, {DESCRIPTION}, {OTHER_INFORMATION},

In all templates there is a common {LOGO_URL} variable.

Styling in email templates

You will need to add proper html tags with styles to style inline text within email variables. For example, MAIN_TEXT variable can be:

  You have been invited to <span style='color: #c866ea;'>Screening Test</span>.

To add a new line inside a text block (eg. MAIN_TEXT), please add a double break, for example:

  You have been invited to <span style='color: #c866ea;'>Screening Test</span>.<br /><br />Click below to start the session.

Report templates are in template directory

There is template.html with all the sections etc. and sample_template.html file to show example of a report.

Contributors

Michał Grzelak

Piotr Sokoliński

Michał Śnieć

Jakub Zygmunt

Sebastian Flejszman

Bartosz Kępka

Klara Jędrzejewska

Maciej Górski