Différences

Ci-dessous, les différences entre deux révisions de la page.

--- bootstrapwrapper [2021/01/26 18:13] – villersd
+++ bootstrapwrapper [2021/05/26 02:53] – [Hello, world!] villersd
@@ Ligne 22: / Ligne 22: @@
 </accordion>
+=== Application à des QCM ===
+<callout type="question" icon="true">
-<callout type="default">
 Des masses égales de dioxygène et de dihydrogène réagissent dans un récipient fermé, conduisant à la formation d'eau. Après réaction complète, que contiendra le récipient ?
 </callout>
 <accordion collapsed="true">
-<panel title="de l'eau et du dioxygène seulement">
+<panel type="default"  no-body="true">
+<panel-body></panel-body>
+Sélectionnez une des propositions suivantes !
+</panel>
+<panel type="default" title="1. de l'eau et du dioxygène seulement">
 Faux. Il faut raisonner en terme de quantités de matière !
 </panel>
-<panel title="de l'eau et du dihydrogène seulement">
+<panel type="default" title="2. de l'eau et du dihydrogène seulement">
 Vrai. Il faut raisonner en terme de quantités de matière et le dihydrogène, très léger, est manifestement en excès. Le dioxygène est donc le réactif limitant, complètement consommé!
 </panel>
-<panel title="de l'eau seulement">
+<panel type="default" title="3. de l'eau seulement">
 Faux. Il faut raisonner en terme de quantités de matière et de stœchiométrie. Les réactifs ne sont pas en quantités correspondant à la stœechiométrie de la réaction !
 </panel>
-<panel title="de l'eau, du dihydrogène et du dioxygène">
+<panel type="default" title="4. de l'eau, du dihydrogène et du dioxygène">
 Faux. Si la réaction est complète ce n'est pas possible qu'il subsiste à la fois les deux réactifs!
 </panel>
 </accordion>
+=== Table des matières d'un livre ===
 <accordion>
@@ Ligne 100: / Ligne 107: @@
 **Well done!** You successfully read this important alert message.
 </alert>
+<alert type="success" dismiss="true" icon="fa fa-check-circle fa-3x fa-pull-right">C'est correct !</alert>
+<alert type="danger" dismiss="true" icon="fa fa-times-circle fa-3x fa-pull-right">Ce n'est pas correct !</alert>
 <alert type="warning" dismiss="true" icon="fa fa-warning">**Warning!** Better check yourself, you're not looking too good.</alert>
@@ Ligne 144: / Ligne 155: @@
     * [[https://commons.wikimedia.org/wiki/File:Metacognition.jpg]]
-<carousel>
+<carousel  interval="false">
+<slide>
+{{https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/GHS-pictogram-explos.svg/600px-GHS-pictogram-explos.svg.png}}
+</slide>
+<slide>
+{{https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/GHS-pictogram-flamme.svg/600px-GHS-pictogram-flamme.svg.png}}
+<caption>
+Description
+</caption>
+</slide>
+<slide>
+{{https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/GHS-pictogram-rondflam.svg/600px-GHS-pictogram-rondflam.svg.png}}
+<caption>
+</caption>
+</slide>
+<slide>
+{{https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/GHS-pictogram-bottle.svg/600px-GHS-pictogram-bottle.svg.png}}
+<caption>
+</caption>
+</slide>
+<slide>
+{{https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/GHS-pictogram-acid.svg/600px-GHS-pictogram-acid.svg.png}}
+<caption>
+</caption>
+</slide>
+<slide>
+{{https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/GHS-pictogram-skull.svg/600px-GHS-pictogram-skull.svg.png}}
+<caption>
+</caption>
+</slide>
+<slide>
+{{https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/GHS-pictogram-exclam.svg/600px-GHS-pictogram-exclam.svg.png}}
+<caption>
+</caption>
+</slide>
+<slide>
+{{https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/GHS-pictogram-silhouette.svg/600px-GHS-pictogram-silhouette.svg.png}}
+<caption>
+</caption>
+</slide>
+<slide>
+{{https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/GHS-pictogram-acid.svg/600px-GHS-pictogram-acid.svg.png}}
+<caption>
+</caption>
+</slide>
+<slide>
+{{https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/GHS-pictogram-pollu.svg/600px-GHS-pictogram-pollu.svg.png}}
+<caption>
+</caption>
+</slide>
+</carousel>
+  * autre carousel... :
+<carousel interval="false">
 <slide>
 {{https://3starlearningexperiences.files.wordpress.com/2020/09/xyz1.png?nolink|}}
@@ Ligne 168: / Ligne 234: @@
 </carousel>
+==== Collapse ====
+Quel est le nombre d'oxydation du manganèse dans l'ion permanganate ?
+<button collapse="foo">Cliquez ici</button>
+<collapse id="foo" collapsed="true"><well>
++7
+L'ion permanganate <chem>(MnO4)-</chem> est une espèce chimique à géométrie tétraédrique caractérisée par un atome de manganèse central lié à quatre atomes d'oxygène et portant une charge globale équivalente à un électron (-1). Chaque atome d'oxygène possède le nombre d'oxydation -2, donc si x est le n.o. recherché pour l'atome de manganèse, on a x + 4 * -2 = -1
+Le manganèse est donc à l'état d'oxydation +7, ce qui fait que l'ion permanganate(VII) est un agent oxydant puissant, puisque tout les autres composés du manganèse ont un nombre d'oxydation inférieur.
+</well></collapse>
 ==== Grids ====
@@ Ligne 184: / Ligne 263: @@
 <jumbotron>
-===== Hello, world! =====
+Hello, world !
 This is a simple hero unit, a simple jumbotron-style