Accueil-R: Structurer son contenu

- Créer un accordéon
- Créer une fenetre modale

IMPORTANT : veuillez cliquer sur les accordéons ci-dessous pour consulter les exemples et les codes sources à réutiliser.

Introduction

Les accordéons sont utilisés sur une page de cours pour présenter de manière concise les informations ou ressources destinées à vos étudiant-es. Les accordéons se présentent sous forme de blocs qu'on peut replier.

Exemples d'accordéons

Introduction

Contenu accordéon 1 ici

Objectifs

Contenu accordéon 2 ici

Merci de trouver ci-dessous le code source à copier, puis passer à la vue HTML dans l'éditeur de texte pour le coller et l'adapter à vos besoins :

Pour la version Moodle 4 :

<div id="accordionExample" class="accordion">
<div class="card">
<div id="headingOne" class="card-header"><a class="btn btn-outline-primary btn-lg btn-block collapsed" style="text-align: left;" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><span class="" style="font-family: Arial, Helvetica, sans-serif; font-size: large;"><strong>Titre du bouton de l'accordéon 1 ici</strong></span></a>
<div id="collapseOne" class="collapse" style="background-color: white;" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<div>Contenu accordéon 1 ici</div>
</div>
</div>
</div>
</div>
 <div id="accordionExample" class="accordion">
<div class="card">
<div id="headingOne" class="card-header"><a class="btn btn-outline-primary btn-lg btn-block collapsed" style="text-align: left;" data-toggle="collapse"
data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class=""
style="font-family: Arial, Helvetica, sans-serif; font-size: large;"><strong>Titre bouton accordéon 2 ici</strong></span></a>
</div>
<div id="collapseTwo" class="collapse"
style="background-color: white;" aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="card-body">
<div>Contenu accordéon 2 ici</div>
</div>
</div>
</div>
</div></div>

Pour la version Moodle 5 :

<div id="accordionExample" class="accordion">
<div class="card">
<div id="headingOne" class="card-header"><a class="btn btn-outline-primary btn-lg btn-block collapsed" style="text-align: left;" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><span class="" style="font-family: Arial, Helvetica, sans-serif; font-size: large;"><strong>Titre accordéon 1 ici</strong></span></a>
<div id="collapseOne" class="collapse" style="background-color: white;" aria-labelledby="headingOne" data-parent="#accordionExample">
 <div class="card-body">
<div>Contenu accordéon 1 ici</div>
</div>
</div>
</div>
</div>
 <div id="accordionExample" class="accordion">
<div class="card">
<div id="headingOne" class="card-header"><a class="btn btn-outline-primary btn-lg btn-block collapsed" style="text-align: left;" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class="" style="font-family: Arial, Helvetica, sans-serif; font-size: large;"><strong>Titre accordéon 2 ici</strong></span></a></div>
<div id="collapseTwo" class="collapse" style="background-color: white;" aria-labelledby="headingOne" data-parent="#accordionExample">
 <div class="card-body">
<div>Contenu accordéon 2 ici</div>
</div>
</div>
</div>
</div>
</div>

Introduction

Les fenêtres modales permettent aux étudiant-e-s d'afficher des ressources à la demande et de centrer leur attention sur un contenu précis.

Exemple d'une fenêtre modale

Merci de trouver ci-dessous le code source de cet exemple à copier, puis passer à la vue HTML dans l'éditeur de texte pour le coller et l'adapter à vos besoins :

Pour la version Moodle 4 :

<p><button class="btn btn-primary" type="button" data-toggle="modal"
data-target=".bd-example-modal-lg"><strong>Titre bouton ici</strong></button></p>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h6 id="myLargeModalLabel" class="modal-title"></h6>
<button class="btn btn-outline-primary" type="button"
data-dismiss="modal" aria-label="Close"> <span
aria-hidden="true">Quitter ×</span> </button>
</div>
 <div class="modal-body"><iframe src="lien ici vidéo par exemple" width="100%" height="530" scrolling="yes" allow="fullscreen"></iframe>
</div>
</div>
</div>
</div>

Pour la version Moodle 5 :

<p><button class="btn btn-primary" type="button" data-bs-toggle="modal"
data-bs-target=".bd-example-modal-lg"><strong>Titre bouton ici</strong></button></p>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h6 id="myLargeModalLabel" class="modal-title"></h6>
<button class="btn btn-outline-primary" type="button"
data-bs-dismiss="modal" aria-label="Close"> <span
aria-hidden="true">Quitter ×</span> </button>
</div>
 <div class="modal-body"><iframe src="lien ici vidéo par exemple" width="100%" height="530" scrolling="yes" allow="fullscreen"></iframe>
</div>
</div>
</div>
</div>