Introduction

Dans la section ou en ajoutant la ressource "Zone de texte ou média" sur votre espace de cours, vous pouvez proposer un parcours ludique, immersif et améliorer l'aspect visuelle de votre cours en évitant la longue liste verticale d'activités. Les ressources et activités doivent être cachées et vous les rendez disponibles sans les afficher sur l'espace de cours. Nous avons également utiliser les paramètres d'achèvement de l'activité pour ajouter les restrictions, par exemple la réussite d'un quiz avec le score minimal requis pour poursuivre le parcours pédagogique.



Voir la demo du parcours

 



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 :

<p></p>
<div class="alert alert-danger" role="alert">
  <h2 style="color: black;">Merci d'avancer étape par étape pour débloquer le
    parcours.<br>A VOUS DE JOUER !</h2>
   
</div>
<p><br><br></p>

<!-- Image en arrière plan -->
<div
  style="background: url('https://moodle.unige.ch/pluginfile.php/2529806/mod_page/content/146/AdobeStock_921431935.jpeg') no-repeat center center; background-size: cover; padding: 40px; border-radius: 20px; color: white; text-align: center; font-family: Arial, sans-serif;">
   
  <p></p>
  <p></p>
  <p><br><br></p>
  <div
    style="display: flex; justify-content: center; align-items: center; margin-top: 30px; gap: 20px; flex-wrap: wrap;">
    <!-- Cas 1 -->
    <div style="opacity: 1; text-align: center;"><a
        style="display: inline-block; width: 120px; height: 120px; background: #4CAF50; border-radius: 50%; line-height: 120px; color: white; font-size: 18px; text-decoration: none; box-shadow: 0 8px 20px rgba(0,0,0,0.6),                       0 0 15px rgba(255,255,255,0.3);"
        href="lien vers le cas 1 ici"> 📝 Cas 1
      </a></div>
    ➡️ <!-- Étape 1 -->
    <div style="opacity: 0.9; text-align: center;"><a
        style="display: inline-block; width: 120px; height: 120px; background: grey; border-radius: 50%; line-height: 120px; color: white; font-size: 18px; text-decoration: none; box-shadow: 0 4px 6px rgba(0,0,0,0.3);"
        href="lien vers l'activité 1 ici"> 🔒
        Activité 1 </a></div>
    ➡️ <!-- Étape 2 -->
    <div style="opacity: 0.9; text-align: center;"><a
        style="display: inline-block; width: 120px; height: 120px; background: grey; border-radius: 50%; line-height: 120px; color: white; font-size: 18px; text-decoration: none; box-shadow: 0 4px 6px rgba(0,0,0,0.3);"
        href="lien vers l'activité 2 ici"> 🔒
        Activité 2 </a></div>
    ➡️ <!-- Étape 3 -->
    <div style="opacity: 0.9; text-align: center;"><a
        style="display: inline-block; width: 120px; height: 120px; background: grey; border-radius: 50%; line-height: 120px; color: white; font-size: 18px; text-decoration: none; box-shadow: 0 4px 6px rgba(0,0,0,0.3);"
        href="lien vers l'activité 3 ici"> 🔒
        Activité 3 </a></div>
    ➡️ <!-- Résultats -->
    <div style="opacity: 0.9; text-align: center;"><a
        style="display: inline-block; width: 120px; height: 120px; background: grey; border-radius: 50%; line-height: 120px; color: white; font-size: 18px; text-decoration: none; box-shadow: 0 4px 6px rgba(0,0,0,0.3);"
        href="lien de la page résultats ici"> 🏆
        Résultats </a></div>
    <p></p>
    
  </div>
</div>
<hr>
<p></p>