Ir al contenido principal
Guía instrucciones de trabajo, buenas prácticas, diseño web, accesibilidad... para la creación de materiales de la Biblioteca Universitaria

Menú lateral

 Intenta realizar una estructura simple, sin muchos niveles de navegación.
Procura realizar páginas más compactas, huyendo del scroll, aunque está demostrado que los nuevos usuarios no le tienen tanto miedo al desplazamiento de página.

OpcionalUna de las "reglas de oro" de la arquitectura informacional es que el usuario debe estar en todo momento ubicado y saber su progreso.
Para eso, el menú de navegación tiene que tener un esquema claro y  debe estar accesible en toda su extensión. Menús y submenús NO se pueden presentar colapsados.

La instrucción para que esto ocurra #siteNav .other-section{display:block} ya se ha incluido en la hoja de estilos por lo que no hay que hacer nada.

No obstante, si tu tema es muy complejo y su estructura no te permite un menú con pocos niveles y no quieres dividir el tema, podrías presentarlo colapsado, aunque no es lo más aconsejable.
Para ello tienes que anular la instrucción anterior copiando esta sentencia  <style>#siteNav .other-section{display:none}</style> en Propiedades → Paquete →  Pie de página.
En este caso y, puesto que eXeLeaning no muestra por defecto los subniveles 3, 4..., habría que incorporar el siguiente código.  Este código muestra un signo "+ "para desplegar y un "-" para colapsar. Sirve de ayuda visual ya que eXeLearning no indica los subniveles hasta que haces click en el superior.

<style>
#siteNav a.daddy:before{content:"+ "}
#siteNav a.main-node:before{content:""}
</style>

Cambiar estilo de una clase, elemento, etc. sólo en determinada página 

Usar con precaución Todas las clases y elementos comunes tienen unas características que son comunes en todos los proyectos y que están definidas en la hoja de estilos por lo que generalment no hay que hacer uso de este hack.

Si por una necesidad tienes que cambiar un elemento concreto en un tema, puedes modificar el archivo content.css del estilo y se es para una página concreta puedes emplear este script alojándolo en un iDevice APPLET DE JAVA que hay que situar el primero en la página

<script>
$(function(){

//la siguiene instruccción selecciona una clase o un elemento
//en este caso vamos a modificar el efecto acordeon

$('.fx-accordion-title, .exe-accordion h2').css({

//sustituye lo anterior por lo que quieras

// estos son los nuevos colores del acordeon

        'background-color':'#ff0000',
        'color':'#ffffff'


    });
});
</script>

Script básico de plegado de iDevices

Nuevo curso 2024-25El código que ves está incluido por defecto en el pie de página, por lo que cuando lo incluyas, ya no tendrás que hacer nada más.
Su misión es presentar desplegados  solamente los iDevices de texto que no tienen título. De esta forma los titulados con PARA SABER MÁS, BIBLIOGRAFÍA, RESUMEN... y todos aquellos que quieras incorporar de objetivos, juegos, cuestionarios, etc. se verán plegados y habrá que pulsar en la cabecera para visualizarlos

Este código NO HACE FALTA instalarlo, ya está incluido.

Este script ahora colapsará todas las secciones iDevice_wrapper, excepto las antiguas FreeTextIdevice aquellas que son textIdevice y no tienen la clase iDeviceTitle

 

<script>
    $(function(){
        setTimeout(function(){
            $(".iDevice_wrapper").each(function(){
                if ((!$(this).hasClass("textIdevice") || ($(this).hasClass("textIdevice") && $(this).find(".iDeviceTitle").length)) && !$(this).hasClass("FreeTextIdevice")) {
                    $(".toggle-idevice a", this).trigger("click");
                }
            });
        }, 200);
    });
</script>

Colapsar o desplegar iDevices

Usar con precaución El tema debe presentarse lo más limpio posible. Se deben mantener plegados los elementos accesorios: objetivos, contenido adicional, bibliografía... El fin es  mantener el contenido de la página web dentro del  diseño visual robusto y no agobiar al lector.

Por defecto, los iDevices de Texto Libre se muestran extendidos y los demás colapsados (forma parte del código del pie de página que debes instalar).  El resto de los iDevices muestran sólo el título. El usuario puede expandirlos   o contraerlos  a voluntad por medio de unos botones llamados toggles. Pero este comportamiento podemos modificarlo según nuestras necesidades

Los scripts que proporcionamos hay que cortarlos y pegarlos incluidos en: Propiedades → Paquete →  Pie de página 

Este código forma parte del "pie de página" que debes instalar antes de ponerte a trabajar. Así que no tienes que instalarlo, ya lo debes tener.
De todas formas lo incluimos aquí por si lo necesitas para editar un tema antiguo

<script>
	$(function(){
		setTimeout(function(){
			$(".iDevice_wrapper").each(function(){
				if (!$(this).hasClass("FreeTextIdevice") ) $(".toggle-idevice a",this).trigger("click");
			});
		},200)
	});
</script>

Para incluir este código debes borrar el que ya tienes instalado (sólo extendía los de texto libre). Lo debes tener en el código del pie de página

Con este script se quedarán abiertos los iDevices con el contenido del tema (texto libre) y los de BIBLIOGRAFÍA, PARA SABER MÁS o RESUMEN (texto)

<script>
    $(function(){
        setTimeout(function(){
            $(".iDevice_wrapper").each(function(){
                if (!$(this).hasClass("textIdevice") && !$(this).hasClass("FreeTextIdevice")) $(".toggle-idevice a",this).trigger("click");
            });
        },200)
    });
</script>

Este script sólo se utiliza cuando tenemos todos los iDevices desplegados (para ello hemos tenido que borrar en el pie de página el que viene por defecto) y queremos colapsar algunos

Hay que sustituir XX, XX, XXX... por el número id del iDevice, el cual podemos averiguar inspeccionando el código.
Se trata de un identificador numérico que otorga eXeLearning

<script type="text/javascript"> 
  $(window).load(function(){
    $.each([XX,XXX,XXX], function(index , value ) {
      $("p.toggle-idevice a").eq(value).click();
    })
  });
</script>

Si tienes problemas para localizar los números del iDevice, quizás te sea más sencillo cortar y pegar las etiquetas entera, separadas por comas

<script>
$(function(){
$("#idXXX .toggle-idevice a,#idXXX .toggle-idevice a").trigger("click");
});
</script>

Lugar alternativo dónde escribir los scripts

OpcionalLos scripts también pueden incluirse en un iDevice denominado APPLET DE JAVA que hay que situar el primero en la página.

Este iDevice no es visible por el usuario y sólo afecta al nodo que estemos visualizando (apartado, subapartado...) Es especialmente util para el script que sólo colapsa determinados iDevices localizados por el código de su id

Cambiar cabeceras del proyecto 

Esta opción, con sus correspondientes scripts, es de uso restringido y sólo debe usarse para proyectos de eXeLearning particulares. La idea es crear una foto de cabecera diferente y que pueda variar en le resto de páginas o presentarse a modo de carrusel aleatorio. Se muestra aquí toda la documentación para efectuarlo.

La página de inicio de un proyecto eXeLearning es index.html y el resto de las páginas finalizan con .html
A partir de estas dos premisas, un código  para mostrar cualquier elemento en la página de inicio y ocultarlo en el resto sería:

<script>
 $(function({
 var path = window.location.pathname;
 if(!(path.endsWith("/index.html") ||
 !path.endsWith(".html"))) {
 $('#emptyHeader').hide(); } });
 </script>

También sirve para que no sea visible cualquier otro elemento: menú, pie... En ese caso hay que sustituir el identificador #emptyHeader, por el de elemento que quieras ocultar

Solo se ve el resultado en la previsualización

Si lo que quieres se sustituir la imagen de la cabecera por otra imagen en la páginas que no sean index.html, tienes que tener en cuenta dos cosas:

  1. La imagen debe ser parte del proyecto, la puedes insertar en cualquier texto de tu proyecto y ocultarla, incluirla en el zip del estilo...
  2. El tamaño.... Aunque para eso he puesto la última línea de código

Suponiendo que quieres que una imagen llamada nombre2.png que has añadido previamente a tu proyecto, se cargue en todas las páginas menos en la de inicio, el script quedaría

 <script>
window.addEventListener('DOMContentLoaded', function() {
  // Obtener el nombre del archivo actual
  var currentFile = window.location.pathname.split('/').pop();

  // Verificar si el archivo actual no es "index.html"
  if (currentFile !== 'index.html') {
    // Obtener el elemento #emptyHeader
    var emptyHeader = document.getElementById('emptyHeader');

    // Cambiar la propiedad background-image del estilo del elemento
    emptyHeader.style.backgroundImage = 'url(nombre2.png)';

    // Cambiar la propiedad min-height del estilo del elemento
    emptyHeader.style.minHeight = '250px';
  }
});
 </script>

Por último, mediante este código se presenta aleatoriamente una imagen de un conjunto de ellas en cada carga de página. 

Hay que tener en cuenta que todas las imágenes deben estar colocadas en la carpeta de estilo.

<script>
window.addEventListener('DOMContentLoaded', function() {
  // Array de imágenes
  var images = ['nombre1.png', 'nombre2.png', 'nombre3.png'];
  // Agrega arriba los nombres de tus imágenes

  // Obtener una imagen aleatoria del array
  var randomImage = images[Math.floor(Math.random() * images.length)];

  // Obtener el elemento #emptyHeader
  var emptyHeader = document.getElementById('emptyHeader');

  // Cambiar la propiedad background-image del estilo del elemento
  emptyHeader.style.backgroundImage = 'url(' + randomImage + ')';
});
</script>

Barra de accesibilidad y de traducción (sólo para proyectos previos a la v.2.8)

Obsoleto para +2.9Es una pequeña adaptación para la BUA de la barra de navegación Batexego de Juan José de Haro (jjdeharo@gmail.com) que decidió cederla con una Creative Commons BY-SA 4.0. Puede ser flotante o fija y posibilita el cambio de letra, tamaño, traducción, lectura, etc. del material. Se debe incluir en la pestaña Propiedades → Paquete → Opciones avanzadas → Personalizar la sección HEAD

barra de accesibilidad de eXeLearning

 

Hemos adaptado una interesante función de para todos nuestros materiales elaborados con eXeLearning. Se trata de una barra que se incluye en todas las páginas de los documentos y que supone un gran avance para mejorar la accesibilidad.

Este script ya está incluido en el código facilitado la plantilla para los temas nuevos, pero lo hemos incluido aquí por si lo precisas para los temas antigüos

 

<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet"  type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap" rel="stylesheet" type="text/css">
<link href="https://fonts.cdnfonts.com/css/opendyslexic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"  type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"  type="text/css">


<style>
  
  .z-index {
    z-index: 999;
  }

  .select-container {
    display: inline-block;
    position: relative;
    z-index: 999;
  }

  .font-button {
    padding: 8px 16px;
    border: 1px solid #b7dce1;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin: 8px;
    text-align: center;
    text-decoration: none;
    background-color:#f1faee;
    color: #33455b;
    z-index: 999;
  }

  .fontButtonContainer {
     z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* establece el wrap para que los botones se distribuyan en varias líneas */
    gap: 5px; /* ajusta el espacio entre los botones */
    position: static; /* fija la barra de botones en la página: static para que aparezca en la parte superior, fixed para que quede flotando */
    top: 40px; /* fija la barra de botones en la parte superior de la página */
    left: 0; /* fija la barra de botones en el margen izquierdo */
    right: 0; /* fija la barra de botones en el margen derecho */
    margin: auto; /* centra la barra de botones horizontalmente */
background-color:#457B9D;
  }
    
  /* Estilo para el desplegable */
  select {
    padding: 8px 4px;
    border: 1px solid #b7dce1;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin: 6px;
    text-align: center;
    text-decoration: none;
    background-color: #f1faee;
  }
  
  select option {
  text-align: left;
  }
  
</style>

<script>

// BatexeGo v3 Juan José de Haro 

// Define los textos que se ven en pantalla. Reemplazar el texto entre comillas

  // Textos del menú desplegable
    const defaultText = 'Parámetros por defecto:'; //Descripción de la opción por defecto
    const standardText = 'Fuente estándar'; // Fuente original del documento
    
    const dyslexicDesc = 'Dislexia:'; // Descripción de la opción OpenDyslexic  
    const dyslexicText = 'OpenDyslexic'; 
    
    const hyperlegibleDesc = 'Deficiencias visuales:'; // Descripción de la opción Atkinson Hyperlegible
    const hyperlegibleText = 'Atkinson Hyperlegible'; 
    
    const highLegibilityDesc = 'Alta legibilidad:'; // Descripción de las opciones de alta legibilidad
    const opensansText = 'OpenSans'; 
    const robotoText = 'Roboto'; 
    const latoText = 'Lato'; 
    const montserratText = 'Montserrat'; 

  // Botones aumentar y disminuir fuente
    const increaseFontText = 'A+'; // Botón para incrementar la fuente
    const increaseFontTitle = 'Incrementa la fuente'; // Texto emergente al pasar el ratón
    
    const decreaseFontText = 'A-'; // Botón para reducir la fuente
    const decreaseFontTitle = 'Reduce la fuente'; // Texto emergente al pasar el ratón

  // Botón para traducir
    const translateText = '🌐'; // Texto para el botón de traducción de Google
    const translateTitle = 'Traduce la página'; // Texto emergente al pasar el ratón

  // Botón para leer / detener la lectura en voz alta
    let readText = 'Leer'; // Botón para leer en voz alta el contenido de la página
    const readTextTitle ='Lee en voz alta la selección o la página entera'; // Texto emergente al pasar el ratón
    
    const stopText = 'Detener'; // Texto del botón para detener la lectura
    const stopTextTitle = 'Detiene la lectura'; // Texto emergente al pasar el ratón
  
  // Botones para que los botones estén siempre visibles
    let floatingFix = 'Fijar'; // Texto del botón flotante cuando está sobre el texto
    let floatingFixTitle = 'Fija la barra de botones en la parte superior'; // Texto emergente al pasar el ratón
    
    let floatingFloat = 'Flotar'; //Texto del botón flotante cuando está fijo en la parte superior
    let floatingFloatTitle = 'La barra permanecerá siempre visible';
  
  
  // Enlace +Info
  const infoText = '+Info'; // Texto del enlace +Info
  const infoTextLink = 'https://#'; // Destino del enlace de +Info

// Fin 
  

  readText = `${readText} (${document.documentElement.lang})`; //Se añade el idioma al botón Leer
  

  let originalFont;
  let currentFontSize;
  let originalFontSize;
  let isReading = false;
  let utterance = new SpeechSynthesisUtterance();
  let googleTranslateWidgetVisible = localStorage.getItem('googleTranslateWidgetVisible');

  function setFont(font) {
  document.body.style.fontFamily = font;
  localStorage.setItem('font', font);
  }

  function setFontSize(size) {
  currentFontSize = parseInt(window.getComputedStyle(document.body).getPropertyValue('font-size'));
  currentFontSize += size;
  document.body.style.fontSize = currentFontSize + 'px';
  localStorage.setItem('fontSize', currentFontSize + 'px');
  }
  
  

function toggleGoogleTranslateWidget() {
  if (!googleTranslateWidgetVisible) {
    const script = document.createElement('script');
    script.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
    script.id = 'google-translate-script';
    document.head.appendChild(script);
    
    const googleTranslateElement = document.createElement('div');
    googleTranslateElement.id = 'google_translate_element';
    googleTranslateElement.style.position = 'fixed';
    googleTranslateElement.style.top = '0';
    googleTranslateElement.style.right = '0';
    googleTranslateElement.style.zIndex = '1000';
    document.body.appendChild(googleTranslateElement);

    window.googleTranslateElementInit = function() {
      new google.translate.TranslateElement({pageLanguage: 'es', includedLanguages: 'es,ca,en,fr,eu,gl', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
    };

    googleTranslateWidgetVisible = true;
    
  } else {
    const script = document.getElementById('google-translate-script');
    script.remove();
    
    const googleTranslateElement = document.getElementById('google_translate_element');
    googleTranslateElement.remove();

    googleTranslateWidgetVisible = false;
  }
  localStorage.setItem('googleTranslateWidgetVisible',googleTranslateWidgetVisible);
}




  document.addEventListener('DOMContentLoaded', () => {

    googleTranslateWidgetVisible = JSON.parse(localStorage.getItem('googleTranslateWidgetVisible'));
  if(googleTranslateWidgetVisible) {
    googleTranslateWidgetVisible = false;
    toggleGoogleTranslateWidget();
  }

    
  
    originalFont = window.getComputedStyle(document.body).getPropertyValue('font-family');
    localStorage.setItem('originalFont', originalFont);
    let font = localStorage.getItem('font');
    if (!font) {
    font = originalFont;
    }
    document.body.style.fontFamily = font;

    let fontSize = localStorage.getItem('fontSize');
    originalFontSize = window.getComputedStyle(document.body).getPropertyValue('font-size');
    localStorage.setItem('originalFontSize', originalFontSize);
    if (!fontSize) {
    fontSize = originalFontSize
    localStorage.setItem('fontSize', fontSize);
    }
    document.body.style.fontSize = fontSize;

    const fontButtonContainer = document.createElement('div');
    fontButtonContainer.classList.add('fontButtonContainer'); 
    
    const selectContainer = document.createElement('div');
    selectContainer.classList.add('select-container');
    const select = document.createElement('select');
    select.classList.add('z-index');
    const standardOption = document.createElement('option');
    standardOption.value = 'standard';
    standardOption.text = standardText;

    const defaultFontOptGroup = document.createElement('optgroup');
    defaultFontOptGroup.label = defaultText;
    defaultFontOptGroup.appendChild(standardOption);

    select.appendChild(defaultFontOptGroup);


    const dyslexicOption = document.createElement('option');
    dyslexicOption.value = 'dyslexic';
    dyslexicOption.text = dyslexicText;
    select.add(dyslexicOption);

    const dyslexicOptGroup = document.createElement('optgroup');
    dyslexicOptGroup.label = dyslexicDesc;
    dyslexicOptGroup.appendChild(dyslexicOption);
    select.appendChild(dyslexicOptGroup);

    const hyperlegibleOption = document.createElement('option');
    hyperlegibleOption.value = 'hyperlegible';
    hyperlegibleOption.text = hyperlegibleText;
    select.add(hyperlegibleOption);

    const hyperlegibleOptGroup = document.createElement('optgroup');
    hyperlegibleOptGroup.label = hyperlegibleDesc;
    hyperlegibleOptGroup.appendChild(hyperlegibleOption);
    select.appendChild(hyperlegibleOptGroup);

    const opensansOption = document.createElement('option');
    opensansOption.value = 'Open Sans';
    opensansOption.text = opensansText;
    select.add(opensansOption);

    const robotoOption = document.createElement('option');
    robotoOption.value = 'Roboto';
    robotoOption.text = robotoText;
    select.add(robotoOption);

    const latoOption = document.createElement('option');
    latoOption.value = 'Lato';
    latoOption.text = latoText;
    select.add(latoOption);

    const montserratOption = document.createElement('option');
    montserratOption.value = 'Montserrat';
    montserratOption.text = montserratText;
    select.add(montserratOption);  
    

    const highLegibilityOptGroup = document.createElement('optgroup');
    highLegibilityOptGroup.label = highLegibilityDesc;
    highLegibilityOptGroup.appendChild(latoOption);
    highLegibilityOptGroup.appendChild(montserratOption);
    highLegibilityOptGroup.appendChild(opensansOption);
    highLegibilityOptGroup.appendChild(robotoOption);
    
    
    
    select.appendChild(highLegibilityOptGroup);

    // Seleccionar la opción correspondiente al cargar la página
    if (font === originalFont) { // Nueva condición
    select.selectedIndex = 0; // Nueva línea
    } else if (font === 'OpenDyslexic') {
    select.selectedIndex = 1;
    } else if (font === 'Atkinson Hyperlegible') {
    select.selectedIndex = 2;
    } else if (font === 'Roboto') {
    select.selectedIndex = 6;
    } else if (font === 'Lato') {
    select.selectedIndex = 3;
    } else if (font === 'Open Sans') {
    select.selectedIndex = 5;
    } else if (font === 'Montserrat') {
    select.selectedIndex = 4;
    }

    select.addEventListener('change', () => {
    const font = select.value;
    if (font === 'standard') {
    setFont(originalFont);
    fontSize = originalFontSize;
    localStorage.setItem('fontSize', fontSize);
    document.body.style.fontSize = localStorage.getItem('originalFontSize');
    } else if (font === 'dyslexic') {
    setFont('OpenDyslexic');
    } else if (font === 'hyperlegible') {
    setFont('Atkinson Hyperlegible');
    } else if (font === 'Open Sans') {
    setFont('Open Sans');
    } else if (font === 'Roboto') {
    setFont('Roboto');
    } else if (font === 'Lato') {
    setFont('Lato');
    }  else if (font === 'Montserrat') {
    setFont('Montserrat');
    }
    });

    selectContainer.appendChild(select);
    fontButtonContainer.appendChild(selectContainer);
    

    const increaseFontButton = document.createElement('button');
    increaseFontButton.classList.add('font-button');
    increaseFontButton.textContent = increaseFontText;
    increaseFontButton.setAttribute('title', increaseFontTitle);
    increaseFontButton.addEventListener('click', () => setFontSize(1));
    fontButtonContainer.appendChild(increaseFontButton);

    const decreaseFontButton = document.createElement('button');
    decreaseFontButton.classList.add('font-button');
    decreaseFontButton.textContent = decreaseFontText;
    decreaseFontButton.setAttribute('title', decreaseFontTitle);
    decreaseFontButton.addEventListener('click', () => setFontSize(-1));
    fontButtonContainer.appendChild(decreaseFontButton);
    
    const translateButton = document.createElement('button');
    translateButton.classList.add('font-button');
    translateButton.textContent = translateText;
    translateButton.setAttribute('title', translateTitle);
    translateButton.addEventListener('click', toggleGoogleTranslateWidget);
    fontButtonContainer.appendChild(translateButton);

  // Botón para leer en voz alta
    const readButton = document.createElement('button');
    readButton.classList.add('font-button');
    readButton.textContent = readText;
    readButton.setAttribute('title', readTextTitle);
    
    readButton.addEventListener('click', () => {
    let selectedText = window.getSelection().toString();
    let text = '';
    let lang = document.documentElement.lang;
    if (selectedText !== '') {
      text = selectedText;
      let selectedNode = window.getSelection().anchorNode;
      while (selectedNode && selectedNode.nodeType !== Node.ELEMENT_NODE) {
        selectedNode = selectedNode.parentNode;
      }
      if (selectedNode) {
        const selectedLang = selectedNode.getAttribute('lang');
        if (selectedLang) {
          lang = selectedLang;
        }
      }
    } else {
      text = document.body.innerText;
      const bodyLang = document.body.getAttribute('lang');
      if (bodyLang) {
        lang = bodyLang;
      }
    }

    utterance.lang = lang;
    utterance.text = text;

    if (!isReading) {
      isReading = true;
      readButton.textContent = `${stopText} (${lang})`;
      readButton.setAttribute('title', stopTextTitle);
      speechSynthesis.speak(utterance);
    } else {
      isReading = false;
      readButton.textContent = readText;
      readButton.setAttribute('title', readTextTitle);
      speechSynthesis.cancel();
    }

    utterance.addEventListener('end', () => {
      isReading = false;
      readButton.textContent = readText;
      readButton.setAttribute('title', readTextTitle);
    });
  });  
    
    fontButtonContainer.appendChild(readButton);
    
  // Botón para que la barra esté siempre visible
    const floatingButton = document.createElement('button');
    floatingButton.classList.add('font-button');
    floatingButton.textContent = floatingFloat;
    floatingButton.setAttribute('title', floatingFloatTitle);
    floatingButton.addEventListener('click', () => {
    if (floatingButton.textContent === floatingFix) {
      fontButtonContainer.style.position = 'static';
      floatingButton.textContent = floatingFloat;
      floatingButton.setAttribute('title', floatingFloatTitle);
      localStorage.setItem('floatState', 'static');
    } else {
      fontButtonContainer.style.position = 'fixed';
      floatingButton.textContent = floatingFix;
      floatingButton.setAttribute('title', floatingFixTitle);
      localStorage.setItem('floatState', 'fixed');
    }
  });

    

    let floatState = localStorage.getItem('floatState');
    if (!floatState) {
      floatState = 'static';
      floatingButton.textContent = floatingFix;
      floatingButton.setAttribute('title', floatingFixTitle);
    }
    if (floatState === 'fixed') {
      fontButtonContainer.style.position = 'fixed';
      floatingButton.textContent = floatingFix;
      floatingButton.setAttribute('title', floatingFixTitle);
    } else {
      fontButtonContainer.style.position = 'static';
      floatingButton.textContent = floatingFloat;
      floatingButton.setAttribute('title', floatingFloatTitle);
    }
    
    localStorage.setItem('floatState', floatState);
    
  fontButtonContainer.appendChild(floatingButton);


    const infoLink = document.createElement('a');
    infoLink.textContent = infoText;
    infoLink.href = infoTextLink;
    infoLink.target = '_blank';
    infoLink.style.marginLeft = '8px';
    infoLink.style.fontSize = '12px';
    fontButtonContainer.appendChild(infoLink);

    
    infoLink.classList.add('z-index');

    document.body.insertBefore(fontButtonContainer, document.body.firstChild);
   
  });
  
  

</script>

HACKeXe

Si quieres saber más sobre trucos, códigos y contenido alternativo, échale un vistazo a HackeXe.

Se trata de un proyecto de Juan José de Haro que contiene código que amplía y mejora las posibilidades de eXeLearning.