Spaces:
Running
Running
File size: 15,605 Bytes
0a5272c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 |
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TOPICOP by SYNAPSE</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.progress-bar {
height: 8px;
transition: width 0.4s ease;
}
.option-selected {
background-color: #3b82f6;
color: white;
border-color: #3b82f6;
}
.result-bar {
height: 24px;
transition: width 1s ease;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen font-sans">
<div class="container mx-auto px-4 py-8 max-w-3xl">
<!-- Header -->
<header class="text-center mb-8">
<h1 class="text-3xl font-bold text-blue-600 mb-2">TOPICOP by SYNAPSE</h1>
<p class="text-gray-600">Questionnaire d'évaluation de la corticophobie</p>
</header>
<!-- Progress Bar -->
<div class="mb-8">
<div class="flex justify-between mb-2">
<span class="text-sm font-medium text-gray-700">Progression</span>
<span id="progress-text" class="text-sm font-medium text-gray-700">0/12</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="progress-bar" class="progress-bar bg-blue-600 rounded-full" style="width: 0%"></div>
</div>
</div>
<!-- Questionnaire Form -->
<form id="questionnaire" class="space-y-10">
<!-- Questions will be inserted here by JavaScript -->
</form>
<!-- Results Section (Hidden Initially) -->
<div id="results" class="hidden mt-12 bg-white p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-center text-blue-600 mb-6">Résultats du Questionnaire</h2>
<!-- Score Global -->
<div class="mb-8">
<h3 class="text-lg font-semibold mb-4">Score Global: <span id="total-score" class="text-blue-600">0</span>/36 (<span id="total-percent">0</span>%)</h3>
<div class="w-full bg-gray-200 rounded-full h-6 mb-2">
<div id="total-score-bar" class="result-bar bg-blue-600 rounded-full" style="width: 0%"></div>
</div>
<p id="severity-text" class="text-sm font-medium"></p>
</div>
<!-- Categories -->
<div class="grid md:grid-cols-2 gap-6">
<!-- Croyances -->
<div class="bg-blue-50 p-4 rounded-lg">
<h3 class="text-lg font-semibold mb-3 text-blue-700">Croyances</h3>
<p class="text-3xl font-bold text-blue-600 mb-2"><span id="croyances-score">0</span>/18</p>
<div class="w-full bg-blue-200 rounded-full h-4">
<div id="croyances-bar" class="result-bar bg-blue-600 rounded-full" style="width: 0%"></div>
</div>
</div>
<!-- Craintes -->
<div class="bg-purple-50 p-4 rounded-lg">
<h3 class="text-lg font-semibold mb-3 text-purple-700">Craintes</h3>
<p class="text-3xl font-bold text-purple-600 mb-2"><span id="craintes-score">0</span>/18</p>
<div class="w-full bg-purple-200 rounded-full h-4">
<div id="craintes-bar" class="result-bar bg-purple-600 rounded-full" style="width: 0%"></div>
</div>
</div>
</div>
<div class="mt-8 text-center">
<button id="restart-btn" type="button" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
<i class="fas fa-redo mr-2"></i>Recommencer
</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const questions = [
"Les dermocorticoïdes passent dans le sang.",
"Les dermocorticoïdes favorisent les infections.",
"Les dermocorticoïdes font grossir.",
"Les dermocorticoïdes abîment la peau.",
"Les dermocorticoïdes ont des effets sur ma santé future.",
"Les dermocorticoïdes favorisent l'asthme.",
"J'ai peur d'en mettre sur certaines zones où la peau est plus fine comme les paupières.",
"Je n'en connais pas les effets secondaires mais j'ai peur des dermocorticoïdes.",
"J'ai peur d'utiliser une dose trop importante.",
"Je me traite le plus tard possible.",
"Je me traite le moins longtemps possible.",
"J'ai besoin d'être rassuré(e) vis-à-vis du traitement par dermocorticoïdes."
];
const options = ["jamais", "parfois", "souvent", "toujours"];
const form = document.getElementById('questionnaire');
let currentQuestion = 0;
let answers = Array(questions.length).fill(null);
// Create question elements
questions.forEach((question, index) => {
const questionDiv = document.createElement('div');
questionDiv.className = `question ${index !== 0 ? 'hidden' : ''}`;
questionDiv.dataset.index = index;
const questionText = document.createElement('h3');
questionText.className = 'text-lg font-medium text-gray-800 mb-4';
questionText.textContent = `${index + 1}. ${question}`;
questionDiv.appendChild(questionText);
const optionsDiv = document.createElement('div');
optionsDiv.className = 'flex flex-wrap gap-2 justify-between';
options.forEach(option => {
const optionBtn = document.createElement('button');
optionBtn.type = 'button';
optionBtn.className = 'flex-1 min-w-[100px] py-2 px-3 border border-gray-300 rounded-md text-sm font-medium hover:bg-gray-50 transition';
optionBtn.textContent = option;
optionBtn.dataset.value = options.indexOf(option);
optionBtn.dataset.option = option;
optionBtn.addEventListener('click', function() {
// Remove selected class from all options in this question
optionsDiv.querySelectorAll('button').forEach(btn => {
btn.classList.remove('option-selected');
});
// Add selected class to clicked option
this.classList.add('option-selected');
// Save answer
answers[index] = parseInt(this.dataset.value);
// Update progress
updateProgress();
// Show next question after short delay
setTimeout(() => {
showNextQuestion();
}, 300);
});
optionsDiv.appendChild(optionBtn);
});
questionDiv.appendChild(optionsDiv);
form.appendChild(questionDiv);
});
// Navigation buttons
const navDiv = document.createElement('div');
navDiv.className = 'flex justify-between mt-8';
const prevBtn = document.createElement('button');
prevBtn.type = 'button';
prevBtn.className = 'px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition hidden';
prevBtn.innerHTML = '<i class="fas fa-arrow-left mr-2"></i>Précédent';
prevBtn.id = 'prev-btn';
prevBtn.addEventListener('click', showPreviousQuestion);
const nextBtn = document.createElement('button');
nextBtn.type = 'button';
nextBtn.className = 'px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition hidden';
nextBtn.innerHTML = 'Suivant<i class="fas fa-arrow-right ml-2"></i>';
nextBtn.id = 'next-btn';
nextBtn.addEventListener('click', showNextQuestion);
const submitBtn = document.createElement('button');
submitBtn.type = 'button';
submitBtn.className = 'px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition hidden';
submitBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i>Voir les résultats';
submitBtn.id = 'submit-btn';
submitBtn.addEventListener('click', showResults);
navDiv.appendChild(prevBtn);
navDiv.appendChild(nextBtn);
navDiv.appendChild(submitBtn);
form.appendChild(navDiv);
// Update navigation buttons initially
updateNavButtons();
function updateProgress() {
const answeredCount = answers.filter(a => a !== null).length;
const progressPercent = (answeredCount / questions.length) * 100;
document.getElementById('progress-bar').style.width = `${progressPercent}%`;
document.getElementById('progress-text').textContent = `${answeredCount}/${questions.length}`;
}
function updateNavButtons() {
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const submitBtn = document.getElementById('submit-btn');
prevBtn.classList.toggle('hidden', currentQuestion === 0);
nextBtn.classList.toggle('hidden', currentQuestion === questions.length - 1);
submitBtn.classList.toggle('hidden', currentQuestion !== questions.length - 1 || answers[currentQuestion] === null);
}
function showNextQuestion() {
if (currentQuestion < questions.length - 1) {
document.querySelector(`.question[data-index="${currentQuestion}"]`).classList.add('hidden');
currentQuestion++;
document.querySelector(`.question[data-index="${currentQuestion}"]`).classList.remove('hidden');
updateNavButtons();
} else if (currentQuestion === questions.length - 1 && answers[currentQuestion] !== null) {
showResults();
}
}
function showPreviousQuestion() {
if (currentQuestion > 0) {
document.querySelector(`.question[data-index="${currentQuestion}"]`).classList.add('hidden');
currentQuestion--;
document.querySelector(`.question[data-index="${currentQuestion}"]`).classList.remove('hidden');
updateNavButtons();
}
}
function showResults() {
// Calculate scores
const totalScore = answers.reduce((sum, answer) => sum + answer, 0);
const totalPercent = Math.round((totalScore / 36) * 100);
// Croyances (first 6 questions)
const croyancesScore = answers.slice(0, 6).reduce((sum, answer) => sum + answer, 0);
// Craintes (last 6 questions)
const craintesScore = answers.slice(6).reduce((sum, answer) => sum + answer, 0);
// Determine severity
let severityText = '';
if (totalScore < 14) {
severityText = 'Faible corticophobie';
} else if (totalScore >= 14 && totalScore <= 24) {
severityText = 'Corticophobie modérée';
} else {
severityText = 'Corticophobie grave';
}
// Update results display
document.getElementById('total-score').textContent = totalScore;
document.getElementById('total-percent').textContent = totalPercent;
document.getElementById('severity-text').textContent = severityText;
document.getElementById('croyances-score').textContent = croyancesScore;
document.getElementById('craintes-score').textContent = craintesScore;
// Animate result bars
setTimeout(() => {
document.getElementById('total-score-bar').style.width = `${totalPercent}%`;
document.getElementById('croyances-bar').style.width = `${(croyancesScore / 18) * 100}%`;
document.getElementById('craintes-bar').style.width = `${(craintesScore / 18) * 100}%`;
}, 100);
// Show results and hide form
document.getElementById('questionnaire').classList.add('hidden');
document.getElementById('results').classList.remove('hidden');
}
// Restart button functionality
document.getElementById('restart-btn').addEventListener('click', function() {
// Reset answers and UI
answers = Array(questions.length).fill(null);
currentQuestion = 0;
// Reset all selected options
document.querySelectorAll('.question button').forEach(btn => {
btn.classList.remove('option-selected');
});
// Show first question
document.querySelectorAll('.question').forEach((q, i) => {
q.classList.toggle('hidden', i !== 0);
});
// Update progress and nav buttons
updateProgress();
updateNavButtons();
// Hide results and show form
document.getElementById('results').classList.add('hidden');
document.getElementById('questionnaire').classList.remove('hidden');
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=lotfix/topicop-by-synapse" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |