Spaces:
Running
Running
| <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> |