Skip to main content

Gabarit

Gabarit

Last modified: Monday, 14 September 2020, 3:51 PM

Gabarit - rqdr_cours

Regex utiles

Lien vers lien accessible


                                    <a href="(.+?)">(.+?)</a>
                                    
                                    <a href="$1" target="_blank" title="Ouvrir dans une nouvelle fenêtre">$2<span class="sr-only"> Ouvrir dans une nouvelle fenêtre</span></a>
                                    <a href="$1" target="_blank" title="Télécharger le document Word">$2<span class="sr-only"> Télécharger le document Word</span></a>
                                    <a href="$1" target="_blank" title="Télécharger le document PDF">$2<span class="sr-only"> Télécharger le document PDF</span></a>
                                

Typographie

Gabarit général : Titre de niveau 1 (H1)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, eius. Ad aperiam similique excepturi texte gras est! Sint cumque sapiente perspiciatis optio quam non, texte emphase unde voluptatem adipisci reprehenderit soluta hyperlien dolore veritatis earum.

Titre de niveau 2 (H2)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia qui eaque vero quaerat reprehenderit? Labore laboriosam autem recusandae, eveniet accusamus voluptas harum ducimus neque suscipit sequi saepe vero voluptates voluptatum!

Titre de niveau 3 (H3)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi excepturi necessitatibus explicabo doloribus distinctio, autem sit nam optio cum, assumenda at placeat quis laborum sunt debitis possimus quisquam facere tenetur.

blockquote > p Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis eius, quidem labore blanditiis consequuntur cum! Officia asperiores mollitia dolorem quaerat eaque voluptatem explicabo. Expedita, sequi et! Atque itaque error maxime?

Titre de niveau 4 (H4)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed placeat, amet repellat repudiandae ducimus aspernatur recusandae culpa id fuga at, reprehenderit minima. Sunt, enim? Illo omnis quas cumque sapiente et?

Titre de niveau interTitre (.interTitre)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem pariatur qui, vero dolores perspiciatis assumenda deserunt saepe ratione adipisci exercitationem tempore, totam quam fugit sapiente. Voluptatum sed sit qui eligendi.

Listes à puces

Consectetur adipiscing elit. In eu dapibus diam, vel feugiat tellus :

  • Consectetur adipiscing elit.
  • Consectetur adipiscing elit.
  • Consectetur adipiscing elit.

    • Consectetur adipiscing elit.
    • Consectetur adipiscing elit.
    • Consectetur adipiscing elit.
  • Consectetur adipiscing elit.
  • Consectetur adipiscing elit.

    1. Consectetur adipiscing elit.
    2. Consectetur adipiscing elit.
    3. Consectetur adipiscing elit.
  • Consectetur adipiscing elit.

Liste sans puce class="sansPuce" :

  • Consectetur adipiscing elit.
  • Consectetur adipiscing elit.
  • Consectetur adipiscing elit.

    1. Consectetur adipiscing elit.
    2. Consectetur adipiscing elit.
    3. Consectetur adipiscing elit.
  1. Lorem ipsum dolor sit amet
  2. Excepturi, culpa
  3. Laboriosam sit quam

Liste avec lettre class="listeLettre" :

  1. Consectetur adipiscing elit.
  2. Consectetur adipiscing elit.
  3. Consectetur adipiscing elit.

    1. Consectetur adipiscing elit.
    2. Consectetur adipiscing elit.
    3. Consectetur adipiscing elit.

Consectetur adipiscing elit. In eu dapibus diam, vel feugiat tellus :

  1. Consectetur adipiscing elit.
  2. Consectetur adipiscing elit.
  3. Consectetur adipiscing elit.

    1. Consectetur adipiscing elit.
    2. Consectetur adipiscing elit.
    3. Consectetur adipiscing elit.
  4. Consectetur adipiscing elit.
  5. Consectetur adipiscing elit.
  6. Consectetur adipiscing elit.

    • Consectetur adipiscing elit.
    • Consectetur adipiscing elit.
    • Consectetur adipiscing elit.
  7. Consectetur adipiscing elit.

Liste références avec commentaire

  • Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi, dolore quo? Dolorum quis rem aliquam incidunt doloribus porro consectetur dolorem deserunt corrupti quos sint, doloremque, velit ea quas ratione quam.

  • Reprehenderit, perspiciatis. Itaque alias enim, molestiae beatae adipisci ad numquam repellat aperiam repellendus eum obcaecati minus nobis. Omnis excepturi iure reprehenderit obcaecati qui vero dicta, blanditiis inventore magnam, quod nemo.

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto, aliquid amet consequuntur ipsa et voluptates numquam mollitia rerum vero id minima molestiae tempore fuga doloremque? Aperiam dolore quo esse minima.

  • Iure qui nemo nostrum adipisci a sapiente ipsa minus nihil nulla maxime nobis nesciunt architecto iusto, harum iste dolores id. Laudantium temporibus quasi modi quos esse? Dolorum facilis esse repellendus.

Lecteur vidéo


                                <div class="videoWrapper">
                                    <iframe width="560" height="315" src="[url]?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                </div>
                                

Images

Image seule


                                    <img src="[url]" alt="">
                                

Image avec largeur limitée


                                    <img class="img--small" src="[Image]" alt="">
                                    <img class="img--medium" src="[Image]" alt="">
                                    <img class="img--large" src="[Image]" alt="">
                                    <img class="img--automax" src="[Image]" alt="">
                                    <img class="img--automax img--center" src="[Image]" alt="">
                                    <img class="img--full" src="[Image]" alt="">
                                

Image avec note

Lorem ipsum dolor sit amet consectetur adipisicing elit.

                                    <figure>
                                        <img src="[url]" alt="">
                                        <figcaption>[caption]</figcaption>
                                    </figure>
                                

Image avec figcaption au début

Lorem ipsum dolor sit amet consectetur adipisicing elit.

                                    <figure>
                                        <img class="img--medium" src="[Image]" alt="">
                                        <figcaption>[Caption]</figcaption>
                                    </figure>
                                

Boîte image-texte

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione impedit quasi exercitationem, distinctio quae?

Laudantium, pariatur accusantium. Perspiciatis tempora eaque, voluptate vero perferendis a! Aliquam accusamus ad sequi recusandae.


                                    <div class="image-texte">
                                        <div class="image-texte__image"><img src="[image]" alt=""></div>
                                        <div class="image-texte__texte">
                                            [contenu]
                                        </div>
                                    </div>
                                

Image qui flotte

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ducimus, nostrum aut aliquam nam labore deserunt totam facilis recusandae reprehenderit doloremque reiciendis perspiciatis, hic temporibus similique officiis, tenetur delectus perferendis?

Facilis adipisci vero est labore deleniti atque fuga quis cum natus delectus distinctio aliquam eaque rerum, corporis eligendi! Accusamus expedita exercitationem vero nam modi ipsam quod voluptas rerum saepe officiis.

Autem officiis maiores minus, qui harum natus enim nisi quas itaque dolorem exercitationem repudiandae nostrum praesentium animi quidem impedit quasi asperiores totam consequuntur dolore labore recusandae eligendi rem facere. Incidunt?


                                    <div class="image-flottante">
                                        <img src="[image]" alt="">
                                        [contenu]
                                    </div>
                                

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ducimus, nostrum aut aliquam nam labore deserunt totam facilis recusandae reprehenderit doloremque reiciendis perspiciatis, hic temporibus similique officiis, tenetur delectus perferendis?

Facilis adipisci vero est labore deleniti atque fuga quis cum natus delectus distinctio aliquam eaque rerum, corporis eligendi! Accusamus expedita exercitationem vero nam modi ipsam quod voluptas rerum saepe officiis.

Autem officiis maiores minus, qui harum natus enim nisi quas itaque dolorem exercitationem repudiandae nostrum praesentium animi quidem impedit quasi asperiores totam consequuntur dolore labore recusandae eligendi rem facere. Incidunt?


                                    <div class="image-flottante image-flottante--small">
                                        <img src="[image]" alt="">
                                        [contenu]
                                    </div>
                                

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ducimus, nostrum aut aliquam nam labore deserunt totam facilis recusandae reprehenderit doloremque reiciendis perspiciatis, hic temporibus similique officiis, tenetur delectus perferendis?

Facilis adipisci vero est labore deleniti atque fuga quis cum natus delectus distinctio aliquam eaque rerum, corporis eligendi! Accusamus expedita exercitationem vero nam modi ipsam quod voluptas rerum saepe officiis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis exercitationem ratione laudantium veniam molestias voluptatum nam culpa! Omnis, ab. Dolor veniam temporibus nesciunt perspiciatis et voluptatem distinctio quam maxime. Blanditiis!

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam at saepe voluptates facilis aspernatur, illo, commodi ea totam doloribus nostrum quis voluptate odit molestias consectetur odio voluptatem voluptatum quasi nulla.

Autem officiis maiores minus, qui harum natus enim nisi quas itaque dolorem exercitationem repudiandae nostrum praesentium animi quidem impedit quasi asperiores totam consequuntur dolore labore recusandae eligendi rem facere. Incidunt?


                                    <div class="image-flottante">
                                        <img src="[image]" alt="">
                                        [contenu]
                                        <img src="[image]" alt="">
                                        [contenu]
                                    </div>
                                

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ducimus, nostrum aut aliquam nam labore deserunt totam facilis recusandae reprehenderit doloremque reiciendis perspiciatis, hic temporibus similique officiis, tenetur delectus perferendis?

Facilis adipisci vero est labore deleniti atque fuga quis cum natus delectus distinctio aliquam eaque rerum, corporis eligendi! Accusamus expedita exercitationem vero nam modi ipsam quod voluptas rerum saepe officiis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis exercitationem ratione laudantium veniam molestias voluptatum nam culpa! Omnis, ab. Dolor veniam temporibus nesciunt perspiciatis et voluptatem distinctio quam maxime. Blanditiis!

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam at saepe voluptates facilis aspernatur, illo, commodi ea totam doloribus nostrum quis voluptate odit molestias consectetur odio voluptatem voluptatum quasi nulla.

Autem officiis maiores minus, qui harum natus enim nisi quas itaque dolorem exercitationem repudiandae nostrum praesentium animi quidem impedit quasi asperiores totam consequuntur dolore labore recusandae eligendi rem facere. Incidunt?


                                    <div class="image-flottante image-flottante--small image-flottante--invert">
                                        <img src="[image]" alt="">
                                        [contenu]
                                        <img src="[image]" alt="">
                                        [contenu]
                                    </div>
                                

Tableaux

Intertitre : Tableau 1 (barre défilante sur mobile)

Lorem ipsum dolor sit amet
Colonne 1 Colonne 2 Colonne 3 Colonne 4
Lorem ipsum
  1. ut venenatis neque iaculis
  2. aliquam eros quis
  3. ut venenatis neque iaculis
  4. aliquam eros quis
Curabitur pellentesque porta lorem, in consectetur justo egestas ac Quisque accumsan neque
Proin ultricies egestas
  1. molestie a orci
  2. molestie a orci
Vivamus suscipit rhoncus tempus Curabitur lacinia finibus magna, non faucibus libero convallis id

Note. Pour que la note soit collé à l'élément d'en haut, mettre la classe .sansMarge à l'élément d'en haut.


                                    <p class="interTitre">[Titre]</p>
                                    <div class="tableau style1 sansMarge">
                                        <table>
                                            [...]
                                        </table>
                                    </div>
                                    <p class="note">[note]</p>
                                

Intertitre : Tableau 1 (avec couleurs d'entête)

Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5
Lorem ipsum
  1. ut venenatis neque iaculis
  2. aliquam eros quis
  3. ut venenatis neque iaculis
  4. aliquam eros quis
Curabitur pellentesque porta lorem, in consectetur justo egestas ac Curabitur pellentesque porta lorem, in consectetur justo egestas ac Quisque accumsan neque

                                    <th class="bg--rouge">Colonne 1</th>
                                    <th class="bg--turquoise">Colonne 2</th>
                                    <th class="bg--peche">Colonne 3</th>
                                    <th class="bg--vert">Colonne 4</th>
                                    <th class="bg--gris">Colonne 5</th>
                                

Bulles

Bulle seule

L'attribution des couleurs se fait "aléatoirement", mais peut être forcée à l'aide des classes de couleur (ex. .bulle-orange).

Turquoise lorem ipsum dolor, sit amet consectetur adipisicing elit.
Turquoise lorem ipsum dolor, sit amet consectetur adipisicing elit.

                                    <div class="bulle"> [Contenu] </div>
                                    <div class="bulle bulle--turquoise"> [Contenu] </div>
                                    <div class="bulle bulle--vert"> [Contenu] </div>
                                    <div class="bulle bulle--bleu"> [Contenu] </div>
                                    <div class="bulle bulle--orange"> [Contenu] </div>
                                    <div class="bulle bulle--rouge"> [Contenu] </div>
                                

Liste de bulles

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum esse nulla perferendis animi iste facilis?
Saepe officia iste voluptate dolorum debitis! Id quam repudiandae cupiditate excepturi!
Atque similique velit necessitatibus reiciendis id, ratione vel voluptas optio at neque ullam distinctio.
Facilis a sint sapiente temporibus alias doloribus sit tempora ab.
Modi rerum recusandae praesentium quas id vel facilis eligendi aut nesciunt, laudantium voluptatibus. Soluta.

                                    <div class="bulles">
                                        <div class="bulle">[Contenu]</div>
                                    </div>
                                

Bulles-photo

La bulle sera étirée par défaut pour égaler la photo.


                                    <div class="bulles bulles--photo">
                                        <div class="bulle">
                                            [Contenu]
                                        </div>
                                        <img class="bulles__photo" src="[Image]" alt="">
                                    </div>
                                

                                    div.bulles.bulles--photo>.bulle+img.bulles__photo
                                

Trop de texte

Une bulle avec trop de texte vs. la photo sera centrée avec cette dernière.

Il est possible de changer la couleur de la bulle avec la classe correspondante (ex. .bulle--orange).


                                    <div class="bulles bulles--photo">
                                        <div class="bulle bulle--orange">
                                            [Contenu]
                                        </div>
                                        <img class="bulles__photo" src="[Image]" alt="">
                                    </div>
                                

Inverser la photo et la bulle avec la classe .bulles--invert.


                                    <div class="bulles bulles--photo bulles--invert">
                                        <div class="bulle bulle--turquoise">
                                            [Contenu]
                                        </div>
                                        <img class="bulles__photo" src="[Image]" alt="">
                                    </div>
                                

La bulle n'est pas étirée (.bulle--nostretch).


                                    <div class="bulles bulles--photo">
                                        <div class="bulle bulle--verte bulle--nostretch">
                                            [Contenu]
                                        </div>
                                        <img class="bulles__photo" src="[Image]" alt="">
                                    </div>
                                

La bulle et la photo sont alignés en bas (.bulles--bottom et .bulle--nostretch).


                                    <div class="bulles bulles--photo bulles--bottom">
                                        <div class="bulle bulle--orange bulle--nostretch">
                                            [Contenu]
                                        </div>
                                        <img class="bulles__photo" src="[Image]" alt="">
                                    </div>
                                

Discussion

Savais-tu qu'on pouvait baliser des discussions?

Bien sûr! Et automatiquement, les deux belligérants seront alignés sur la ligne du bas, avec les deux bulles de discussions qui s'affichent au dessus!

Il suffit de s'assurer que les deux images ont le même ratio.


                                    <div class="discussion">
                                        <div class="discussion__participant">
                                            <div class="bulle">
                                                [contenu]
                                            </div>
                                            <img class="discussion__image" src="[image]" alt="">
                                        </div>
                                        <div class="discussion__participant">
                                            <div class="bulle bulle--turquoise">
                                                [contenu]
                                            </div>
                                            <img class="discussion__image" src="[image]" alt="">
                                        </div>
                                    </div>
                                

Boîtes

Boîte avenir

Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, sapiente corporis ipsum in qui quam debitis.


                                    <div class="boite boite--avenir">
                                        [contenu]
                                    </div>
                                

Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, sapiente corporis ipsum in qui quam debitis.


                                    <div class="boite boite--avenir boite--avenir--gauche">
                                        [contenu]
                                    </div>
                                

Lorem ipsum dolor sit amet consectetur


                                    <div class="boite boite--avenir boite--avenir--maj">
                                        <p>[contenu] <span>[contenu]</span></p>
                                    </div>
                                

Boîte exemple

Exemple

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione architecto aspernatur quibusdam quae sequi. Expedita molestiae, aliquid repudiandae inventore provident soluta aspernatur quaerat. Dolorum neque a eum odit, iure cupiditate?
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem excepturi fuga corporis sint, consectetur beatae quidem laborum quas enim dolorum perferendis cupiditate laudantium a ducimus cum! Enim, voluptatum. Inventore, soluta.

                                    <div class="boite boite--exemple">
                                        <h2 class="boite__titre">[Titre]</h2>
                                        [Contenu]
                                    </div>
                                

Boîte modèle

Modèle

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione architecto aspernatur quibusdam quae sequi. Expedita molestiae, aliquid repudiandae inventore provident soluta aspernatur quaerat. Dolorum neque a eum odit, iure cupiditate?
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem excepturi fuga corporis sint, consectetur beatae quidem laborum quas enim dolorum perferendis cupiditate laudantium a ducimus cum! Enim, voluptatum. Inventore, soluta.

                                    <div class="boite boite--modele">
                                        <h2 class="boite__titre">[Titre]</h2>
                                        [Contenu]
                                    </div>
                                

Boîte exemple avec citation

Exemple avec citation

Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, impedit autem dolores quo excepturi sequi debitis totam error voluptatibus dolore veritatis. Ducimus dolor voluptate vitae consequatur omnis voluptates optio fuga?

  • Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, omnis repellendus blanditiis ipsum dolor sed doloremque consequatur ullam molestiae repellat nisi quis inventore id nulla sint quos excepturi praesentium odio?
  • Praesentium excepturi nisi dolorem quod modi. Dolore, enim possimus inventore voluptatibus ex nostrum quisquam error ea eveniet quaerat architecto, culpa vero ab est quia nulla ut modi tempore pariatur odit.
  • Facilis dolore esse distinctio aut reprehenderit aspernatur? Nisi eius quos, quisquam ab enim numquam ipsum sapiente adipisci dolore obcaecati officia fuga doloremque aspernatur sunt quaerat, ipsam expedita magni! Voluptatibus, ducimus?

Boîte emphase

Conseil pratique

.boite--conseil Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem necessitatibus, atque non voluptate cupiditate neque est repellendus esse laboriosam totam labore architecto earum aspernatur vel, perferendis laborum error aut illo!

Conseil pratique

.boite--activite Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem necessitatibus, atque non voluptate cupiditate neque est repellendus esse laboriosam totam labore architecto earum aspernatur vel, perferendis laborum error aut illo!

Conseil pratique

.boite--attention Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem necessitatibus, atque non voluptate cupiditate neque est repellendus esse laboriosam totam labore architecto earum aspernatur vel, perferendis laborum error aut illo!

Conseil pratique

.boite--evaluation Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem necessitatibus, atque non voluptate cupiditate neque est repellendus esse laboriosam totam labore architecto earum aspernatur vel, perferendis laborum error aut illo!

Conseil pratique

.boite--important Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem necessitatibus, atque non voluptate cupiditate neque est repellendus esse laboriosam totam labore architecto earum aspernatur vel, perferendis laborum error aut illo!

Conseil pratique

.boite--lecture Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem necessitatibus, atque non voluptate cupiditate neque est repellendus esse laboriosam totam labore architecto earum aspernatur vel, perferendis laborum error aut illo!

Conseil pratique

.boite--loin Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem necessitatibus, atque non voluptate cupiditate neque est repellendus esse laboriosam totam labore architecto earum aspernatur vel, perferendis laborum error aut illo!

Conseil pratique

.boite--rappel dolor sit amet consectetur adipisicing elit. Autem necessitatibus, atque non voluptate cupiditate neque est repellendus esse laboriosam totam labore architecto earum aspernatur vel, perferendis laborum error aut illo!

Conseil pratique

.boite--rappel dolor sit amet consectetur adipisicing elit. Autem necessitatibus, atque non voluptate cupiditate neque est repellendus esse laboriosam totam labore architecto earum aspernatur vel, perferendis laborum error aut illo!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi eaque animi quos molestias nihil nisi dicta placeat, aliquid deleniti ratione alias temporibus doloribus? Placeat, nemo. Voluptates saepe neque quod exercitationem?

Signature

Boîte emphase courte.

Conseil pratique

.boite--zen Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem necessitatibus, atque non voluptate cupiditate neque est repellendus esse laboriosam totam labore architecto earum aspernatur vel, perferendis laborum error aut illo!


                                    <div class="boite boite--emphase boite--conseil">
                                        <h2 class="sr-only print">[Titre (caché)]</h2>
                                        [Contenu]
                                    </div>
                                    <div class="boite boite--emphase boite--conseil">
                                        <h2 class="boite__titre">[Titre]</h2>
                                        [Contenu]
                                    </div>
                                

Boîte citation

« Il n’y a pas de mauvaise question, sauf celle que tu vas garder pour toi. »

(vieil adage)

                                    <blockquote class="boite boite--citation">
                                        <p>[Citation]</p>
                                        <cite class="signature">[Source]</cite>
                                    </blockquote>
                                

Boîte objectifs

Au terme de ce module, vous serez en mesure d’en savoir plus sur comment :

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste ad iusto quo quis veritatis aperiam sed deserunt doloribus placeat esse nulla vitae eius, at in veniam nam corporis facere vel.


                                    <div class="boite boite--objectifs">
                                        [Contenu]
                                    </div>
                                

Boîte journal de bord

Journal de bord

Journal de bord

Lorem ipsum dolor sit amet

Lorem ipsum Télécharger le document Word


                                    <div class="boite boite--objectifs">
                                        <h2 class="boite__titre">Journal de bord</h2>
                                        <div class="image-flottante image-flottante--small image-flottante--invert">
                                            <img src="/pluginfile.php/28/mod_folder/content/0/images/img_journal_de_bord_500px.png" alt="Journal de bord">
                                            <p>Lorem ipsum dolor sit amet</p>
                                            <p><a href="#document#journal-de-bord" target="_blank" title="Télécharger le document Word.">Lorem ipsum<span class="sr-only"> Télécharger le document Word</span></a></p>
                                        </div>
                                    </div>
                                

Boîte savoir

Pour en savoir plus

Lorem ipsum dolor sit amet consectetur adipisicing elit. Lien dans la boîte savoir iste ad iusto quo quis veritatis aperiam sed deserunt doloribus placeat esse nulla vitae eius, at in veniam nam corporis facere vel.

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat deserunt facere fugit error quia quaerat debitis asperiores, qui quam nam excepturi ea ipsam officia sequi unde, numquam quidem, architecto voluptatum?
  2. Accusamus, minima vitae excepturi illum soluta iste ea expedita repellat vel molestiae delectus voluptatibus facilis necessitatibus rem. Maiores, delectus. Vel dolorem officiis officia nemo unde praesentium numquam explicabo nulla at?
  3. Alias similique ipsa vel consectetur vero autem, dolorem nihil repellat iusto esse consequuntur reprehenderit dignissimos ex, delectus est quidem qui nemo eligendi! Quaerat rerum corrupti necessitatibus nesciunt illo, dolore similique.

                                    <div class="boite boite--savoir">
                                        <h2 class="boite__titre">Pour en savoir plus</h2>
                                        <div class="boite__contenu">
                                            [Contenu]
                                        </div>
                                    </div>
                                

Encadrés

Encadré outil

Je suis un bel encadré


                                    <div class="boite boite--outil">
                                        [Contenu]
                                    </div>
                                

Encadré glossaire

Je suis un bel encadré


                                    <div class="boite boite--glossaire">
                                        [Contenu]
                                    </div>
                                

Encadré échanger

Je suis un bel encadré


                                    <div class="boite boite--echanger">
                                        [Contenu]
                                    </div>
                                

Accordéons

Accordéon standard

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

                                    <div class="accordeon">
                                        <button class="accordeon__toggler"
                                            type="button"
                                            data-toggle="collapse"
                                            data-target="#[id_boite]"
                                            aria-expanded="false"
                                            aria-controls="[id_boite]">
                                            [Titre]
                                        </button>
                                        <div class="collapse boite" id="[id_boite]">
                                            [Contenu]
                                        </div>
                                    </div>
                                

Accordéon avec étiquette

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

                                    <div class="accordeon">
                                        <button class="accordeon__toggler" type="button" data-toggle="collapse" data-target="#[id]" aria-expanded="false" aria-controls="[id]"><span class="accordeon__tag">[étiquette]</span> [titre]</button>
                                        <div class="collapse boite" id="[id]">[contenu]</div>
                                    </div>
                                

Accordéon référence

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

  • Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda sapiente id dolorum ex libero, at impedit harum inventore odit quas quidem beatae, deleniti molestias eveniet ullam possimus a fuga unde?
  • Illo dolores mollitia harum non, eaque unde eum nihil porro alias laborum, nemo, ducimus qui. Vel veritatis ab debitis numquam ipsa id quia est voluptatem suscipit, iste inventore repellendus? Cum.
  • Molestias quidem recusandae animi dolores? Sit quisquam ex esse quasi ad incidunt deserunt aperiam provident! Sequi dolores modi alias vero explicabo ratione ducimus facere cumque! Odit libero accusamus nostrum quisquam?

                                    <div class="accordeon accordeon--image accordeon--reference">
                                        <button class="accordeon__toggler"
                                            type="button"
                                            data-toggle="collapse"
                                            data-target="#[id_boite]"
                                            aria-expanded="false"
                                            aria-controls="[id_boite]">[Titre]</button>
                                        <div class="collapse boite" id="[id_boite]">[Contenu]</div>
                                    </div>
                                

Accordéon avantages

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

                                    <div class="accordeon accordeon--image accordeon--avantage">
                                    <button class="accordeon__toggler" type="button" data-toggle="collapse" data-target="#[id]" aria-expanded="false" aria-controls="[id]">[titre]</button>
                                        <div class="collapse boite" id="[id]">[contenu]</div>
                                    </div>
                                

Accordéon inconvénients

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

                                    <div class="accordeon accordeon--image accordeon--inconvenients">
                                    <button class="accordeon__toggler" type="button" data-toggle="collapse" data-target="#[id]" aria-expanded="false" aria-controls="[id]">[titre]</button>
                                        <div class="collapse boite" id="[id]">[contenu]</div>
                                    </div>
                                

Icônes

Icône .ico--[icone] .ico--s .ico--m .ico--l
.ico--activite Activité
.ico--android
.ico--attention
.ico--conseil
.ico--evaluation
.ico--fleur_de_lys
.ico--important
.ico--lecture
.ico--linux
.ico--loin
.ico--osx
.ico--outlook
.ico--rappel
.ico--recommande
.ico--windows

Utiliser un span.sr-only dans la balise s'il est nécessaire de transmettre l'équivalent textuel de l'icône.


                                    <i class="ico--activite"><span class="sr-only">Activité</span></i> // 1em
                                    <i class="ico--activite ico--s"></i> // 20px
                                    <i class="ico--activite ico--m"></i> // 40px
                                    <i class="ico--activite ico--l"></i> // 75px
                                    <i class="ico--activite ico--xl"></i> // 150px
                                

Au besoin, la taille de l'icône peut toujours être redéfinie dans un module précis ([class^="ico--"]).

Par défaut, l'icône est centré dans la boîte (background-position: center center).Il est possible de positionner l'icône dans le carré à l'aide d'une classe supplémentaire.


                                    &--lt
                                        background-position: left top
                                    &--rt
                                        background-position: right top
                                    &--rb
                                        background-position: right bottom
                                    &--lb
                                        background-position: left bottom
                                    &--ct
                                        background-position: center top
                                    &--rc
                                        background-position: right center
                                    &--cb
                                        background-position: center bottom
                                    &--lc
                                        background-position: left center
                                

Éléments interactifs

Caroussel

Circonstances historiques et sociales qui ont justifié la création de la Loi sur l’équité salariale

Historiquement, les hommes avaient la responsabilité de subvenir aux besoins financiers de la famille.

Quand les femmes travaillaient, c’était souvent pour un salaire d’appoint.

Ce salaire pouvait permettre à la famille d’arrondir les fins de mois. Il n’était toutefois pas considéré comme un salaire à part entière.

Les femmes occupaient principalement des emplois dans la continuité de leurs responsabilités familiales :

  • éduquer les enfants,
  • prendre soin des malades,
  • accompagner des personnes âgées,
  • servir des repas,
  • faire de l’entretien ménager,
  • etc.

                                    <div class="ligne-temps">
                                        <h3 class="ligne-temps__titre">[Titre]</h3>
                                        <div class="ligne-temps__slider">
                                            <!-- Slide -->
                                            <div>
                                                <div class="ligne-temps__entete">
                                                    <img src="[Image]" alt="">
                                                </div>
                                                <div class="ligne-temps__corps">
                                                    <div class="ligne-temps__texte">
                                                        [Contenu]
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                

Caroussel avec vidéos Youtube

Pouvez-vous nous donner des exemples concrets d’activités synchrones et asynchrones que vous avez fait vivre à vos élèves?

Enseignante du 1er cycle [1 min 33 s]

Enseignante du 2e cycle [58 s]

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem cupiditate voluptatibus id dolorum culpa voluptatem aliquam saepe error inventore explicabo accusantium iusto nam obcaecati tenetur, dolores enim ducimus! Libero, nulla!


                                    <div class="ligne-temps">
                                        <p class="ligne-temps__titre">[titre]</p>
                                        <div class="ligne-temps__slider">
                                            <div>
                                                <div class="ligne-temps__corps">
                                                    <div class="ligne-temps__texte">
                                                        <div class="videoWrapper">
                                                            <iframe width="560" height="315" src="[src]?rel=0&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                

Note : Le paramètre enablejsapi=1 doit être ajouté à la source de la vidéo Youtube. La vidéo en cours de lecture sera pausée lors du changement de slide.

Schéma interactif

Circonstances historiques et sociales qui ont justifié la création de la Loi sur l’équité salariale

Lorem ipsum 1

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque voluptatem consequuntur sed quidem labore blanditiis? Id repellat incidunt veniam fuga? Nobis natus explicabo corporis est ratione perspiciatis nisi rerum itaque!

Lorem ipsum 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi minima error consequatur eius culpa nostrum molestias quos, debitis molestiae enim, provident repellendus aliquid maxime. Consequuntur quae sapiente veritatis cum cupiditate.

Lorem ipsum 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam ducimus id maxime! Quia voluptatibus mollitia ut quod voluptas architecto, reiciendis quisquam ea iste assumenda voluptate officiis dolorem maxime doloremque quasi.


                                    <div class="schema">
                                        <h3 class="schema__titre">[titre]</h3>
                                        <div class="schema__onglets"></div>
                                        <div class="slider">
                                            <!-- Slide -->
                                            <div>
                                                <div class="schema__image">
                                                    <img src="[image]" alt="">
                                                </div>
                                                <div class="schema__contenu">
                                                    <h4 class="schema__sous-titre">[sous-titre]</h4>
                                                    [contenu]
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                

Schéma interactif - Variation pastel

Circonstances historiques et sociales qui ont justifié la création de la Loi sur l’équité salariale

Lorem ipsum 1

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque voluptatem consequuntur sed quidem labore blanditiis? Id repellat incidunt veniam fuga? Nobis natus explicabo corporis est ratione perspiciatis nisi rerum itaque!

Lorem ipsum 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi minima error consequatur eius culpa nostrum molestias quos, debitis molestiae enim, provident repellendus aliquid maxime. Consequuntur quae sapiente veritatis cum cupiditate.

Lorem ipsum 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam ducimus id maxime! Quia voluptatibus mollitia ut quod voluptas architecto, reiciendis quisquam ea iste assumenda voluptate officiis dolorem maxime doloremque quasi.


                                    <div class="schema schema--pastel">
                                        <h3 class="schema__titre">[titre]</h3>
                                        <div class="schema__onglets"></div>
                                        <div class="slider">
                                            <!-- Slide -->
                                            <div>
                                                <div class="schema__image">
                                                    <img src="[image]" alt="">
                                                </div>
                                                <div class="schema__contenu">
                                                    <h4 class="schema__sous-titre">[sous-titre]</h4>
                                                    [contenu]
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                

Schéma interactif avec discussion

Lorem ipsum

Savais-tu qu'on pouvait baliser des discussions?

Bien sûr! Et automatiquement, les deux belligérants seront alignés sur la ligne du bas, avec les deux bulles de discussions qui s'affichent au dessus!

Il suffit de s'assurer que les deux images ont le même ratio.

Vignette avec discussion

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit omnis, mollitia in pariatur dicta nostrum placeat laudantium molestias illo rerum corporis ea magni iusto ex? Et magni dolore modi ipsum.

Savais-tu qu'on pouvait baliser des discussions?

Bien sûr! Et automatiquement, les deux belligérants seront alignés sur la ligne du bas, avec les deux bulles de discussions qui s'affichent au dessus!

Il suffit de s'assurer que les deux images ont le même ratio.

Vignette avec discussion

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit omnis, mollitia in pariatur dicta nostrum placeat laudantium molestias illo rerum corporis ea magni iusto ex? Et magni dolore modi ipsum.


                                    <div class="schema">
                                        <h3 class="schema__titre">[titre]</h3>
                                        <div class="schema__onglets"></div>
                                        <div class="slider">
                                            <!-- Slide 1 -->
                                            <div>
                                                <div class="schema__image">
                                                    <div class="discussion">
                                                        <div class="discussion__participant">
                                                            <div class="bulle">
                                                                [contenu]
                                                            </div>
                                                            <img class="discussion__image" src="[image]" alt="">
                                                        </div>
                                                        <div class="discussion__participant">
                                                            <div class="bulle bulle--turquoise">
                                                                [contenu]
                                                            </div>
                                                            <img class="discussion__image" src="[image]" alt="">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="schema__contenu">
                                                    <h4 class="schema__sous-titre">[sous-titre]</h4>
                                                    [contenu]
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                

Pastilles

Pastilles avec flèche

Lorem ipsum
Spécifique

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni laboriosam qui porro, perferendis, nulla quidem hic exercitationem cupiditate iure, voluptates quae soluta neque laborum. Expedita aut impedit quae animi voluptas?

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium ipsam, nulla alias commodi distinctio iusto ad excepturi animi officia hic aspernatur eius corporis eveniet ea, aut quis inventore odio molestiae!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde sed nihil necessitatibus id reprehenderit, maiores, a delectus consequuntur natus atque architecto error eum ullam blanditiis corrupti similique facilis libero est.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod voluptate accusamus ab omnis libero illo sunt. Labore saepe eaque iusto, commodi, animi accusamus harum nesciunt enim nulla molestiae assumenda esse.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam beatae minus magni, quas odit eum delectus voluptate molestias consequuntur earum, cupiditate, sequi esse vitae adipisci? Illo fuga aspernatur molestias eligendi.

Un objectif doit être :

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus consequuntur accusantium facere laboriosam unde autem iusto maxime consectetur ut quaerat ab, eum maiores similique alias. Placeat non corporis eos iste?

Rerum praesentium atque nihil, reiciendis earum adipisci voluptas mollitia tempore doloremque assumenda, non est voluptatem quae deleniti saepe harum laudantium iste illo quos quibusdam sunt accusantium. Error quam rem maiores?

Eos unde asperiores magnam incidunt provident ab ipsam atque natus praesentium nobis facere, nihil ratione molestias quam reprehenderit nulla debitis vitae qui ipsum velit, dolorem eveniet? Nobis sapiente pariatur et.

Aliquam et consequuntur ipsa id, doloremque eligendi harum odio minima rem libero quam, nihil totam consectetur vitae ipsum vel enim veniam, voluptates earum sit tempora porro mollitia quos velit! Dignissimos!

Approprié

Un objectif doit être :

  • Simple
  • Clair et précis
  • Sans ambiguité
Réaliste

Un objectif doit être :

  • Simple
  • Clair et précis
  • Sans ambiguité
Temporel

Un objectif doit être :

  • Simple
  • Clair et précis
  • Sans ambiguité

                                    <div class="pastilles pastilles--fleche">
                                        <div class="pastilles__titre sr-only">[titre]</div>
                                        <img class="pastilles__image--flottante" src="[image]" alt="">
                                        <div class="pastilles__slide" data-pastilles-label="[label]" data-pastilles-group="[groupe]">
                                            <div class="pastilles__sous-titre">[sous-titre]</div>
                                            [contenu]
                                        </div>
                                    </div>
                                

Pastilles avec flèche droite

Lorem ipsum
Spécifique

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni laboriosam qui porro, perferendis, nulla quidem hic exercitationem cupiditate iure, voluptates quae soluta neque laborum. Expedita aut impedit quae animi voluptas?

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium ipsam, nulla alias commodi distinctio iusto ad excepturi animi officia hic aspernatur eius corporis eveniet ea, aut quis inventore odio molestiae!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde sed nihil necessitatibus id reprehenderit, maiores, a delectus consequuntur natus atque architecto error eum ullam blanditiis corrupti similique facilis libero est.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod voluptate accusamus ab omnis libero illo sunt. Labore saepe eaque iusto, commodi, animi accusamus harum nesciunt enim nulla molestiae assumenda esse.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam beatae minus magni, quas odit eum delectus voluptate molestias consequuntur earum, cupiditate, sequi esse vitae adipisci? Illo fuga aspernatur molestias eligendi.

Un objectif doit être :

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus consequuntur accusantium facere laboriosam unde autem iusto maxime consectetur ut quaerat ab, eum maiores similique alias. Placeat non corporis eos iste?

Rerum praesentium atque nihil, reiciendis earum adipisci voluptas mollitia tempore doloremque assumenda, non est voluptatem quae deleniti saepe harum laudantium iste illo quos quibusdam sunt accusantium. Error quam rem maiores?

Eos unde asperiores magnam incidunt provident ab ipsam atque natus praesentium nobis facere, nihil ratione molestias quam reprehenderit nulla debitis vitae qui ipsum velit, dolorem eveniet? Nobis sapiente pariatur et.

Aliquam et consequuntur ipsa id, doloremque eligendi harum odio minima rem libero quam, nihil totam consectetur vitae ipsum vel enim veniam, voluptates earum sit tempora porro mollitia quos velit! Dignissimos!

Approprié

Un objectif doit être :

  • Simple
  • Clair et précis
  • Sans ambiguité
Réaliste

Un objectif doit être :

  • Simple
  • Clair et précis
  • Sans ambiguité

                                    <div class="pastilles pastilles--fleche pastilles--fleche-droite">
                                        <div class="pastilles__titre sr-only">[titre]</div>
                                        <img class="pastilles__image--flottante" src="[image]" alt="">
                                        <div class="pastilles__slide" data-pastilles-label="[label]" data-pastilles-group="[groupe]">
                                            <div class="pastilles__sous-titre">[sous-titre]</div>
                                            [contenu]
                                        </div>
                                    </div>
                                

Pastilles sans flèche

Lorem ipsum
Spécifique

Un objectif doit être :

  • Simple
  • Clair et précis
  • Sans ambiguité
Mesurable

Un objectif doit être :

  • Simple
  • Clair et précis
  • Sans ambiguité
Approprié

Un objectif doit être :

  • Simple
  • Clair et précis
  • Sans ambiguité
Réaliste

Un objectif doit être :

  • Simple
  • Clair et précis
  • Sans ambiguité
Temporel

Un objectif doit être :

  • Simple
  • Clair et précis
  • Sans ambiguité

                                    <div class="pastilles">
                                        <div class="pastilles__titre">[titre]</div>
                                        <div class="pastilles__slide" data-pastilles-label="[label]" data-pastilles-group="[groupe]">
                                            <div class="pastilles__sous-titre">[sous-titre]</div>
                                            [contenu]
                                        </div>
                                    </div>
                                

Note : L'attribut data-pastilles-label est obligatoire. L'attribut data-pastilles-group est facultatif. Mettre la même valeur pour l'attribut data-pastilles-group pour toutes les pastilles devant être regroupées.

Pastilles sans groupes, avec numéros, sans flèche

Lorem ipsum
Lorem ipsum 1

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam quaerat incidunt vel rerum corporis debitis a dignissimos? Quod magnam deleniti quasi ut perferendis placeat nisi culpa velit? Consequatur, quidem ut!

Lorem ipsum 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit praesentium est deserunt, quos delectus, autem dicta tempore quasi ipsam dignissimos nihil qui impedit sit vero provident blanditiis obcaecati enim modi.

Lorem ipsum 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae cumque labore modi distinctio perspiciatis atque facere deleniti rem nemo dolores. Reiciendis recusandae natus explicabo porro perferendis architecto nam vel vitae?


                                    <div class="pastilles">
                                        <div class="pastilles__titre">[titre]</div>
                                        <div class="pastilles__slide" data-pastilles-label="1">
                                            <div class="pastilles__sous-titre">[sous-titre]</div>
                                            [contenu]
                                        </div>
                                    </div>
                                

Note : Une valeur numérique est utilisée dans l'attribut data-pastilles-label. L'attribut data-pastilles-group n'est pas utilisé.

Pastilles sans groupe, avec numéros, avec flèche

Lorem ipsum
Lorem ipsum 1

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam quaerat incidunt vel rerum corporis debitis a dignissimos? Quod magnam deleniti quasi ut perferendis placeat nisi culpa velit? Consequatur, quidem ut!

Lorem ipsum 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit praesentium est deserunt, quos delectus, autem dicta tempore quasi ipsam dignissimos nihil qui impedit sit vero provident blanditiis obcaecati enim modi.

Lorem ipsum 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae cumque labore modi distinctio perspiciatis atque facere deleniti rem nemo dolores. Reiciendis recusandae natus explicabo porro perferendis architecto nam vel vitae?


                                    <div class="pastilles pastilles--fleche">
                                        <div class="pastilles__titre">[titre]</div>
                                        <div class="pastilles__slide" data-pastilles-label="1">
                                            <div class="pastilles__sous-titre">[sous-titre]</div>
                                            [contenu]
                                        </div>
                                    </div>
                                

Pastilles sans groupe, avec numéros, avec flèche, monochrome jaune

Lorem ipsum
Lorem ipsum 1

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam quaerat incidunt vel rerum corporis debitis a dignissimos? Quod magnam deleniti quasi ut perferendis placeat nisi culpa velit? Consequatur, quidem ut!

Lorem ipsum 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit praesentium est deserunt, quos delectus, autem dicta tempore quasi ipsam dignissimos nihil qui impedit sit vero provident blanditiis obcaecati enim modi.

Lorem ipsum 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae cumque labore modi distinctio perspiciatis atque facere deleniti rem nemo dolores. Reiciendis recusandae natus explicabo porro perferendis architecto nam vel vitae?

Similiquiz

Mis à jour Mythes et réalités sur la FAD

Plusieurs mythes circulent au sujet de la FAD. Saurez-vous les reconnaître?

  1. Je peux mettre en ligne les cours que je donne d’habitude en classe.

  2. La FAD est aussi efficace que l’enseignement en présence.

  3. La FAD convient parfaitement à tous les apprenants.

  4. La FAD est un moyen de diminuer le rôle de l’enseignant.


                                    <h4 class="intertitre">[titre]</h4>
                                    [description]
                                    <div class="similiquiz">
                                        <ol class="lstQuestions">
                                            <li data-typeVal="BonneReponse" data-typeRetro="Générale">
                                                <div class="txtQuestion">
                                                    [question]
                                                </div>
                            
                                                <ul class="lstChReponses">
                                                    <li>
                                                        <input class="custom" type="radio" name="q1" id="q1_chRep1" data-reponse="Bonne" />
                                                        <label for="q1_chRep1">[réponse]</label>
                                                    </li>
                                                </ul>
                            
                                                <div class="retro">
                                                    [rétroaction]
                                                </div>
                                            </li>
                                        </ol>
                                        <div class="etats"></div>
                                        <div class="controles">
                                            <div class="validation">
                                                <button type="submit">Valider</button>
                                            </div>
                                            <div class="navigation">
                                                <ul>
                                                    <li class="prec"><a href="#" title="«&nbsp;Question précédente">&lt;<span class="sr-only">Question précédente</span></a></li>
                                                    <li class="suiv"><a href="#" title="Question suivante&nbsp;»"><span class="sr-only">Question suivante</span>&gt;</a></li>
                                                </ul>
                                            </div>
                                            <div class="status"></div>
                                        </div>
                                    </div>
                                

Note : Voir les autres possibilités de questions sur STP 1234.

Back to the top of the page.

This site uses cookies for analysis and navigation optimization. By clicking OK, you agree to the installation and use of these cookies. For more information, you can consult the Privacy Policy