Completion requirements
Home
Table of contents
1. 1. Prompt para crear botones toggleInfo (Botones que aben y ocultan info): [edit]
2. 2. Prompt para Banner de curso en un bloque de Moodle: [edit]
3. 2. Prompt para Crear un botón que despliegue info y la cierre. [edit]
4. 4. Prompt Crear boton con info desplegable con colores y colores de fondo. [edit]
1. Prompt para crear botones toggleInfo (Botones que aben y ocultan info): [edit]
---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.
