Glissez-déposez les éléments dans le bon ordre
`;
// Mélange les items si mode quiz
const shuffled = mode === 'quiz'
? this.shuffleArray([...items])
: items;
shuffled.forEach((item, index) => {
html += `
-
⋮⋮
${item}
`;
});
html += `
`;
container.innerHTML = html;
// Active drag & drop
this.setupDragAndDrop();
},
setupDragAndDrop() {
const list = document.getElementById('ordering-list');
let draggedItem = null;
list.addEventListener('dragstart', (e) => {
draggedItem = e.target;
e.target.classList.add('dragging');
});
list.addEventListener('dragend', (e) => {
e.target.classList.remove('dragging');
});
list.addEventListener('dragover', (e) => {
e.preventDefault();
const afterElement = this.getDragAfterElement(list, e.clientY);
if (afterElement == null) {
list.appendChild(draggedItem);
} else {
list.insertBefore(draggedItem, afterElement);
}
});
},
getDragAfterElement(container, y) {
const draggableElements = [
...container.querySelectorAll('.ordering-item:not(.dragging)')
];
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
},
getUserAnswer(container, question) {
if (question.type === 'ordering') {
const items = container.querySelectorAll('.ordering-item');
return Array.from(items).map(item => item.textContent.trim());
}
// ... existing types ...
},
checkAnswer(userAnswer, question) {
if (question.type === 'ordering') {
const correctOrder = question.correct_order.map(i => question.items[i]);
const isCorrect = JSON.stringify(userAnswer) === JSON.stringify(correctOrder);
return {
correct: isCorrect,
message: isCorrect
? 'Excellent ! Ordre correct.'
: `Ordre incorrect. L'ordre correct était : ${correctOrder.join(' → ')}`
};
}
// ... existing types ...
}
};
```
### Étape 3 : Ajouter les Styles (`css/quiz.css`)
```css
.ordering-container {
padding: var(--space-lg);
}
.ordering-list {
list-style: none;
padding: 0;
margin: var(--space-md) 0;
}
.ordering-item {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md);
margin: var(--space-sm) 0;
background: var(--secondary);
border: 2px solid var(--primary);
border-radius: 8px;
cursor: move;
transition: var(--transition);
}
.ordering-item.dragging {
opacity: 0.5;
transform: scale(1.02);
}
.drag-handle {
color: var(--accent);
font-size: 1.2rem;
cursor: grab;
}
.drag-handle:active {
cursor: grabbing;
}
```
### Étape 4 : Mettre à Jour la Validation
Dans `scripts/validate_questions.py` :
```python
VALID_TYPES = ['qcm', 'vrai_faux', 'matching', 'numerical', 'interpretation', 'ordering']
def validate_ordering(self, question):
"""Valide une question d'ordonnancement"""
q_id = question.get('id', 'NO_ID')
if 'items' not in question:
self.errors.append(f"[{q_id}] Ordering sans items")
return
if 'correct_order' not in question:
self.errors.append(f"[{q_id}] Ordering sans correct_order")
return
items = question['items']
correct_order = question['correct_order']
if len(items) < 2:
self.errors.append(f"[{q_id}] Ordering avec moins de 2 items")
if len(correct_order) != len(items):
self.errors.append(f"[{q_id}] Ordering: correct_order ne correspond pas aux items")
```
---
## 3. Ajouter un Nouveau Chapitre
### Étape 1 : Données (`data/questions.json`)
```json
{
"chapters": [
// ... chapitres existants ...
{
"chapter_id": 7,
"chapter_number": "7",
"chapter_title": "Spin et Moment Angulaire",
"chapter_description": "Étude du spin et du moment angulaire en mécanique quantique",
"section_reference": "Sections 7.1-7.4",
"key_concepts": [
"Spin 1/2",
"Matrices de Pauli",
"Moment angulaire orbital",
"Couplage spin-orbite"
],
"questions": [
// ... vos questions ...
]
}
]
}
```
### Étape 2 : Interface (`index.html`)
Ajoutez l'option dans le sélecteur :
```html