Aller au contenu principal

🏆 24-DĂ©fi - Composants avec JavaScript

Créez une page d'aide (FAQ) en utilisant deux composants Bootstrap nécessitant du JavaScript:

  • Un accordion (Type 1 - automatique)
  • Des popovers (Type 2 - nĂ©cessite initialisation)

Contexte​

Vous créez une page d'aide pour votre jeu Greenfoot. Cette page contient une FAQ (questions fréquentes) sous forme d'accordéon et des boutons d'aide avec des popovers pour des informations supplémentaires.

info

Vous devez trouver comment utiliser ces composants dans la documentation officielle:
https://getbootstrap.com/docs/5.3/components/

http://localhost:3000

img

Kit de dĂ©part​

attention

Vous pouvez utiliser le HTML de départ suivant qui contient déjà Bootstrap et une base HTML.

Télécharger au format zip le projet de départ.

Objectifs​

1 - Lier le fichier JavaScript​

  • Liez le fichier bootstrap.bundle.min.js Ă  l'endroit indiquĂ© dans le fichier HTML
astuce

Ce fichier est dans le dossier js de l'archive Bootstrap que vous pouvez télécharger à partir du site de Bootstrap.

Référerez-vous à l'introduction à Bootstrap pour la procédure de téléchargement au besoin.

2 - Ajouter un accordion (FAQ)​

  • Un accordion avec 4 questions/rĂ©ponses
  • Chaque question peut s'ouvrir/fermer indĂ©pendamment

Contenu fourni (utilisez tel quel ou inventez votre contenu!)

QuestionRĂ©ponse
Comment déplacer mon personnage ?Utilisez les flÚches du clavier pour déplacer votre personnage dans toutes les directions.
Comment gagner des points ?Collectez les objets verts pour gagner 10 points chacun. Évitez les objets rouges qui retirent des points.
Combien de niveaux y a-t-il ?Le jeu contient 5 niveaux de difficulté croissante. Chaque niveau débloque de nouvelles mécaniques.
Comment sauvegarder ma partie ?Votre progression est sauvegardée automatiquement aprÚs chaque niveau complété.

3 - Section d'aide rapide avec boutons popovers​

  • Un titre Aide rapide
  • Trois boutons avec des popovers (info-bulles au clic)

Contenu fourni (utilisez tel quel ou utilisez votre propre contenu!)

BoutonTexte du popover
CommandesFlÚches : déplacer, Espace : sauter, P : pause
AstucesRestez en mouvement pour Ă©viter les ennemis. Les power-ups apparaissent toutes les 30 secondes.
SupportContactez-nous Ă  support@jeu.com pour toute question.
astuce

Les popovers nécessitent du code JavaScript d'initialisation. Utilisez la section Enable popovers (https://getbootstrap.com/docs/5.3/components/popovers/#enable-popovers)

Conseils​

  • Accordion: Cherchez "Accordion" dans la doc Bootstrap et partez de l'exemple de base
  • Popover: Cherchez "Popovers" dans la doc Bootstrap
astuce
  • Vous aurez besoin de l'attribut data-bs-toggle="popover" qui devrait dĂ©jĂ  ĂȘtre inclus dans l'exemple de la documentation
  • N'oubliez pas de modifier data-bs-content pour le texte
  • N'oubliez pas le code JavaScript d'initialisation!

Ressources​

Documentation des composants :