Update templates/index.html
Browse files- templates/index.html +17 -19
templates/index.html
CHANGED
@@ -603,14 +603,13 @@
|
|
603 |
header.className = 'mb-8 text-center';
|
604 |
header.innerHTML = `
|
605 |
<h2 class="text-3xl font-bold text-gray-800 mb-2">Vos Flashcards (${flashcards.length})</h2>
|
606 |
-
<p
|
|
|
|
|
|
|
|
|
|
|
607 |
<div class="flex items-center justify-center space-x-4 mt-6">
|
608 |
-
<button id="printBtn" class="btn-secondary text-sm">
|
609 |
-
<i class="fas fa-print mr-2"></i> Imprimer
|
610 |
-
</button>
|
611 |
-
<button id="saveBtn" class="btn-secondary text-sm">
|
612 |
-
<i class="fas fa-save mr-2"></i> Enregistrer
|
613 |
-
</button>
|
614 |
<button id="shareBtn" class="btn-secondary text-sm">
|
615 |
<i class="fas fa-share-alt mr-2"></i> Partager
|
616 |
</button>
|
@@ -666,11 +665,7 @@
|
|
666 |
<i class="fas fa-plus mr-2"></i> Nouveau sujet
|
667 |
</button>
|
668 |
</div>
|
669 |
-
|
670 |
-
<p class="text-gray-500 text-sm">
|
671 |
-
<i class="far fa-lightbulb mr-1"></i> Astuce : Essayez de répondre mentalement avant de retourner la carte
|
672 |
-
</p>
|
673 |
-
</div>
|
674 |
`;
|
675 |
flashcardsContainer.appendChild(controls);
|
676 |
|
@@ -782,23 +777,25 @@
|
|
782 |
const explanationElement = document.getElementById(`explanation-${qIdx}`);
|
783 |
|
784 |
// Vérifier la réponse
|
|
|
785 |
if (selected === correct) {
|
786 |
// Réponse correcte
|
787 |
document.getElementById(`option-${qIdx}-${oIdx}`).classList.add('correct');
|
788 |
currentScore++;
|
789 |
document.getElementById('score').textContent = currentScore;
|
790 |
-
|
791 |
// Afficher une animation de succès
|
792 |
const successIcon = this.nextElementSibling.querySelector('.success-icon');
|
793 |
successIcon.classList.remove('hidden');
|
|
|
794 |
} else {
|
795 |
// Réponse incorrecte
|
796 |
document.getElementById(`option-${qIdx}-${oIdx}`).classList.add('incorrect');
|
797 |
-
|
798 |
// Afficher une animation d'erreur
|
799 |
const errorIcon = this.nextElementSibling.querySelector('.error-icon');
|
800 |
errorIcon.classList.remove('hidden');
|
801 |
-
|
802 |
// Mettre en évidence la bonne réponse
|
803 |
options.forEach((opt, idx) => {
|
804 |
if (opt.value === correct) {
|
@@ -807,18 +804,19 @@
|
|
807 |
successIcon.classList.remove('hidden');
|
808 |
}
|
809 |
});
|
|
|
810 |
}
|
811 |
-
|
812 |
// Désactiver toutes les autres options
|
813 |
options.forEach((opt) => {
|
814 |
if (opt !== this) {
|
815 |
opt.disabled = true;
|
816 |
}
|
817 |
});
|
818 |
-
|
819 |
// Afficher l'explication
|
820 |
explanationElement.classList.remove('hidden');
|
821 |
-
|
822 |
// Animer le passage à la question suivante
|
823 |
setTimeout(() => {
|
824 |
const nextQuestion = document.getElementById(`question-${parseInt(qIdx) + 1}`);
|
@@ -833,7 +831,7 @@
|
|
833 |
displayQuizResults(currentScore, quizQuestions.length);
|
834 |
}
|
835 |
}
|
836 |
-
},
|
837 |
});
|
838 |
});
|
839 |
});
|
|
|
603 |
header.className = 'mb-8 text-center';
|
604 |
header.innerHTML = `
|
605 |
<h2 class="text-3xl font-bold text-gray-800 mb-2">Vos Flashcards (${flashcards.length})</h2>
|
606 |
+
<p >Cliquez sur une carte pour la retourner et voir la réponse.</p>
|
607 |
+
<p class="text-gray-600">
|
608 |
+
<i class="far fa-lightbulb mr-1"></i> Astuce : Essayez de répondre mentalement avant de retourner la carte
|
609 |
+
</p>
|
610 |
+
<p><div class="flex items-center justify-center space-x-4 mt-6">
|
611 |
+
</div></p>
|
612 |
<div class="flex items-center justify-center space-x-4 mt-6">
|
|
|
|
|
|
|
|
|
|
|
|
|
613 |
<button id="shareBtn" class="btn-secondary text-sm">
|
614 |
<i class="fas fa-share-alt mr-2"></i> Partager
|
615 |
</button>
|
|
|
665 |
<i class="fas fa-plus mr-2"></i> Nouveau sujet
|
666 |
</button>
|
667 |
</div>
|
668 |
+
|
|
|
|
|
|
|
|
|
669 |
`;
|
670 |
flashcardsContainer.appendChild(controls);
|
671 |
|
|
|
777 |
const explanationElement = document.getElementById(`explanation-${qIdx}`);
|
778 |
|
779 |
// Vérifier la réponse
|
780 |
+
let delay = 0; // Initialiser le délai
|
781 |
if (selected === correct) {
|
782 |
// Réponse correcte
|
783 |
document.getElementById(`option-${qIdx}-${oIdx}`).classList.add('correct');
|
784 |
currentScore++;
|
785 |
document.getElementById('score').textContent = currentScore;
|
786 |
+
|
787 |
// Afficher une animation de succès
|
788 |
const successIcon = this.nextElementSibling.querySelector('.success-icon');
|
789 |
successIcon.classList.remove('hidden');
|
790 |
+
delay = 2000; // 2 secondes pour une réponse correcte
|
791 |
} else {
|
792 |
// Réponse incorrecte
|
793 |
document.getElementById(`option-${qIdx}-${oIdx}`).classList.add('incorrect');
|
794 |
+
|
795 |
// Afficher une animation d'erreur
|
796 |
const errorIcon = this.nextElementSibling.querySelector('.error-icon');
|
797 |
errorIcon.classList.remove('hidden');
|
798 |
+
|
799 |
// Mettre en évidence la bonne réponse
|
800 |
options.forEach((opt, idx) => {
|
801 |
if (opt.value === correct) {
|
|
|
804 |
successIcon.classList.remove('hidden');
|
805 |
}
|
806 |
});
|
807 |
+
delay = 5000; // 5 secondes pour une réponse incorrecte
|
808 |
}
|
809 |
+
|
810 |
// Désactiver toutes les autres options
|
811 |
options.forEach((opt) => {
|
812 |
if (opt !== this) {
|
813 |
opt.disabled = true;
|
814 |
}
|
815 |
});
|
816 |
+
|
817 |
// Afficher l'explication
|
818 |
explanationElement.classList.remove('hidden');
|
819 |
+
|
820 |
// Animer le passage à la question suivante
|
821 |
setTimeout(() => {
|
822 |
const nextQuestion = document.getElementById(`question-${parseInt(qIdx) + 1}`);
|
|
|
831 |
displayQuizResults(currentScore, quizQuestions.length);
|
832 |
}
|
833 |
}
|
834 |
+
}, delay);
|
835 |
});
|
836 |
});
|
837 |
});
|