Wiki

Recherche

Édition

Navigation

Piste:

Différences

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

Lien vers cette vue comparative

Prochaine révision 		Révision précédente
madoc:testveneta [2022/11/25 11:02]
andreeva-v créée 		madoc:testveneta [2023/01/25 16:31]
andreeva-v supprimée
Ligne 1: Ligne 1:
 <html> <html>
 +<head></head>
 <style> <style>
-  .tabs {  +.tabs ul{ 
-    font-size: 20px;+   display:flex; 
 +   flex-flow: row wrap; 
 +   align-items: center; 
 +   height: 5em; 
 +   border: solid 1px blue; 
 +   font-size: 20px; 
 +   margin:0;
 } }
  
-.tabs .tab-registers { +.tabs ul li{ 
-    display: flex; +  width:calc(100%/3);
-    background-color: RGB(255, 255, 255); +
-    +
 } }
  
-.tabs button { +.first-level-tab-results{ 
-    padding: 0.5em; +  display:flex; 
-    border: none;+  flex-direction: row; 
 +} 
 +a{ 
 +  text-decoration: none;
 } }
  
-.tab-registers button{ +.tab-content { 
-    display:flex; +   display: none;
-    flex-wrap:wrap; +
-    width:20%; +
-    min-height:20px; +
-    background-color:#3452ff; +
-  } +
-   +
-.tabs .tab-registers button:hover { +
-    cursor: pointer; +
-    background-color:yellow; +
-    color:black;+
 } }
  
-.tabs .tab-bodies { +.is-active { 
-    padding: 0.5em; +   display: flex;
-    background-color: RGB(235, 235, 235); +
-    flex-grow: 1; +
-    overflow-y: auto; +
-    display: flex; +
-    flex-direction:column; +
-    flex-wrap:wrap; +
-    align-content:flex-start; +
-    +
 } }
  
-.tabs button.active-tab { +section .sub-tabs{ 
-    background-color: rgb(235, 235, 235);+  display:flex; 
 +  flex-direction: column; 
 +  justify-content: flex-start; 
 +  background-color:rgb(218, 218, 218); 
 +  margin:0; 
 +  padding: 1.5em; 
 +  min-height: 8em; 
 +} 
 + 
 +.sub-tab-content{ 
 +  background-color: blue; 
 +  padding:1.5em; 
 +} 
 + 
 +body { 
 +  padding: 20px;
 } }
 </style> </style>
 +<body>
  
-<div class="tabs"> +<div class="my-tabs"> 
-    <div class="tab-registers"> +    <nav class="tabs"> 
-        <button class="active-tab">Découvrir et paramétrer mon espace d'enseignement</button> +      <ul> 
-        <button>Organiser mon espace d'enseignement</button> +        <li class="is-active"><a href="#tab-one">Découvrir et paramétrer mon espace</a></li> 
-        <button>Créer des ressources et les organiser</button> +        <li><a href="#tab-two">Organiser mon espace d'enseignement</a></li> 
-        <button>Créer des activités d'apprentissage et d'évaluation</button> +        <li><a href="#tab-three">Créer des ressources et les organiser</a></li> 
-        <button>Animer mon espace et suivre l'activité des étudiants</button> +        <li><a href="#tab-two">Organiser mon espace d'enseignement</a></li> 
-        <button>Réinitialiser mon espace et la préparer pour l'année suivante</button> +        <li><a href="#tab-three">Créer des ressources et les organiser</a></li> 
-    </div> +        <li><a href="#tab-two">Organiser mon espace d'enseignement</a></li> 
-    <div class="tab-bodies"> +      </ul> 
-       <div class="tab-bodies"> +    </nav> 
-                <button>Accéder à un espace de cours</button> + 
-         <button>Gérer les utilisateurs</button> +    <div class="first-level-tab-results"> 
-        </div> +      <section class="tab-content is-active" id="tab-one"> 
-        <div style="display:none;"> +     
-            Contenu Tab 2 +        <ul class="sub-tabs"> 
-        </div> +          <li><a href="#tab-one-one">Accéder à un espace de cours</a></li> 
-        <div style="display:none;"> +          <li><a href="#tab-one-two">Gérer les utilisateur</a></li> 
-            Contenu Tab 3 +          <li><a href="#tab-one-three">Paramétrer un espace de cours</a></li> 
-        </div> +        </ul> 
-    </div>+        <div class="sub-tab-content"> 
 +         
 +        <section class="tab-content" id="tab-one-one"> 
 +        Sub-Section One</section> 
 + 
 +        <section class="tab-content" id="tab-one-two"> 
 +        Section Two</section> 
 +         
 +        <section class="tab-content" id="tab-one-three"> 
 +        Section Three</section> 
 +       
 +    </section> 
 + 
 +    <section class="tab-content" id="tab-two"> 
 +      Section Two</section> 
 +       
 +    <section class="tab-content" id="tab-three"> 
 +      Section Three</section> 
 + 
 +  </div>
 </div> </div>
 +</body>
 +
 <script> <script>
-  Array.from(document.querySelectorAll('.tabs')).forEach((tab_container, TabID) => { +const tabs = document.querySelectorAll(".my-tabs .tabs li"); 
-    const registers = tab_container.querySelector('.tab-registers'); +const sections = document.querySelectorAll(".my-tabs .tab-content"); 
-    const bodies = tab_container.querySelector('.tab-bodies'); +const subTabs = document.querySelectorAll(".my-tabs .sub-tabs li"); 
-   +const subSections = document.querySelectorAll(".sub-tab-content .tab-content"); 
-    Array.from(registers.children).forEach((el, i) => { + 
-      el.setAttribute('aria-controls', `${TabID}_${i}`) +tabs.forEach(tab => { 
-      bodies.children[i]?.setAttribute('id', `${TabID}_${i}`) +  tab.addEventListener("click", e => { 
-     +    e.preventDefault(); 
-      el.addEventListener('click', (ev) => { +    removeActiveTab(); 
-        let activeRegister = registers.querySelector('.active-tab'); +    addActiveTab(tab); 
-        activeRegister.classList.remove('active-tab') +  });
-        activeRegister = el; +
-        activeRegister.classList.add('active-tab') +
-        changeBody(registers, bodies, activeRegister) +
-      }) +
-  })+
 }) })
  
 +subTabs.forEach(tab => {
 +  tab.addEventListener("click", e => {
 +    e.preventDefault();
 +    removeActiveSubTab();
 +    addActiveTab(tab);
 +  });
 +})
  
-function changeBody(registers, bodies, activeRegister) { +const removeActiveTab = () => { 
-    Array.from(registers.children).forEach((el, i) => { +  tabs.forEach(tab => { 
-        if (bodies.children[i]) { +    tab.classList.remove("is-active"); 
-            bodies.children[i].style.display = el == activeRegister ? 'block' : 'none' +  }); 
-        }+  sections.forEach(section => { 
 +    section.classList.remove("is-active"); 
 +  }); 
 +}
  
-        el.setAttribute('aria-expanded', el == activeRegister ? 'true' : 'false') +const removeActiveSubTab = () => { 
-    })+  subTabs.forEach(subTab => { 
 +    subTab.classList.remove("is-active"); 
 +  }); 
 +  subSections.forEach(subSection => { 
 +    subSection.classList.remove("is-active"); 
 +  });
 } }
 +
 +const addActiveTab = tab => {
 +  tab.classList.add("is-active");
 +  const href = tab.querySelector("a").getAttribute("href");
 +  const matchingSection = document.querySelector(href);
 +  matchingSection.classList.add("is-active");
 +}
 +
 </script> </script>
 </html> </html>
  
-====Découvrir et paramétrer mon espace d'enseignement==== +
-<columns 100% 33%> +
-<box round #fff #3452ff #3452ff #3452ff 90%|\\ **Accéder à un espace de cours**\\ \\ > +
-  * :!: [[madoc:1-s_identifier_sur_la_plateforme|S'identifier sur la plate-forme]] +
-  * [[madoc:2-adapter_son_tableau_de_bord|Adapter son tableau de bord (page d'accueil de Madoc)]] +
-  * [[madoc:3-ajouter_un_espace_cours|S'inscrire comme enseignant dans un espace de cours]] +
-</box> +
-<box round #fff #3452ff #3452ff #3452ff 90%|\\ **Gérer les utilisateurs**\\ \\ > +
-  * [[madoc:11-consulter_et_filtrer_les_inscriptions|Consulter et filtrer les inscriptions]] +
-  * [[madoc:12-ajouter_une_methode_d_inscription|Ajouter une méthode d'inscription]] +
-  * [[madoc:13-ajouter_modifier_et_supprimer_une_inscription|Ajouter, modifier et supprimer une inscription]] +
-  * [[madoc:14-creer_des_groupes_d_utilisateurs_manuellement|Créer des groupes dans un espace de cours]] +
-  * [[madoc:15-se_servir_de_l_activite_choix_de_groupe|Se servire de l'activité Choix de groupe]] +
-</box> +
-<newcolumn 33%>+
 
Recent changes RSS feed Creative Commons License Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki