Print

Home

1. Prompt para crear botones toggleInfo (Botones que aben y ocultan info):

---Inicio de código.

<div style="text-align: left;">
<!-- Botones para desplegar contenido, alineados a la izquierda -->
<button onclick="toggleContent('welcomeContent')" style="background-color: rgb(1, 33, 104); color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; text-align: left;">Welcome</button>
<div id="welcomeContent" style="display: none; margin: 5px 0 15px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
<p>Welcome content goes here.</p>
</div>

<button onclick="toggleContent('courseObjectivesContent')" style="background-color: rgb(1, 33, 104); color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; text-align: left;">Course Objectives</button>
<div id="courseObjectivesContent" style="display: none; margin: 5px 0 15px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
<p>Course objectives content goes here.</p>
</div>

<button onclick="toggleContent('methodologyContent')" style="background-color: rgb(1, 33, 104); color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; text-align: left;">Methodology</button>
<div id="methodologyContent" style="display: none; margin: 5px 0 15px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
<p>Methodology content goes here.</p>
</div>

<button onclick="toggleContent('assessmentCriteriaContent')" style="background-color: rgb(1, 33, 104); color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; text-align: left;">Assessment Criteria</button>
<div id="assessmentCriteriaContent" style="display: none; margin: 5px 0 15px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
<p>Assessment criteria content goes here.</p>
</div>

<button onclick="toggleContent('glossaryContent')" style="background-color: rgb(1, 33, 104); color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; text-align: left;">Glossary</button>
<div id="glossaryContent" style="display: none; margin: 5px 0 15px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
<p>Glossary content goes here.</p>
</div>

<button onclick="toggleContent('directoryContent')" style="background-color: rgb(1, 33, 104); color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; text-align: left;">Directory</button>
<div id="directoryContent" style="display: none; margin: 5px 0 15px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
<p>Directory content goes here.</p>
</div>

<button onclick="toggleContent('creditsContent')" style="background-color: rgb(1, 33, 104); color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; text-align: left;">Credits</button>
<div id="creditsContent" style="display: none; margin: 5px 0 15px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
<p>Credits content goes here.</p>
</div>

<button onclick="toggleContent('bibliographyContent')" style="background-color: rgb(1, 33, 104); color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; text-align: left;">Bibliography</button>
<div id="bibliographyContent" style="display: none; margin: 5px 0 15px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
<p>Bibliography content goes here.</p>
</div>

<script>
function toggleContent(contentId) {
// Oculta todos los contenidos
var contents = document.querySelectorAll("div[id$='Content']");
contents.forEach(function(content) {
if (content.id !== contentId) {
content.style.display = "none";
}
});

// Alterna la visibilidad del contenido seleccionado
var selectedContent = document.getElementById(contentId);
if (selectedContent.style.display === "none") {
selectedContent.style.display = "block";
} else {
selectedContent.style.display = "none";
}
}
</script>
</div>

 

---Fin de código.

Respuesta de chatgpt al prompt.

Crea el código html y javascript para crear 8 botones en una etiqueta de Moodle que desplieguen información al hacer clic y que oculten la información al hacer clic en otro boton o en el mismo boton. Cada botón tiene su propia sección de contenido y los botones se deben mostrar en forma vertical. El color de los botones debe ser RGB 1 33 104. Los botones deben estar justificados a la izquierda, y la información debe aparecer después de cada boton. Los botones deben ser: Welcome, Course objectives, Methodology, Assessment criteria, Glossary, Directory, Credits, Bibliography. Check botton spelling if necessary.

 

Aquí tienes el código (se muesta arriba) para crear 8 botones en una etiqueta de Moodle que despliegan información al hacer clic y ocultan la información al hacer clic en otro botón o en el mismo botón. Los botones están justificados a la izquierda, en color rgb(1, 33, 104), y cada sección de contenido aparecerá justo debajo del botón correspondiente.

html
 
--Inicio del código

<div style="text-align: left;">
<!-- Botones para desplegar contenido, alineados a la izquierda -->
<button onclick="toggleContent('welcomeContent')" style="background-color: rgb(1, 33, 104); color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; text-align: left;">Welcome</button>
<div id="welcomeContent" style="display: none; margin: 5px 0 15px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
<p>Welcome content goes here.</p>
</div>

<button onclick="toggleContent('courseObjectivesContent')" style="background-color: rgb(1, 33, 104); color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; text-align: left;">Course Objectives</button>
<div id="courseObjectivesContent" style="display: none; margin: 5px 0 15px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
<p>Course objectives content goes here.</p>
</div>

<button onclick="toggleContent('methodologyContent')" style="background-color: rgb(1, 33, 104); color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; text-align: left;">Methodology</button>
<div id="methodologyContent" style="display: none; margin: 5px 0 15px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
<p>Methodology content goes here.</p>
</div>

<button onclick="toggleContent('assessmentCriteriaContent')" style="background-color: rgb(1, 33, 104); color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; text-align: left;">Assessment Criteria</button>
<div id="assessmentCriteriaContent" style="display: none; margin: 5px 0 15px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
<p>Assessment criteria content goes here.</p>
</div>

<button onclick="toggleContent('glossaryContent')" style="background-color: rgb(1, 33, 104); color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; text-align: left;">Glossary</button>
<div id="glossaryContent" style="display: none; margin: 5px 0 15px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
<p>Glossary content goes here.</p>
</div>

<button onclick="toggleContent('directoryContent')" style="background-color: rgb(1, 33, 104); color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; text-align: left;">Directory</button>
<div id="directoryContent" style="display: none; margin: 5px 0 15px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
<p>Directory content goes here.</p>
</div>

<button onclick="toggleContent('creditsContent')" style="background-color: rgb(1, 33, 104); color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; text-align: left;">Credits</button>
<div id="creditsContent" style="display: none; margin: 5px 0 15px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
<p>Credits content goes here.</p>
</div>

<button onclick="toggleContent('bibliographyContent')" style="background-color: rgb(1, 33, 104); color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; text-align: left;">Bibliography</button>
<div id="bibliographyContent" style="display: none; margin: 5px 0 15px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
<p>Bibliography content goes here.</p>
</div>

<script>
function toggleContent(contentId) {
// Oculta todos los contenidos
var contents = document.querySelectorAll("div[id$='Content']");
contents.forEach(function(content) {
if (content.id !== contentId) {
content.style.display = "none";
}
});

// Alterna la visibilidad del contenido seleccionado
var selectedContent = document.getElementById(contentId);
if (selectedContent.style.display === "none") {
selectedContent.style.display = "block";
} else {
selectedContent.style.display = "none";
}
}
</script>
</div>

 

--fin del código

 
Explicación del Código:
  1. Botones Alineados a la Izquierda: Cada botón ocupa el 100% del ancho del contenedor y está alineado a la izquierda (text-align: left).
  2. Color y Estilo de los Botones: Cada botón tiene el color rgb(1, 33, 104) y se estiliza para ser uniforme y con borde redondeado.
  3. Función toggleContent():
    • Oculta todos los contenidos cada vez que se hace clic en un botón para asegurar que solo uno esté visible a la vez.
    • Alterna la visibilidad del contenido correspondiente al botón seleccionado, de forma que un segundo clic en el mismo botón oculta el contenido.
Instrucciones para Moodle:
  1. En la página del curso, crea una Etiqueta.
  2. Cambia al editor HTML en la etiqueta y pega el código anterior.
  3. Guarda la etiqueta y verifica que cada botón despliega y oculta el contenido correspondiente al hacer clic.

Este código asegura que solo un contenido esté visible a la vez, con los botones justificados a la izquierda y el contenido apareciendo inmediatamente después de cada botón.

 

2. Prompt para Banner de curso en un bloque de Moodle:

Si deseas que el banner aparezca solo en la página de un curso en Moodle, puedes usar una combinación de JavaScript y HTML dentro de un bloque HTML en ese curso específico. A continuación, te dejo un código simplificado que debería insertarse únicamente en el curso y no en toda la plataforma.

Este código crea el banner sin depender de jQuery, lo que asegura mejor compatibilidad. Sigue estos pasos:

  1. Ve a la página del curso donde deseas agregar el banner.
  2. Añade un bloque HTML y pega el siguiente código en él:
html
Copy code
<div> <script> document.addEventListener("DOMContentLoaded", function() { // Selecciona el contenedor específico para el curso var courseContent = document.querySelector("#region-main"); // Selecciona el contenedor principal del curso if (courseContent) { // Crea el nuevo contenedor del banner var bannerContainer = document.createElement("div"); bannerContainer.style.textAlign = "center"; bannerContainer.style.marginBottom = "20px"; bannerContainer.innerHTML = "<img width='100%' src='">https://mistermadrid.com/clase/pluginfile.php/146/mod_resource/content/1/BG-Ingles_I.png'>"; // Inserta el banner al inicio del contenido principal del curso courseContent.insertAdjacentElement("afterbegin", bannerContainer); } }); </script> </div> 
Explicación del Código:
  • Ubicación Específica para el Curso: Utilizamos #region-main como selector para apuntar solo al contenedor principal del contenido del curso.
  • Imagen en el Banner: Se inserta al inicio del contenido del curso (insertAdjacentElement("afterbegin")) para que se muestre en la parte superior de la página del curso.
  • Estilo Inline: El banner se centra y tiene un margen inferior para separar visualmente el banner del contenido siguiente.

Este método debería asegurarte de que el banner se muestre únicamente en la página del curso donde está el bloque.

 

2. Prompt para Crear un botón que despliegue info y la cierre.

Crea el código html para un botón "Mostrar Info" en una etiqueta de Moodle 4.4.1 que al darle clic abra y despliegue información, coloca un botón después de la información para cerrar la información al darle clic. El segundo botón para cerrar la información se llamará "Cerrar".
ChatGPT said:
ChatGPT

Aquí tienes el código HTML para un botón "Mostrar Info" en una etiqueta de Moodle 4.4.1. Al hacer clic en el botón, se desplegará la información, y después de la información aparecerá un segundo botón llamado "Cerrar" para ocultarla.

html
 
--Inicio del código
Copy code

<div>
<!-- Botón para mostrar información -->
<button onclick="mostrarInfo()" style="background-color: rgb(1, 33, 104); color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 5px; cursor: pointer;">
Mostrar Info
</button>

<!-- Contenedor de la información a desplegar -->
<div id="infoContent" style="display: none; margin-top: 10px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
<p>Aquí se muestra la información que deseas desplegar al hacer clic en el botón "Mostrar Info". Puedes añadir cualquier contenido HTML, como texto, imágenes o enlaces.</p>

<!-- Botón para cerrar la información -->
<button onclick="cerrarInfo()" style="background-color: rgb(1, 33, 104); color: white; padding: 10px 20px; margin-top: 10px; border: none; border-radius: 5px; cursor: pointer;">
Cerrar
</button>
</div>

<script>
function mostrarInfo() {
document.getElementById("infoContent").style.display = "block";
}

function cerrarInfo() {
document.getElementById("infoContent").style.display = "none";
}
</script>
</div>

 

--Fin del código


Explicación del Código:
  • Botón "Mostrar Info": Este botón inicial muestra la sección de información al hacer clic, llamando a la función mostrarInfo() para cambiar el estado de visualización del contenido.
  • Contenedor de Información (<div id="infoContent">): La sección que contiene la información a desplegar. Inicialmente está oculta (display: none;) y se mostrará al hacer clic en el botón "Mostrar Info".
  • Botón "Cerrar": Este segundo botón se coloca dentro del contenedor de información. Al hacer clic en él, se llama a la función cerrarInfo() para ocultar la información.
  • Funciones JavaScript:
    • mostrarInfo(): Cambia el estilo de infoContent para que se muestre (display: block).
    • cerrarInfo(): Oculta nuevamente el infoContent (display: none).
Instrucciones para Moodle:
  1. Entra en la página del curso y crea una Etiqueta.
  2. Cambia al editor HTML de la etiqueta y pega el código.
  3. Guarda y verifica que al hacer clic en "Mostrar Info" se despliega la información y que el botón "Cerrar" la oculta nuevamente.

Este diseño permite un flujo simple donde el usuario puede abrir y luego cerrar la información con los botones respectivos.

 

_____

4. Prompt Crear boton con info desplegable con colores y colores de fondo.

Ideas para armonía de colores: https://www.canva.com/es_mx/aprende/100-combinaciones-colores-como-aplicarlas-disenos/

Crea el código html para un botón "Mostrar Info" en una etiqueta de Moodle 4.4.1 que al darle clic abra y despliegue información, coloca un botón después de la información para cerrar la información al darle clic. El segundo botón para cerrar la información se llamará "Cerrar". El fondo donde va la información será #FF420E, y el texto será blanco. El botón será de color #FF420E con letra blanca.
ChatGPT said:
ChatGPT

Aquí tienes el código HTML para un botón "Mostrar Info" en una etiqueta de Moodle 4.4.1 que despliega información al hacer clic. Después de la información, aparece un botón llamado "Cerrar" para ocultarla. La sección de información tiene un fondo naranja oscuro (#FF420E) con texto blanco, y ambos botones tienen el mismo color de fondo y texto.

html
Copy code
<div> <!-- Botón para mostrar información --> <button onclick="mostrarInfo()" style="background-color: #FF420E; color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 5px; cursor: pointer;"> Mostrar Info </button> <!-- Contenedor de la información a desplegar --> <div id="infoContent" style="display: none; margin-top: 10px; padding: 15px; border-radius: 5px; background-color: #FF420E; color: white;"> <p>Aquí se muestra la información que deseas desplegar al hacer clic en el botón "Mostrar Info". Puedes añadir cualquier contenido HTML, como texto, imágenes o enlaces.</p> <!-- Botón para cerrar la información --> <button onclick="cerrarInfo()" style="background-color: #FF420E; color: white; padding: 10px 20px; margin-top: 10px; border: none; border-radius: 5px; cursor: pointer;"> Cerrar </button> </div> <script> function mostrarInfo() { document.getElementById("infoContent").style.display = "block"; } function cerrarInfo() { document.getElementById("infoContent").style.display = "none"; } </script> </div> 
Explicación del Código:
  • Botón "Mostrar Info": Este botón tiene un fondo #FF420E y texto blanco. Llama a la función mostrarInfo() para mostrar la información.
  • Contenedor de Información: El fondo de esta sección es #FF420E, y el texto es blanco para asegurar contraste y legibilidad.
  • Botón "Cerrar": Ubicado dentro del contenedor de información, con el mismo estilo que el botón "Mostrar Info" (fondo #FF420E y texto blanco).
  • Funciones JavaScript:
    • mostrarInfo(): Cambia el estilo de infoContent para que se muestre (display: block).
    • cerrarInfo(): Oculta nuevamente el infoContent (display: none).
Instrucciones para Moodle:
  1. En la página del curso, crea una Etiqueta.
  2. Cambia al editor HTML de la etiqueta y pega este código.
  3. Guarda y verifica que al hacer clic en "Mostrar Info" se despliegue la información y que el botón "Cerrar" la oculte.

Este código asegura un diseño simple y atractivo con un fondo distintivo para el contenido.

----