Mental Health Factors – Drag and Drop
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif;
line-height: 1.5;
padding: 2rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
font-size: 1.5rem;
margin-bottom: 2rem;
}
.flasks-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-bottom: 2rem;
}
.flask-container {
display: flex;
align-items: center;
gap: 1rem;
}
.flask-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.flask-label {
background-color: #e5e5e5;
padding: 0.25rem 0.75rem;
border-radius: 2px;
font-size: 0.875rem;
width: 100%;
text-align: center;
}
.flask {
width: 120px;
height: 180px;
border: 2px solid #ccc;
border-radius: 4px;
background-color: white;
padding: 0.5rem;
}
.flask[data-state=”mental-illness”] {
background-color: #fee2e2;
}
.factors-container {
display: flex;
flex-direction: column;
gap: 0.25rem;
align-items: center;
}
.flask-status {
font-size: 0.875rem;
text-align: center;
font-weight: 500;
}
.flask-description {
font-size: 0.875rem;
text-align: center;
max-width: 200px;
}
.arrow {
font-size: 2rem;
color: black;
}
.factors {
display: flex;
flex-direction: column;
gap: 1rem;
}
.factor {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: move;
font-size: 0.875rem;
}
.factor-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.factor-icon.genetic {
color: #3b82f6;
}
.factor-icon.environmental {
color: #ef4444;
}
.factor-icon.protective {
color: #eab308;
}
.dropped-factor {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.flasks-grid {
grid-template-columns: 1fr;
}
.flask-container {
justify-content: center;
}
}
Proof of concept – Drag and Drop marbles and stars
Flask 1
Unaffected
Jar is not full
Obstetric complications
Head injury
➔
Flask 2
Unaffected
Jar is not full
Start street drugs
Relationship breakup
Stressful move
➔
Flask 3
Mental illness
Jar is full
Flask 4
Mental illness
Jar is full
Reduce stress
Stop street drugs
Start antipsychotic medication
➔
Flask 5
Unaffected
Jar is not full
Continue meds
Good nutrition
Enough sleep
Exercise
➔
Flask 6
Unaffected
Jar is not full
●
Genetic vulnerability factor
★
Environmental vulnerability factor
⚠
Protective factor
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
const factor = event.target;
event.dataTransfer.setData(‘text/plain’, factor.dataset.type);
}
function drop(event) {
event.preventDefault();
const flask = event.target.closest(‘.flask’);
const factorsContainer = flask.querySelector(‘.factors-container’);
if (!flask || !factorsContainer) return;
const factorType = event.dataTransfer.getData(‘text/plain’);
const factor = document.createElement(‘div’);
factor.className = ‘dropped-factor’;
let icon;
switch (factorType) {
case ‘genetic’:
icon = ‘●’;
factor.style.color = ‘#3b82f6’;
break;
case ‘environmental’:
icon = ‘★’;
factor.style.color = ‘#ef4444’;
break;
case ‘protective’:
icon = ‘⚠’;
factor.style.color = ‘#eab308’;
break;
default:
return;
}
factor.textContent = icon;
factorsContainer.appendChild(factor);
// Update flask status based on factors
const factorCount = factorsContainer.children.length;
const statusElement = flask.parentElement.querySelector(‘.flask-status’);
if (statusElement) {
const [stateElement, fullElement] = statusElement.children;
fullElement.textContent = `Jar is ${factorCount > 5 ? ‘full’ : ‘not full’}`;
}
}