Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Aide aux devoirs Maths/Physique/Chimie</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> | |
| .mind-map { | |
| min-height: 500px; | |
| background-color: #f8fafc; | |
| border-radius: 1rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .node { | |
| position: absolute; | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| cursor: move; | |
| transition: all 0.2s; | |
| max-width: 250px; | |
| min-width: 150px; | |
| } | |
| .node:hover { | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| transform: scale(1.02); | |
| } | |
| .node-main { | |
| background-color: #3b82f6; | |
| color: white; | |
| font-weight: bold; | |
| z-index: 10; | |
| } | |
| .node-question { | |
| background-color: #f59e0b; | |
| color: white; | |
| z-index: 5; | |
| } | |
| .node-answer { | |
| background-color: #10b981; | |
| color: white; | |
| z-index: 3; | |
| } | |
| .node-blank { | |
| background-color: white; | |
| border: 2px dashed #64748b; | |
| color: #334155; | |
| } | |
| .connector { | |
| position: absolute; | |
| background-color: #94a3b8; | |
| height: 2px; | |
| transform-origin: left center; | |
| z-index: 1; | |
| } | |
| .blank-input { | |
| background-color: transparent; | |
| border-bottom: 2px solid #3b82f6; | |
| color: #3b82f6; | |
| font-weight: bold; | |
| width: 80px; | |
| text-align: center; | |
| margin: 0 5px; | |
| } | |
| .blank-input:focus { | |
| outline: none; | |
| border-bottom-color: #1d4ed8; | |
| } | |
| .subject-tab.active { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .level-tab.active { | |
| background-color: #10b981; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="mb-8 text-center"> | |
| <h1 class="text-4xl font-bold text-blue-600 mb-2">Aide aux Devoirs</h1> | |
| <h2 class="text-2xl text-gray-700">Mathématiques • Physique • Chimie</h2> | |
| <p class="text-gray-500 mt-2">De la 2nde à la Terminale</p> | |
| </header> | |
| <div class="flex flex-col lg:flex-row gap-6"> | |
| <!-- Sidebar --> | |
| <div class="w-full lg:w-1/4 bg-white p-6 rounded-xl shadow-md"> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold mb-3 text-gray-800">Matières</h3> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <button class="subject-tab active py-2 px-3 rounded-lg transition" data-subject="maths"> | |
| <i class="fas fa-square-root-alt mr-2"></i> Maths | |
| </button> | |
| <button class="subject-tab py-2 px-3 rounded-lg transition" data-subject="physics"> | |
| <i class="fas fa-atom mr-2"></i> Physique | |
| </button> | |
| <button class="subject-tab py-2 px-3 rounded-lg transition" data-subject="chemistry"> | |
| <i class="fas fa-flask mr-2"></i> Chimie | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold mb-3 text-gray-800">Niveau</h3> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <button class="level-tab py-2 px-3 rounded-lg transition" data-level="2nde"> | |
| 2nde | |
| </button> | |
| <button class="level-tab py-2 px-3 rounded-lg transition active" data-level="1ere"> | |
| 1ère | |
| </button> | |
| <button class="level-tab py-2 px-3 rounded-lg transition" data-level="terminale"> | |
| Terminale | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold mb-3 text-gray-800">Thèmes</h3> | |
| <div class="space-y-2" id="themes-container"> | |
| <!-- Thèmes seront chargés dynamiquement --> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold mb-3 text-gray-800">Outils</h3> | |
| <button id="add-question" class="w-full bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-lg mb-2 transition flex items-center justify-center"> | |
| <i class="fas fa-question-circle mr-2"></i> Ajouter Question | |
| </button> | |
| <button id="add-answer" class="w-full bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg mb-2 transition flex items-center justify-center"> | |
| <i class="fas fa-lightbulb mr-2"></i> Ajouter Réponse | |
| </button> | |
| <button id="add-blank" class="w-full bg-white border border-blue-500 text-blue-500 hover:bg-blue-50 py-2 px-4 rounded-lg transition flex items-center justify-center"> | |
| <i class="fas fa-edit mr-2"></i> Ajouter Trou | |
| </button> | |
| </div> | |
| <div class="bg-blue-50 p-4 rounded-lg border border-blue-200"> | |
| <h4 class="font-medium text-blue-800 mb-2 flex items-center"> | |
| <i class="fas fa-info-circle mr-2"></i> Comment utiliser | |
| </h4> | |
| <p class="text-sm text-blue-700"> | |
| 1. Sélectionnez une matière et un niveau<br> | |
| 2. Choisissez un thème<br> | |
| 3. Explorez les questions et réponses<br> | |
| 4. Complétez les trous pour vérifier vos connaissances | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="w-full lg:w-3/4"> | |
| <div class="bg-white p-6 rounded-xl shadow-md mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-semibold text-gray-800" id="current-theme">Sélectionnez un thème</h3> | |
| <div class="flex space-x-2"> | |
| <button id="zoom-in" class="bg-gray-200 hover:bg-gray-300 p-2 rounded-lg"> | |
| <i class="fas fa-search-plus"></i> | |
| </button> | |
| <button id="zoom-out" class="bg-gray-200 hover:bg-gray-300 p-2 rounded-lg"> | |
| <i class="fas fa-search-minus"></i> | |
| </button> | |
| <button id="reset-view" class="bg-gray-200 hover:bg-gray-300 p-2 rounded-lg"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mind-map relative" id="mind-map"> | |
| <!-- Mind map content will be generated here --> | |
| <div class="node node-main absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" style="transform: translate(-50%, -50%);"> | |
| <div class="text-center"> | |
| <i class="fas fa-brain text-2xl mb-2"></i> | |
| <div>Commencez par sélectionner un thème</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Vérifiez vos réponses</h3> | |
| <div class="flex flex-wrap gap-4" id="blanks-container"> | |
| <!-- Blank answers will appear here --> | |
| <div class="bg-gray-100 p-4 rounded-lg text-center w-full"> | |
| <p class="text-gray-500">Les trous que vous complétez apparaîtront ici pour vérification.</p> | |
| </div> | |
| </div> | |
| <button id="check-answers" class="mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-lg transition hidden"> | |
| <i class="fas fa-check-circle mr-2"></i> Vérifier les réponses | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Sample data for questions and answers | |
| const data = { | |
| maths: { | |
| '2nde': { | |
| 'Fonctions': [ | |
| { | |
| question: "Quelle est la définition d'une fonction ?", | |
| answer: "Une fonction est une relation qui à chaque élément d'un ensemble de départ associe au plus un élément d'un ensemble d'arrivée." | |
| }, | |
| { | |
| question: "Comment calcule-t-on l'image d'un nombre par une fonction f ?", | |
| answer: "On remplace x par le nombre dans l'expression de f(x)." | |
| }, | |
| { | |
| question: "Qu'est-ce qu'un antécédent ?", | |
| answer: "Un antécédent d'un nombre y par une fonction f est un nombre x tel que f(x) = y." | |
| } | |
| ], | |
| 'Géométrie': [ | |
| { | |
| question: "Quelle est la formule du théorème de Pythagore ?", | |
| answer: "Dans un triangle rectangle, si a et b sont les longueurs des côtés de l'angle droit et c celle de l'hypoténuse, alors a² + b² = c²." | |
| } | |
| ] | |
| }, | |
| '1ere': { | |
| 'Dérivation': [ | |
| { | |
| question: "Quelle est la dérivée de f(x) = x² ?", | |
| answer: "f'(x) = 2x" | |
| }, | |
| { | |
| question: "Que représente f'(a) graphiquement ?", | |
| answer: "C'est le coefficient directeur de la tangente à la courbe de f au point d'abscisse a." | |
| } | |
| ], | |
| 'Probabilités': [ | |
| { | |
| question: "Comment calcule-t-on la probabilité de A sachant B ?", | |
| answer: "P(A|B) = P(A∩B) / P(B)" | |
| } | |
| ] | |
| }, | |
| 'terminale': { | |
| 'Limites': [ | |
| { | |
| question: "Que signifie lim f(x) = +∞ quand x→+∞ ?", | |
| answer: "La fonction f prend des valeurs aussi grandes qu'on veut dès que x est suffisamment grand." | |
| } | |
| ], | |
| 'Exponentielle': [ | |
| { | |
| question: "Quelle est la dérivée de exp(x) ?", | |
| answer: "exp(x) (la fonction exponentielle est sa propre dérivée)" | |
| } | |
| ] | |
| } | |
| }, | |
| physics: { | |
| '2nde': { | |
| 'Mouvement': [ | |
| { | |
| question: "Comment calcule-t-on la vitesse moyenne ?", | |
| answer: "v = distance parcourue / durée du parcours" | |
| } | |
| ] | |
| }, | |
| '1ere': { | |
| 'Ondes': [ | |
| { | |
| question: "Quelle est la relation entre longueur d'onde, fréquence et célérité ?", | |
| answer: "λ = v / f où λ est la longueur d'onde, v la célérité et f la fréquence." | |
| } | |
| ] | |
| }, | |
| 'terminale': { | |
| 'Mécanique': [ | |
| { | |
| question: "Énoncez la 2ème loi de Newton", | |
| answer: "ΣF = m·a (la somme des forces est égale à la masse fois l'accélération)" | |
| } | |
| ] | |
| } | |
| }, | |
| chemistry: { | |
| '2nde': { | |
| 'Atome': [ | |
| { | |
| question: "Quels sont les 3 constituants principaux d'un atome ?", | |
| answer: "Protons, neutrons et électrons" | |
| } | |
| ] | |
| }, | |
| '1ere': { | |
| 'Transformations': [ | |
| { | |
| question: "Qu'est-ce qu'une réaction d'oxydoréduction ?", | |
| answer: "Une réaction où il y a transfert d'électrons entre espèces chimiques." | |
| } | |
| ] | |
| }, | |
| 'terminale': { | |
| 'Cinétique': [ | |
| { | |
| question: "Quels facteurs influencent la vitesse d'une réaction chimique ?", | |
| answer: "Température, concentration, catalyseur, état de division des réactifs" | |
| } | |
| ] | |
| } | |
| } | |
| }; | |
| // Current selections | |
| let currentSubject = 'maths'; | |
| let currentLevel = '1ere'; | |
| let currentTheme = ''; | |
| let nodes = []; | |
| let connectors = []; | |
| let blanks = []; | |
| let scale = 1; | |
| // DOM elements | |
| const mindMap = document.getElementById('mind-map'); | |
| const themesContainer = document.getElementById('themes-container'); | |
| const currentThemeDisplay = document.getElementById('current-theme'); | |
| const blanksContainer = document.getElementById('blanks-container'); | |
| const checkAnswersBtn = document.getElementById('check-answers'); | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Set up event listeners | |
| setupEventListeners(); | |
| // Load initial data | |
| updateThemeList(); | |
| }); | |
| function setupEventListeners() { | |
| // Subject tabs | |
| document.querySelectorAll('.subject-tab').forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| document.querySelectorAll('.subject-tab').forEach(t => t.classList.remove('active')); | |
| tab.classList.add('active'); | |
| currentSubject = tab.dataset.subject; | |
| updateThemeList(); | |
| }); | |
| }); | |
| // Level tabs | |
| document.querySelectorAll('.level-tab').forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| document.querySelectorAll('.level-tab').forEach(t => t.classList.remove('active')); | |
| tab.classList.add('active'); | |
| currentLevel = tab.dataset.level; | |
| updateThemeList(); | |
| }); | |
| }); | |
| // Tool buttons | |
| document.getElementById('add-question').addEventListener('click', addQuestionNode); | |
| document.getElementById('add-answer').addEventListener('click', addAnswerNode); | |
| document.getElementById('add-blank').addEventListener('click', addBlankNode); | |
| document.getElementById('check-answers').addEventListener('click', checkAnswers); | |
| // Zoom controls | |
| document.getElementById('zoom-in').addEventListener('click', () => { | |
| scale += 0.1; | |
| updateZoom(); | |
| }); | |
| document.getElementById('zoom-out').addEventListener('click', () => { | |
| if (scale > 0.5) { | |
| scale -= 0.1; | |
| updateZoom(); | |
| } | |
| }); | |
| document.getElementById('reset-view').addEventListener('click', () => { | |
| scale = 1; | |
| updateZoom(); | |
| }); | |
| } | |
| function updateZoom() { | |
| mindMap.style.transform = `scale(${scale})`; | |
| } | |
| function updateThemeList() { | |
| themesContainer.innerHTML = ''; | |
| const themes = data[currentSubject][currentLevel]; | |
| if (!themes) return; | |
| Object.keys(themes).forEach(theme => { | |
| const button = document.createElement('button'); | |
| button.className = 'w-full text-left py-2 px-3 rounded-lg hover:bg-gray-100 transition'; | |
| button.textContent = theme; | |
| button.addEventListener('click', () => { | |
| currentTheme = theme; | |
| currentThemeDisplay.textContent = theme; | |
| loadThemeContent(); | |
| }); | |
| themesContainer.appendChild(button); | |
| }); | |
| } | |
| function loadThemeContent() { | |
| // Clear existing content | |
| clearMindMap(); | |
| // Get questions for current theme | |
| const questions = data[currentSubject][currentLevel][currentTheme]; | |
| if (!questions || questions.length === 0) return; | |
| // Create main theme node | |
| const mainNode = createNode(currentTheme, 'node-main', mindMap.offsetWidth / 2, mindMap.offsetHeight / 2); | |
| nodes.push(mainNode); | |
| // Create question nodes around the main node | |
| const angleStep = (2 * Math.PI) / questions.length; | |
| const radius = 150; | |
| questions.forEach((q, i) => { | |
| const angle = i * angleStep; | |
| const x = mainNode.offsetLeft + mainNode.offsetWidth / 2 + Math.cos(angle) * radius - 100; | |
| const y = mainNode.offsetTop + mainNode.offsetHeight / 2 + Math.sin(angle) * radius - 50; | |
| const questionNode = createNode(q.question, 'node-question', x, y); | |
| nodes.push(questionNode); | |
| // Create answer node | |
| const answerX = x + (Math.cos(angle) * 120); | |
| const answerY = y + (Math.sin(angle) * 120); | |
| const answerNode = createNode(q.answer, 'node-answer', answerX, answerY); | |
| nodes.push(answerNode); | |
| // Create connectors | |
| createConnector(mainNode, questionNode); | |
| createConnector(questionNode, answerNode); | |
| // Add some blanks randomly | |
| if (Math.random() > 0.7) { | |
| addBlankToNode(answerNode); | |
| } | |
| }); | |
| // Make nodes draggable | |
| makeNodesDraggable(); | |
| } | |
| function clearMindMap() { | |
| // Remove all nodes and connectors | |
| nodes.forEach(node => node.remove()); | |
| connectors.forEach(connector => connector.remove()); | |
| blanks = []; | |
| nodes = []; | |
| connectors = []; | |
| // Clear blanks container | |
| blanksContainer.innerHTML = ` | |
| <div class="bg-gray-100 p-4 rounded-lg text-center w-full"> | |
| <p class="text-gray-500">Les trous que vous complétez apparaîtront ici pour vérification.</p> | |
| </div> | |
| `; | |
| checkAnswersBtn.classList.add('hidden'); | |
| } | |
| function createNode(content, className, x, y) { | |
| const node = document.createElement('div'); | |
| node.className = `node ${className}`; | |
| node.style.left = `${x}px`; | |
| node.style.top = `${y}px`; | |
| node.innerHTML = content; | |
| mindMap.appendChild(node); | |
| return node; | |
| } | |
| function createConnector(node1, node2) { | |
| const connector = document.createElement('div'); | |
| connector.className = 'connector'; | |
| // Calculate position and dimensions | |
| updateConnectorPosition(connector, node1, node2); | |
| mindMap.appendChild(connector); | |
| connectors.push(connector); | |
| return connector; | |
| } | |
| function updateConnectorPosition(connector, node1, node2) { | |
| const x1 = node1.offsetLeft + node1.offsetWidth / 2; | |
| const y1 = node1.offsetTop + node1.offsetHeight / 2; | |
| const x2 = node2.offsetLeft + node2.offsetWidth / 2; | |
| const y2 = node2.offsetTop + node2.offsetHeight / 2; | |
| const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); | |
| const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI; | |
| connector.style.width = `${length}px`; | |
| connector.style.left = `${x1}px`; | |
| connector.style.top = `${y1}px`; | |
| connector.style.transform = `rotate(${angle}deg)`; | |
| } | |
| function makeNodesDraggable() { | |
| nodes.forEach(node => { | |
| let isDragging = false; | |
| let offsetX, offsetY; | |
| node.addEventListener('mousedown', (e) => { | |
| isDragging = true; | |
| offsetX = e.clientX - node.getBoundingClientRect().left; | |
| offsetY = e.clientY - node.getBoundingClientRect().top; | |
| node.style.zIndex = 100; | |
| node.style.cursor = 'grabbing'; | |
| }); | |
| document.addEventListener('mousemove', (e) => { | |
| if (!isDragging) return; | |
| const x = e.clientX - offsetX - mindMap.getBoundingClientRect().left; | |
| const y = e.clientY - offsetY - mindMap.getBoundingClientRect().top; | |
| node.style.left = `${x}px`; | |
| node.style.top = `${y}px`; | |
| // Update all connectors connected to this node | |
| updateAllConnectors(); | |
| }); | |
| document.addEventListener('mouseup', () => { | |
| isDragging = false; | |
| node.style.zIndex = ''; | |
| node.style.cursor = 'move'; | |
| }); | |
| }); | |
| } | |
| function updateAllConnectors() { | |
| // This is a simplified version - in a real app you'd track which nodes are connected | |
| connectors.forEach(connector => connector.remove()); | |
| connectors = []; | |
| // Recreate connectors between main node and questions | |
| if (nodes.length > 1) { | |
| const mainNode = nodes[0]; | |
| for (let i = 1; i < nodes.length; i++) { | |
| if (nodes[i].classList.contains('node-question')) { | |
| createConnector(mainNode, nodes[i]); | |
| // Connect question to its answer | |
| if (i + 1 < nodes.length && nodes[i+1].classList.contains('node-answer')) { | |
| createConnector(nodes[i], nodes[i+1]); | |
| i++; // Skip the answer node in next iteration | |
| } | |
| } | |
| } | |
| } | |
| } | |
| function addQuestionNode() { | |
| if (!currentTheme) { | |
| alert('Veuillez sélectionner un thème d\'abord'); | |
| return; | |
| } | |
| const question = prompt('Entrez votre question:'); | |
| if (!question) return; | |
| // Find main node | |
| const mainNode = nodes[0]; | |
| if (!mainNode) return; | |
| // Position new question node around main node | |
| const angle = Math.random() * 2 * Math.PI; | |
| const radius = 150; | |
| const x = mainNode.offsetLeft + mainNode.offsetWidth / 2 + Math.cos(angle) * radius - 100; | |
| const y = mainNode.offsetTop + mainNode.offsetHeight / 2 + Math.sin(angle) * radius - 50; | |
| const questionNode = createNode(question, 'node-question', x, y); | |
| nodes.push(questionNode); | |
| createConnector(mainNode, questionNode); | |
| makeNodesDraggable(); | |
| } | |
| function addAnswerNode() { | |
| const questionNodes = nodes.filter(node => node.classList.contains('node-question')); | |
| if (questionNodes.length === 0) { | |
| alert('Ajoutez d\'abord une question'); | |
| return; | |
| } | |
| // Find the last question node | |
| const lastQuestionNode = questionNodes[questionNodes.length - 1]; | |
| const answer = prompt('Entrez la réponse:'); | |
| if (!answer) return; | |
| // Position answer node near the question | |
| const x = lastQuestionNode.offsetLeft + 120; | |
| const y = lastQuestionNode.offsetTop + 120; | |
| const answerNode = createNode(answer, 'node-answer', x, y); | |
| nodes.push(answerNode); | |
| createConnector(lastQuestionNode, answerNode); | |
| makeNodesDraggable(); | |
| } | |
| function addBlankNode() { | |
| const answerNodes = nodes.filter(node => node.classList.contains('node-answer')); | |
| if (answerNodes.length === 0) { | |
| alert('Ajoutez d\'abord une réponse'); | |
| return; | |
| } | |
| // Add blank to the last answer node | |
| addBlankToNode(answerNodes[answerNodes.length - 1]); | |
| } | |
| function addBlankToNode(node) { | |
| const text = node.textContent; | |
| const words = text.split(' '); | |
| // Choose a random word (not too short) | |
| let wordIndex; | |
| do { | |
| wordIndex = Math.floor(Math.random() * words.length); | |
| } while (words[wordIndex].length < 3); | |
| const wordToBlank = words[wordIndex]; | |
| // Replace the word with an input | |
| words[wordIndex] = `<input type="text" class="blank-input" data-answer="${wordToBlank.toLowerCase()}" placeholder="...">`; | |
| // Update node content | |
| node.innerHTML = words.join(' '); | |
| // Store blank info | |
| blanks.push({ | |
| node: node, | |
| answer: wordToBlank.toLowerCase(), | |
| input: node.querySelector('.blank-input') | |
| }); | |
| // Update blanks container | |
| updateBlanksDisplay(); | |
| } | |
| function updateBlanksDisplay() { | |
| if (blanks.length === 0) { | |
| blanksContainer.innerHTML = ` | |
| <div class="bg-gray-100 p-4 rounded-lg text-center w-full"> | |
| <p class="text-gray-500">Les trous que vous complétez apparaîtront ici pour vérification.</p> | |
| </div> | |
| `; | |
| checkAnswersBtn.classList.add('hidden'); | |
| return; | |
| } | |
| blanksContainer.innerHTML = ''; | |
| checkAnswersBtn.classList.remove('hidden'); | |
| blanks.forEach((blank, index) => { | |
| const blankElement = document.createElement('div'); | |
| blankElement.className = 'bg-gray-100 p-4 rounded-lg flex items-center'; | |
| blankElement.innerHTML = ` | |
| <span class="text-gray-700 mr-2">${index + 1}.</span> | |
| <input type="text" class="flex-1 border border-gray-300 rounded px-3 py-1" | |
| data-answer="${blank.answer}" placeholder="Votre réponse..."> | |
| <button class="ml-2 bg-blue-100 text-blue-600 px-3 py-1 rounded check-blank-btn"> | |
| <i class="fas fa-check"></i> | |
| </button> | |
| `; | |
| blanksContainer.appendChild(blankElement); | |
| // Add event listener to check button | |
| blankElement.querySelector('.check-blank-btn').addEventListener('click', (e) => { | |
| checkSingleBlank(e.target.closest('.bg-gray-100')); | |
| }); | |
| }); | |
| } | |
| function checkSingleBlank(blankElement) { | |
| const input = blankElement.querySelector('input'); | |
| const userAnswer = input.value.trim().toLowerCase(); | |
| const correctAnswer = input.dataset.answer; | |
| if (userAnswer === correctAnswer) { | |
| blankElement.classList.remove('bg-gray-100'); | |
| blankElement.classList.add('bg-green-100'); | |
| input.classList.remove('border-gray-300'); | |
| input.classList.add('border-green-500'); | |
| } else { | |
| blankElement.classList.remove('bg-gray-100'); | |
| blankElement.classList.add('bg-red-100'); | |
| input.classList.remove('border-gray-300'); | |
| input.classList.add('border-red-500'); | |
| // Show correct answer after a delay | |
| setTimeout(() => { | |
| input.value = correctAnswer; | |
| }, 1000); | |
| } | |
| } | |
| function checkAnswers() { | |
| const blankInputs = blanksContainer.querySelectorAll('input'); | |
| let allCorrect = true; | |
| blankInputs.forEach(input => { | |
| const blankElement = input.closest('.bg-gray-100'); | |
| checkSingleBlank(blankElement); | |
| if (input.value.trim().toLowerCase() !== input.dataset.answer) { | |
| allCorrect = false; | |
| } | |
| }); | |
| if (allCorrect) { | |
| setTimeout(() => { | |
| alert('Félicitations ! Toutes vos réponses sont correctes.'); | |
| }, 500); | |
| } | |
| } | |
| </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=Adam77/aide-aux-devoirs" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |