5_elements_interactif_apprentissage – Centre de Thérapies Sion

<!DOCTYPE html>

<head>

<title>Pentagramme Didactique – 20 Modes (MTC + Homéopathie)</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif;

background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 50%, #3730a3 100%);

min-height: 100vh;

overflow-x: auto;

color: white;

}

.container {

display: grid;

grid-template-columns: 1fr 2fr 1fr;

gap: 1rem;

padding: 1rem;

min-height: 100vh;

max-width: 1400px;

margin: 0 auto;

}

.header {

grid-column: 1 / -1;

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(10px);

border-radius: 12px;

padding: 1rem;

margin-bottom: 1rem;

}

.panel {

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(10px);

border-radius: 12px;

padding: 1rem;

}

.modes-panel {

max-height: 80vh;

overflow-y: auto;

}

.modes-panel::-webkit-scrollbar {

width: 8px;

}

.modes-panel::-webkit-scrollbar-track {

background: rgba(255, 255, 255, 0.1);

border-radius: 4px;

}

.modes-panel::-webkit-scrollbar-thumb {

background: rgba(255, 255, 255, 0.4);

border-radius: 4px;

}

.mode-button {

width: 100%;

padding: 0.5rem;

margin: 0.25rem 0;

border: none;

border-radius: 8px;

background: rgba(255, 255, 255, 0.2);

color: rgb(191, 219, 254);

cursor: pointer;

transition: all 0.3s ease;

font-size: 0.75rem;

}

.mode-button:hover {

background: rgba(255, 255, 255, 0.3);

}

.mode-button.active {

background: rgb(59, 130, 246);

color: white;

}

.mode-button.special-saisons {

border: 2px solid rgb(34, 197, 94);

background: rgba(34, 197, 94, 0.2);

}

.mode-button.special-periodes {

border: 2px solid rgb(168, 85, 247);

background: rgba(168, 85, 247, 0.2);

}

.mode-button.special-climats {

border: 2px solid rgb(249, 115, 22);

background: rgba(249, 115, 22, 0.2);

}

.mode-button.special-liquides {

border: 2px solid rgb(6, 182, 212);

background: rgba(6, 182, 212, 0.2);

}

.mode-button.special-odeurs {

border: 2px solid rgb(236, 72, 153);

background: rgba(236, 72, 153, 0.2);

}

.progress-bar {

width: 100%;

height: 4px;

background: rgb(75, 85, 99);

border-radius: 2px;

margin-top: 0.25rem;

}

.progress-fill {

height: 100%;

background: rgb(34, 197, 94);

border-radius: 2px;

transition: width 0.3s ease;

}

.pentagram-container {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

text-align: center;

height: 100%;

}

.pentagram-svg {

max-width: 100%;

height: auto;

}

.drop-zone {

cursor: pointer;

transition: all 0.3s ease;

}

.drop-zone:hover {

stroke: white;

stroke-width: 3;

}

.placed-element {

pointer-events: none;

}

.element-circle {

width: 50px;

height: 50px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

margin: 0.5rem auto;

cursor: move;

transition: transform 0.2s ease;

border: 2px solid rgba(255, 255, 255, 0.5);

}

.element-rect {

width: 100%;

height: 40px;

border-radius: 8px;

display: flex;

align-items: center;

justify-content: center;

margin: 0.5rem 0;

cursor: move;

transition: transform 0.2s ease;

background: rgba(255, 255, 255, 0.9);

color: #333;

font-size: 0.75rem;

font-weight: bold;

padding: 0 0.5rem;

text-align: center;

}

.element-circle:hover, .element-rect:hover {

transform: scale(1.05);

}

.dragging {

opacity: 0.5;

}

.alert {

padding: 1rem;

border-radius: 8px;

margin: 1rem 0;

}

.alert-saisons {

background: linear-gradient(to right, rgba(34, 197, 94, 0.2), rgba(59, 130, 246, 0.2));

border: 1px solid rgb(34, 197, 94);

}

.alert-periodes {

background: linear-gradient(to right, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));

border: 1px solid rgb(168, 85, 247);

}

.alert-climats {

background: linear-gradient(to right, rgba(249, 115, 22, 0.2), rgba(239, 68, 68, 0.2));

border: 1px solid rgb(249, 115, 22);

}

.alert-liquides {

background: linear-gradient(to right, rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.2));

border: 1px solid rgb(6, 182, 212);

}

.alert-odeurs {

background: linear-gradient(to right, rgba(236, 72, 153, 0.2), rgba(168, 85, 247, 0.2));

border: 1px solid rgb(236, 72, 153);

}

.button {

padding: 0.75rem 1rem;

border: none;

border-radius: 8px;

cursor: pointer;

font-weight: 600;

transition: all 0.2s ease;

width: 100%;

margin: 0.25rem 0;

}

.button-green {

background: rgb(34, 197, 94);

color: white;

}

.button-green:hover {

background: rgb(22, 163, 74);

}

.button-blue {

background: rgb(59, 130, 246);

color: white;

}

.button-blue:hover {

background: rgb(37, 99, 235);

}

.button-red {

background: rgb(239, 68, 68);

color: white;

}

.button-red:hover {

background: rgb(220, 38, 38);

}

.legend {

background: rgba(0, 0, 0, 0.2);

border-radius: 8px;

padding: 1rem;

margin-top: 1rem;

display: flex;

justify-content: center;

gap: 1rem;

}

.legend-item {

text-align: center;

font-size: 0.75rem;

}

.legend-circle {

width: 20px;

height: 20px;

border-radius: 50%;

margin: 0 auto 0.25rem;

display: flex;

align-items: center;

justify-content: center;

font-size: 0.6rem;

}

.tooltip {

position: absolute;

background: rgba(17, 24, 39, 0.95);

border: 1px solid rgb(75, 85, 99);

border-radius: 8px;

padding: 1rem;

z-index: 1000;

max-width: 300px;

pointer-events: none;

display: none;

}

.progress-circle {

width: 48px;

height: 48px;

border-radius: 50%;

background: linear-gradient(135deg, rgb(59, 130, 246), rgb(168, 85, 247));

display: flex;

align-items: center;

justify-content: center;

border: 2px solid rgba(255, 255, 255, 0.3);

font-weight: bold;

font-size: 0.875rem;

}

.hidden {

display: none;

}

.text-xs {

font-size: 0.75rem;

}

.text-sm {

font-size: 0.875rem;

}

.text-lg {

font-size: 1.125rem;

}

.font-bold {

font-weight: 700;

}

.mb-2 {

margin-bottom: 0.5rem;

}

.mb-4 {

margin-bottom: 1rem;

}

.flex {

display: flex;

}

.items-center {

align-items: center;

}

.justify-center {

justify-content: center;

}

.justify-between {

justify-content: space-between;

}

.gap-2 {

gap: 0.5rem;

}

.gap-4 {

gap: 1rem;

}

.text-center {

text-align: center;

}

@media (max-width: 768px) {

.container {

grid-template-columns: 1fr;

padding: 0.5rem;

}

.header {

padding: 0.75rem;

}

.panel {

padding: 0.75rem;

}

</style>

</head>

<body>

<!– Header –>

<div>

Pentagramme Didactique – 20 Modes (MTC + Homéopathie)

</h1>

Placez les 5 éléments sur leurs positions du pentagramme

</p>

</div>

</div>

<!– Menu des modes –>

<h3 class= »font-bold text-sm mb-4 text-center »>🎯 20 Modes (0/20 ✓)</h3>

↕️ Faites défiler pour voir tous les 20 modes

</div>

<!– Pentagramme central –>

<div id= »elements-count »>0/100 éléments</div>

<div class= »text-xs » id= »modes-count »>0/20 modes terminés</div>

</div>

<!– Cercle de référence –>

<!– Pentagramme parfait – étoile à 5 branches –>

<!– Points du pentagramme – parfaitement équidistants –>

<!– Éléments placés (ajoutés dynamiquement) –>

</svg>

<!– Légende –>

</div>

</div>

<div>TERRE</div>

</div>

<div>MÉTAL</div>

</div>

</div>

<!– Palette des éléments –>

<h3 class= »font-bold text-sm mb-4 text-center »>🎯 Éléments à placer</h3>

<!– Progression –>

<div class= »text-center text-xs mb-2″ id= »remaining-count »>5 éléments restants</div>

</div>

<!– Boutons –>

<button class= »button button-green » id= »check-btn »>✅ Vérifier les réponses</button>

<button class= »button button-blue » id= »reset-btn »>🔄 Recommencer ce mode</button>

<button class= »button button-red » id= »reset-all-btn »>🗑️ Effacer tout</button>

</div>

<!– Tooltip –>

// Configuration des données

const elementsData = {

BOIS: {

nom: ‘BOIS’, couleur: ‘#228B22’, emoji: ‘🌱’,

organe: ‘Foie’, viscere: ‘Vésicule Biliaire’, diathese: ‘PSORE’,

patronRemede: ‘SULFUR’, systemeHormonal: ‘Androgènes’,

emotionEquilibree: ‘Bienveillance’, emotionPathologique: ‘Colère’,

tissus: ‘Tendons/Muscles’, dynamiquePathologique: ‘Stagnation du Qi’,

saveur: ‘Acide’, saison: ‘Printemps’, periodeVie: ‘Naissance / Enfance’,

climatPathogene: ‘Vent’, liquideOrganique: ‘Larmes’, odeur: ‘Rance’,

fonction: ‘Libre circulation du Qi, stockage du sang’,

manifestationExterne: ‘Ongles’,

aspectSpirituel: ‘Hun (âme éthérée)’, qualiteMentale: ‘Planification, décision, jugement’

FEU: {

nom: ‘FEU’, couleur: ‘#FF4444’, emoji: ‘🔥’,

organe: ‘Cœur’, viscere: ‘Intestin Grêle’, diathese: ‘SYCOSE’,

patronRemede: ‘KALIUM’, systemeHormonal: ‘Thyroïde’,

emotionEquilibree: ‘Joie’, emotionPathologique: ‘Surexcitation’,

tissus: ‘Vaisseaux’, dynamiquePathologique: ‘Vide Sang’,

saveur: ‘Amer’, saison: ‘Été’, periodeVie: ‘Adolescence / Jeunesse’,

climatPathogene: ‘Chaleur’, liquideOrganique: ‘Sueur’, odeur: ‘Brûlé’,

fonction: ‘Gouverne le sang et les vaisseaux, abrite le Shen’,

manifestationExterne: ‘Teint du visage’,

aspectSpirituel: ‘Shen (conscience)’, qualiteMentale: ‘Communication, expression, conscience’

TERRE: {

nom: ‘TERRE’, couleur: ‘#FFD700’, emoji: ‘🌍’,

organe: ‘Rate’, viscere: ‘Estomac’, diathese: ‘ADAPTATION’,

patronRemede: ‘MERCURIUS’, systemeHormonal: ‘Hypophyse/Cortex’,

emotionEquilibree: ‘Réflexion’, emotionPathologique: ‘Rumination’,

tissus: ‘Chair/Tissu conjonctif’, dynamiquePathologique: ‘Humidité-Glaires’,

saveur: ‘Doux’, saison: ‘Été tardif / Intersaison’, periodeVie: ‘Âge adulte / Maturité’,

climatPathogene: ‘Humidité’, liquideOrganique: ‘Salive’, odeur: ‘Parfumé / Douceâtre’,

fonction: ‘Transformation et transport, gouverne le sang’,

manifestationExterne: ‘Lèvres’,

aspectSpirituel: ‘Yi (intention, pensée)’, qualiteMentale: ‘Concentration, mémorisation, analyse’

METAL: {

nom: ‘MÉTAL’, couleur: ‘#C0C0C0’, emoji: ‘⚪’,

organe: ‘Poumon’, viscere: ‘Gros Intestin’, diathese: ‘TUBERCULINISME’,

patronRemede: ‘PHOSPHORUS’, systemeHormonal: ‘Cortex surrénalien’,

emotionEquilibree: ‘Intégrité’, emotionPathologique: ‘Tristesse’,

tissus: ‘Peau/Poils’, dynamiquePathologique: ‘Vide de Wei Qi’,

saveur: ‘Piquant’, saison: ‘Automne’, periodeVie: ‘Âge mûr / Déclin’,

climatPathogene: ‘Sécheresse’, liquideOrganique: ‘Mucus nasal’, odeur: ‘Poissonneux’,

fonction: ‘Gouverne le Qi et la respiration, diffusion et descente’,

manifestationExterne: ‘Poils’,

aspectSpirituel: ‘Po (âme corporelle)’, qualiteMentale: ‘Lâcher-prise, discernement’

EAU: {

nom: ‘EAU’, couleur: ‘#4169E1’, emoji: ‘💧’,

organe: ‘Rein’, viscere: ‘Vessie’, diathese: ‘LUÈSE’,

patronRemede: ‘AURUM’, systemeHormonal: ‘Oestrogène/sous-cortex/Thymus’,

emotionEquilibree: ‘Volonté’, emotionPathologique: ‘Peur’,

tissus: ‘Os/Moelles’, dynamiquePathologique: ‘Vide de Jing’,

saveur: ‘Salé’, saison: ‘Hiver’, periodeVie: ‘Vieillesse / Sagesse’,

climatPathogene: ‘Froid’, liquideOrganique: ‘Urine / Salive épaisse’, odeur: ‘Putride’,

fonction: ‘Stockage de l\’essence, gouverne l\’eau’,

manifestationExterne: ‘Cheveux’,

aspectSpirituel: ‘Zhi (volonté)’, qualiteMentale: ‘Sagesse, introspection’

}

};

const modes = [

{ key: ‘elements’, name: ‘Éléments’, emoji: ‘🔥’, items: [‘BOIS’, ‘FEU’, ‘TERRE’, ‘METAL’, ‘EAU’], desc: ‘Placez les 5 éléments sur leurs positions du pentagramme’, prop: null },

{ key: ‘organes’, name: ‘Organes’, emoji: ‘🫀’, items: [‘Foie’, ‘Cœur’, ‘Rate’, ‘Poumon’, ‘Rein’], desc: ‘Associez chaque organe à son élément’, prop: ‘organe’ },

{ key: ‘visceres’, name: ‘Viscères’, emoji: ‘🍃’, items: [‘Vésicule Biliaire’, ‘Intestin Grêle’, ‘Estomac’, ‘Gros Intestin’, ‘Vessie’], desc: ‘Associez chaque viscère à son élément’, prop: ‘viscere’ },

{ key: ‘diatheses’, name: ‘Diathèses’, emoji: ‘🧬’, items: [‘PSORE’, ‘SYCOSE’, ‘ADAPTATION’, ‘TUBERCULINISME’, ‘LUÈSE’], desc: ‘Placez les diathèses homéopathiques’, prop: ‘diathese’ },

{ key: ‘patrons’, name: ‘Patrons remèdes’, emoji: ‘💊’, items: [‘SULFUR’, ‘KALIUM’, ‘MERCURIUS’, ‘PHOSPHORUS’, ‘AURUM’], desc: ‘Associez les patrons de remèdes homéopathiques’, prop: ‘patronRemede’ },

{ key: ‘hormones’, name: ‘Systèmes hormonaux’, emoji: ‘🧪’, items: [‘Androgènes’, ‘Thyroïde’, ‘Hypophyse/Cortex’, ‘Cortex surrénalien’, ‘Oestrogène/sous-cortex/Thymus’], desc: ‘Placez les systèmes hormonaux correspondants’, prop: ‘systemeHormonal’ },

{ key: ’emotionsPos’, name: ‘Émotions équilibrées’, emoji: ‘😊’, items: [‘Bienveillance’, ‘Joie’, ‘Réflexion’, ‘Intégrité’, ‘Volonté’], desc: ‘Placez les émotions en équilibre’, prop: ’emotionEquilibree’ },

{ key: ’emotionsNeg’, name: ‘Émotions pathologiques’, emoji: ‘😰’, items: [‘Colère’, ‘Surexcitation’, ‘Rumination’, ‘Tristesse’, ‘Peur’], desc: ‘Placez les émotions en déséquilibre’, prop: ’emotionPathologique’ },

{ key: ’tissus’, name: ‘Tissus’, emoji: ‘🦴’, items: [‘Tendons/Muscles’, ‘Vaisseaux’, ‘Chair/Tissu conjonctif’, ‘Peau/Poils’, ‘Os/Moelles’], desc: ‘Associez les tissus gouvernés par chaque élément’, prop: ’tissus’ },

{ key: ‘dynamiques’, name: ‘Dynamiques pathologiques’, emoji: ‘⚡’, items: [‘Stagnation du Qi’, ‘Vide Sang’, ‘Humidité-Glaires’, ‘Vide de Wei Qi’, ‘Vide de Jing’], desc: ‘Placez les déséquilibres énergétiques typiques’, prop: ‘dynamiquePathologique’ },

{ key: ‘saveurs’, name: ‘Saveurs’, emoji: ‘👅’, items: [‘Acide’, ‘Amer’, ‘Doux’, ‘Piquant’, ‘Salé’], desc: ‘Associez les saveurs thérapeutiques’, prop: ‘saveur’ },

{ key: ‘saisons’, name: ‘Saisons’, emoji: ‘🌸’, items: [‘Printemps’, ‘Été’, ‘Été tardif / Intersaison’, ‘Automne’, ‘Hiver’], desc: ‘Placez les saisons selon la MTC’, prop: ‘saison’ },

{ key: ‘periodes’, name: ‘Périodes de vie’, emoji: ‘👶’, items: [‘Naissance / Enfance’, ‘Adolescence / Jeunesse’, ‘Âge adulte / Maturité’, ‘Âge mûr / Déclin’, ‘Vieillesse / Sagesse’], desc: ‘Placez les périodes de vie selon les 5 éléments MTC’, prop: ‘periodeVie’ },

{ key: ‘climats’, name: ‘Climats pathogènes’, emoji: ‘🌪️’, items: [‘Vent’, ‘Chaleur’, ‘Humidité’, ‘Sécheresse’, ‘Froid’], desc: ‘Placez les facteurs climatiques pathogènes’, prop: ‘climatPathogene’ },

{ key: ‘liquides’, name: ‘Liquides organiques’, emoji: ‘🌊’, items: [‘Larmes’, ‘Sueur’, ‘Salive’, ‘Mucus nasal’, ‘Urine / Salive épaisse’], desc: ‘Placez les liquides organiques selon les 5 éléments MTC’, prop: ‘liquideOrganique’ },

{ key: ‘odeurs’, name: ‘Odeurs’, emoji: ‘👃’, items: [‘Rance’, ‘Brûlé’, ‘Parfumé / Douceâtre’, ‘Poissonneux’, ‘Putride’], desc: ‘Placez les odeurs caractéristiques selon les 5 éléments MTC’, prop: ‘odeur’ },

{ key: ‘fonctions’, name: ‘Fonctions MTC’, emoji: ‘⚙️’, items: [‘Libre circulation du Qi, stockage du sang’, ‘Gouverne le sang et les vaisseaux, abrite le Shen’, ‘Transformation et transport, gouverne le sang’, ‘Gouverne le Qi et la respiration, diffusion et descente’, ‘Stockage de l\’essence, gouverne l\’eau’], desc: ‘Associez les fonctions physiologiques MTC’, prop: ‘fonction’ },

{ key: ‘manifestations’, name: ‘Manifestations externes’, emoji: ‘👁️’, items: [‘Ongles’, ‘Teint du visage’, ‘Lèvres’, ‘Poils’, ‘Cheveux’], desc: ‘Associez les signes externes visibles’, prop: ‘manifestationExterne’ },

{ key: ‘spirituel’, name: ‘Aspects spirituels’, emoji: ‘🧘’, items: [‘Hun (âme éthérée)’, ‘Shen (conscience)’, ‘Yi (intention, pensée)’, ‘Po (âme corporelle)’, ‘Zhi (volonté)’], desc: ‘Placez les aspects spirituels des 5 éléments’, prop: ‘aspectSpirituel’ },

{ key: ‘mental’, name: ‘Qualités mentales’, emoji: ‘🧠’, items: [‘Planification, décision, jugement’, ‘Communication, expression, conscience’, ‘Concentration, mémorisation, analyse’, ‘Lâcher-prise, discernement’, ‘Sagesse, introspection’], desc: ‘Associez les qualités mentales correspondantes’, prop: ‘qualiteMentale’ }

];

// État de l’application

let currentMode = ‘elements’;

let placedElements = {};

let globalProgress = {};

let draggedElement = null;

let showAnswer = false;

// Initialisation

document.addEventListener(‘DOMContentLoaded’, function() {

initializeModes();

updateDisplay();

setupEventListeners();

});

function initializeModes() {

const container = document.getElementById(‘modes-container’);

modes.forEach(mode => {

const button = document.createElement(‘button’);

button.className = ‘mode-button’;

button.id = `mode-${mode.key}`;

if ([‘saisons’, ‘periodes’, ‘climats’, ‘liquides’, ‘odeurs’].includes(mode.key)) {

button.classList.add(`special-${mode.key}`);

}

const score = globalProgress[mode.key] || 0;

const special = mode.key === ‘saisons’ ? ‘ ⭐’ :

mode.key === ‘periodes’ ? ‘ 🆕’ :

mode.key === ‘climats’ ? ‘ 🌪️’ :

mode.key === ‘liquides’ ? ‘ 🌊’ :

mode.key === ‘odeurs’ ? ‘ 👃NEW’ : »;

button.innerHTML = `

<span>${mode.emoji} ${mode.name}${special}</span>

<span>${score}/5 ${score === 5 ? ‘✓’ : »}</span>

</div>

</div>

button.addEventListener(‘click’, () => changeMode(mode.key));

container.appendChild(button);

});

}

function setupEventListeners() {

document.getElementById(‘check-btn’).addEventListener(‘click’, checkAnswers);

document.getElementById(‘reset-btn’).addEventListener(‘click’, resetCurrentMode);

document.getElementById(‘reset-all-btn’).addEventListener(‘click’, resetAllProgress);

// Setup drag and drop

setupDropZones();

}

function setupDropZones() {

[‘FEU’, ‘TERRE’, ‘METAL’, ‘EAU’, ‘BOIS’].forEach(position => {

const dropZone = document.getElementById(`drop-${position}`);

dropZone.addEventListener(‘dragover’, (e) => {

e.preventDefault();

});

dropZone.addEventListener(‘drop’, (e) => {

e.preventDefault();

if (draggedElement) {

placedElements[position] = draggedElement;

updateDisplay();

draggedElement = null;

}

});

}

function changeMode(modeKey) {

currentMode = modeKey;

placedElements = {};

showAnswer = false;

updateDisplay();

}

function updateDisplay() {

const mode = modes.find(m => m.key === currentMode);

// Update header

document.getElementById(‘mode-description’).textContent = mode.desc;

// Update mode buttons

document.querySelectorAll(‘.mode-button’).forEach(btn => {

btn.classList.toggle(‘active’, btn.id === `mode-${currentMode}`);

});

// Update mode alert

updateModeAlert(mode);

// Update palette

updatePalette(mode);

// Update pentagram

updatePentagram(mode);

// Update progress

updateProgress();

}

function updateModeAlert(mode) {

const alert = document.getElementById(‘mode-alert’);

const alertClasses = [‘alert-saisons’, ‘alert-periodes’, ‘alert-climats’, ‘alert-liquides’, ‘alert-odeurs’];

alert.className = ‘alert hidden’;

if (mode.key === ‘saisons’) {

alert.className = ‘alert alert-saisons’;

alert.innerHTML = ‘<div class= »font-bold text-sm »>🌸 MODE SAISONS ACTIVÉ</div><div class= »text-xs »>Correspondances traditionnelles en MTC</div>’;

} else if (mode.key === ‘periodes’) {

alert.className = ‘alert alert-periodes’;

alert.innerHTML = ‘<div class= »font-bold text-sm »>👶 MODE PÉRIODES DE VIE ACTIVÉ</div><div class= »text-xs »>Correspondances des étapes de la vie selon la MTC</div>’;

} else if (mode.key === ‘climats’) {

alert.className = ‘alert alert-climats’;

alert.innerHTML = ‘<div class= »font-bold text-sm »>🌪️ MODE CLIMATS PATHOGÈNES ACTIVÉ</div><div class= »text-xs »>Facteurs climatiques causant des déséquilibres en MTC</div>’;

} else if (mode.key === ‘liquides’) {

alert.className = ‘alert alert-liquides’;

alert.innerHTML = ‘<div class= »font-bold text-sm »>🌊 MODE LIQUIDES ORGANIQUES ACTIVÉ</div><div class= »text-xs »>Correspondances des sécrétions corporelles selon la MTC</div>’;

} else if (mode.key === ‘odeurs’) {

alert.className = ‘alert alert-odeurs’;

alert.innerHTML = ‘<div class= »font-bold text-sm »>👃 MODE ODEURS ACTIVÉ</div><div class= »text-xs »>Correspondances des odeurs corporelles selon la MTC</div>’;

} else {

alert.classList.add(‘hidden’);

}

function updatePalette(mode) {

const palette = document.getElementById(‘elements-palette’);

palette.innerHTML = »;

const usedItems = Object.values(placedElements);

const availableItems = mode.items.filter(item => !usedItems.includes(item));

availableItems.forEach(item => {

const element = document.createElement(‘div’);

element.draggable = true;

element.textContent = item;

if (mode.key === ‘elements’) {

element.className = ‘element-circle’;

element.style.backgroundColor = elementsData[item].couleur;

element.textContent = elementsData[item].emoji;

} else {

element.className = ‘element-rect’;

}

element.addEventListener(‘dragstart’, (e) => {

draggedElement = item;

element.classList.add(‘dragging’);

});

element.addEventListener(‘dragend’, (e) => {

element.classList.remove(‘dragging’);

});

palette.appendChild(element);

});

// Update remaining count

document.getElementById(‘remaining-count’).textContent = `${availableItems.length} éléments restants`;

// Update current progress

const progressPercent = ((5 – availableItems.length) / 5) * 100;

document.getElementById(‘current-progress’).style.width = `${progressPercent}%`;

}

function updatePentagram(mode) {

const svg = document.getElementById(‘pentagram’);

// Remove existing placed elements

svg.querySelectorAll(‘.placed-element’).forEach(el => el.remove());

// Add placed elements

Object.entries(placedElements).forEach(([position, item]) => {

const pos = getPositionCoords(position);

if (mode.key === ‘elements’) {

const circle = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘circle’);

circle.setAttribute(‘cx’, pos.x);

circle.setAttribute(‘cy’, pos.y);

circle.setAttribute(‘r’, ’25’);

circle.setAttribute(‘fill’, elementsData[item].couleur);

circle.setAttribute(‘stroke’, ‘white’);

circle.setAttribute(‘stroke-width’, ‘3’);

circle.classList.add(‘placed-element’);

const text = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘text’);

text.setAttribute(‘x’, pos.x);

text.setAttribute(‘y’, pos.y + 6);

text.setAttribute(‘text-anchor’, ‘middle’);

text.setAttribute(‘font-size’, ’20’);

text.setAttribute(‘fill’, ‘white’);

text.setAttribute(‘font-weight’, ‘bold’);

text.textContent = elementsData[item].emoji;

text.classList.add(‘placed-element’);

svg.appendChild(circle);

svg.appendChild(text);

} else {

const rect = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘rect’);

rect.setAttribute(‘x’, pos.x – 30);

rect.setAttribute(‘y’, pos.y – 18);

rect.setAttribute(‘width’, ’60’);

rect.setAttribute(‘height’, ’36’);

rect.setAttribute(‘rx’, ’12’);

rect.setAttribute(‘fill’, ‘rgba(255,255,255,0.9)’);

rect.setAttribute(‘stroke’, elementsData[position].couleur);

rect.setAttribute(‘stroke-width’, ‘3’);

rect.classList.add(‘placed-element’);

const text = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘text’);

text.setAttribute(‘x’, pos.x);

text.setAttribute(‘y’, pos.y + 3);

text.setAttribute(‘text-anchor’, ‘middle’);

text.setAttribute(‘font-size’, ‘9’);

text.setAttribute(‘fill’, ‘#333’);

text.setAttribute(‘font-weight’, ‘bold’);

text.textContent = item;

text.classList.add(‘placed-element’);

svg.appendChild(rect);

svg.appendChild(text);

}

// Add correction indicator if showing answers

if (showAnswer) {

const isCorrect = checkItemCorrectness(position, item);

const indicator = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘circle’);

indicator.setAttribute(‘cx’, pos.x + 35);

indicator.setAttribute(‘cy’, pos.y – 35);

indicator.setAttribute(‘r’, ’12’);

indicator.setAttribute(‘fill’, isCorrect ? ‘#10b981’ : ‘#ef4444’);

indicator.setAttribute(‘stroke’, ‘white’);

indicator.setAttribute(‘stroke-width’, ‘2’);

indicator.classList.add(‘placed-element’);

const checkText = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘text’);

checkText.setAttribute(‘x’, pos.x + 35);

checkText.setAttribute(‘y’, pos.y – 30);

checkText.setAttribute(‘text-anchor’, ‘middle’);

checkText.setAttribute(‘font-size’, ’12’);

checkText.setAttribute(‘fill’, ‘white’);

checkText.setAttribute(‘font-weight’, ‘bold’);

checkText.textContent = isCorrect ? ‘✓’ : ‘✗’;

checkText.classList.add(‘placed-element’);

svg.appendChild(indicator);

svg.appendChild(checkText);

}

});

}

function getPositionCoords(position) {

// Nouvelles coordonnées pour un pentagramme parfait

const coords = {

FEU: { x: 210, y: 60 }, // Haut

TERRE: { x: 335, y: 165 }, // Haut droite

METAL: { x: 335, y: 315 }, // Bas droite – DESCENDU

EAU: { x: 85, y: 315 }, // Bas gauche – DESCENDU

BOIS: { x: 85, y: 165 } // Haut gauche

};

return coords[position];

}

function checkItemCorrectness(position, item) {

const mode = modes.find(m => m.key === currentMode);

if (mode.key === ‘elements’) {

return item === position;

} else {

return item === elementsData[position][mode.prop];

}

function updateProgress() {

const totalModes = modes.length;

const completedModes = modes.filter(mode => globalProgress[mode.key] === 5).length;

const totalElements = totalModes * 5;

const completedElements = modes.reduce((sum, mode) => sum + (globalProgress[mode.key] || 0), 0);

const percentage = Math.round((completedElements / totalElements) * 100);

document.getElementById(‘global-progress’).textContent = `${percentage}%`;

document.getElementById(‘progress-display’).textContent = `${percentage}%`;

document.getElementById(‘elements-count’).textContent = `${completedElements}/${totalElements} éléments`;

document.getElementById(‘modes-count’).textContent = `${completedModes}/20 modes terminés`;

const currentScore = globalProgress[currentMode] || 0;

document.getElementById(‘mode-progress’).textContent = `Mode: ${currentScore}/5`;

// Update modes header

document.querySelector(‘.modes-panel h3’).textContent = `🎯 20 Modes (${completedModes}/20 ✓)`;

}

function checkAnswers() {

let correct = 0;

Object.entries(placedElements).forEach(([position, item]) => {

if (checkItemCorrectness(position, item)) {

correct++;

}

});

globalProgress[currentMode] = correct;

showAnswer = true;

// Update mode button

const button = document.getElementById(`mode-${currentMode}`);

const score = correct;

const special = currentMode === ‘saisons’ ? ‘ ⭐’ :

currentMode === ‘periodes’ ? ‘ 🆕’ :

currentMode === ‘climats’ ? ‘ 🌪️’ :

currentMode === ‘liquides’ ? ‘ 🌊’ :

currentMode === ‘odeurs’ ? ‘ 👃NEW’ : »;

const mode = modes.find(m => m.key === currentMode);

button.innerHTML = `

<span>${mode.emoji} ${mode.name}${special}</span>

<span>${score}/5 ${score === 5 ? ‘✓’ : »}</span>

</div>

</div>

updateDisplay();

}

function resetCurrentMode() {

placedElements = {};

showAnswer = false;

updateDisplay();

}

function resetAllProgress() {

globalProgress = {};

placedElements = {};

showAnswer = false;

// Reset all mode buttons

modes.forEach(mode => {

const button = document.getElementById(`mode-${mode.key}`);

const special = mode.key === ‘saisons’ ? ‘ ⭐’ :

mode.key === ‘periodes’ ? ‘ 🆕’ :

mode.key === ‘climats’ ? ‘ 🌪️’ :

mode.key === ‘liquides’ ? ‘ 🌊’ :

mode.key === ‘odeurs’ ? ‘ 👃NEW’ : »;

button.innerHTML = `

<span>${mode.emoji} ${mode.name}${special}</span>

</div>

</div>

});

updateDisplay();

}

</script>

</body>

</html>